v0(https://v0.dev/)做出來的程式真是愈來愈棒了,可以成為老師的好幫手。本篇要以上傳一張英文單字的圖片,請 v0 製作一個練習英語單字的互動網頁。

利用一張英文單字卡,請v0製作精彩的互動學習網頁

這是要使用的單字卡:

單字卡.png

連線 v0 後,先上傳這張圖片,使用以下提示詞:將圖片中的所以單字製作成互動式網頁,幫助學生記憶、學習與應用。

利用一張英文單字卡,請v0製作精彩的互動學習網頁

v0 會開始進行程式的撰寫:(程式不斷出現過程看來有些療癒,因為都不用自己寫啊!)

利用一張英文單字卡,請v0製作精彩的互動學習網頁

在多個連續的過程中寫完的程式碼,你可以先預覽使用。

利用一張英文單字卡,請v0製作精彩的互動學習網頁

當然,你可以利用對話進行修改。通常,不會寫程式的人,不會以程式的內容進行修改,而會以功能面的角度進行修改。

當這個版本已經改到你能接受了,就可以點選右上角的:Deploy。

最後,再點選:Visit Site

利用一張英文單字卡,請v0製作精彩的互動學習網頁

 

你寫好的程式在這裡,而且可以取得網址,

例如:https://v0-interactive-image-quiz.vercel.app/

利用一張英文單字卡,請v0製作精彩的互動學習網頁

v0 寫的程式很不錯,讓使用者可以有互動過程,每一個面頁都有多個連續的互動項目。例如:

*抽卡:使用互動式抽認卡複習詞彙

*配對遊戲:透過將單字與定義進行配對來測試你的記憶力

*測驗:透過多項選擇題測驗你的知識

*單字表:瀏覽所有帶有定義的詞彙

利用一張英文單字卡,請v0製作精彩的互動學習網頁

利用一張英文單字卡,請v0製作精彩的互動學習網頁

利用一張英文單字卡,請v0製作精彩的互動學習網頁

以下這幾個也是使用相同英文單字卡和提示詞所製作的互動網頁,每一個都不一樣的功能,而且個個精彩。

https://v0-interactive-learning-webpage.vercel.app/

https://v0-interactive-learning-website-4e.vercel.app/

https://v0-interactive-image-learning-p1.vercel.app/

https://v0-interactive-image-learning.vercel.app/

https://v0-interactive-learning-website.vercel.app/

https://v0-interactive-vocabulary-tool-seven.vercel.app/

https://v0-interactive-image-words.vercel.app/

https://v0-interactive-learning-website-dm.vercel.app/

https://v0-interactive-picture-book.vercel.app/

學不完.教不停.用不盡文章列表

arrow
arrow
    文章標籤
    v0 互動網頁
    全站熱搜
    創作者介紹
    創作者 vincent 的頭像
    vincent

    學不完.教不停.用不盡

    vincent 發表在 痞客邦 留言(0) 人氣()