學不完．教不停．用不盡

隨著數位科技的快速發展，互動式網頁逐漸成為教學現場的重要工具。互動網頁不僅能增進教師與學生間的教學互動，更能提升學生的學習成效。然而，許多教師面對網頁設計、程式撰寫往往感到卻步，那麼，如何在不懂程式設計的情況下，也能建立高品質的互動式教學網頁呢？

建立互動式教學網頁的好處

＊利用上述方式製作互動式教學網頁，能為教學現場帶來以下好處：

＊提升學生學習動機：透過劇情式互動設計，增加學生的學習興趣與主動參與。

＊降低教學成本：免去聘請網頁設計人員的高額成本，自行快速打造專業的教學網頁。

＊促進教學成效：有效運用角色互動和即時反饋功能，大幅提升學生吸收和學習理解力。

＊改善課堂互動性：透過互動設計，增加師生之間的溝通與交流，增強學生投入感。

本文將以一個劇本文本為例，逐步教你透過免費的 AI 工具 ChatGPT 和網頁生成工具 v0.dev，輕鬆打造屬於自己的教學互動網頁。

參考以下的網址：

ChatGPT 對話：https://chatgpt.com/share/6807426d-0444-8008-ae9a-bb5a064ac0c2

v0.dev 程式：https://v0-venetian-merchant-platform.vercel.app/

首先，上傳威尼斯商人文本：

提示詞：請根據檔案的文本，將文中所有的人物(包含群眾)分析其角色，並以表格呈現。

提示詞：根據以上這些主要角色色進行分析，包含角色的動機與目標、性格特質、與其他角色的互動等方面。

得到以下結果（將內容複製到 Word 文件再另存為 PDF 檔）：

提示詞：基於以上的內容，如果要做一個互動式的網頁來幫助演員詮釋這段劇本，你有何麼建議？

得到以下結果（將內容複製到 Word 文件再另存為 PDF 檔）：

切換到 v0.dev（https://v0.dev/）。

先上傳以上的三個檔案（威尼斯商人文本.pdf、威尼斯商人角色分析.pdf、威尼斯商人網站規劃.pdf）

再輸入提示詞：根據檔案「威尼斯商人文本、威尼斯商人角色分析」的內容，再依「威尼斯商人網站規劃」的內容，為我設計一個給高中學生可以學習和遊戲的互動學習平台。盡量充實學習內容的知識量，並注意字體大小以利學生閱讀。避免使用外部圖片資源，以明亮而色彩豐富的視覺化設計，並增加網頁互動性。再以側邊欄位，顯示學生操作歷程的記錄，並且可以切換顯示/隱藏側邊欄位。並提供按鈕，可以將學生操作歷程的記錄在瀏覽器中以列印方式輸出學習記錄的PDF檔。

讓 v0.dev 產生這個程式，以下版本是第一版，未經修改的版本，仍有必須修改之處。

v0.dev 程式：https://v0-venetian-merchant-platform.vercel.app/