20 websim AI

(2024/08/05)

前陣子利用Claude Sonnet 3.5寫網頁工具及遊戲，但有對談次數及時間的限制，一下子就不給玩了！！這次要利用websim的這個平台，一樣使用Claude Sonnet 3.5的模型，來製作學生上課表現的評分系統，以往我都用classdojo來記錄學生的分數，但我覺得大才小用了，我只有用來統計分數而已，而且我要記錄學生的一些特殊狀況也不好用，所以今天剛好用這題目來做這小專題！！結果，websim太強了，沒有因為使用太多或太久而被中斷，可以讓我把製作學生表現的評分系統完整記錄下來，如下，供參

--------------------

• • 完成作品的網址：https://wenyu168.github.io/homework.github.io/20240805wenyu_classdojo.html 

  • 學生資料範本：https://wenyu168.github.io/homework.github.io/學生資料範本.xlsx 

• 使用說明：

  • 請先下載上面的【學生資料範本】，可以改成自己要的內容(座號的1~9要輸入 01~09)

  • 再點擊【匯入Excel】，把學生資料匯入就可以用了！！

  • 只要網址不變或不清空資料，內容就會一直存在

  • 如果要移到別的電腦就把資料先【匯出Excel】，再把資料匯入即可

  • 如果同時要用很多班級，記得去把各檔案classDojoData改成不同的名稱，一共有3個地方要改！！

一、認識webSim

• 官網：https://websim.ai/ 

• 直接點擊右上角的login，進行登入

  • 直接使用google帳號登入

  • 由於這次只要要用websim製作網頁工具，所以模型選擇Claude Sonnet 3.5

二、製作學生上課表現評分系統

• 請模仿classdojo製作一個學生上課表現加扣分的網頁 

• 學生一共有30人，男生15人，座號從01~15，女人15人，座號從21~35，學生名稱的部份先用座號表示 

• 除加扣分外，請在每位學生再加入一項文字輸入，可記錄學生的特殊表現

• 特殊表現記錄不要直接顯示在畫面上，先有一標籤，點擊後才能輸入及看到內容 

• 如何讓下次開啟此網頁時，上次的資料及記錄還能保留，並繼續使用

• 有看到保存資料的按鈕，請再新增一個匯入資料的按鈕，或是用cookie的方法可以保存資料 

• 請提供一個匯入學生姓名的cvs檔，將學生真正姓名匯入 

• 請利用window.localStorage 來讓網頁資料(分數及記錄)可以儲存在瀏覽器上 

• 請重新調整頁面，前面01~15是男生，請把圖像改為男生，21~35為女生，請把圖像改為女生。學生表現的分數如果為0或正方，分數顏色不變，如果是負分，分數顏色改為紅色！特殊表現記錄的按鈕與+1、-1在同一列，並顯示記錄兩字即可，每一列的人數為8人

• 請製作一個將學生的姓名、評分及記錄內容匯出成Excel檔的按鈕 

• 請針對剛剛製作的匯出成Excel檔的內容，製作一個匯入excel檔的按鈕 

• 請再修改，當匯入Excel的資料中，若姓名欄是空白時，請不要顯示該學生的訊息 

• 請將標題改為六年一班電腦課上課表現評分系統 

• 基本款完成

三、進階功能

• 可選擇學生圖案

  • 請將圖案改為各種可愛動物圖示，而且不要重複 

• 請新增一個選項，可以選擇學生的圖像，如：動物圖像、植物圖像、機器人圖像、淘趣鬼圖像、隨機等幾個選項 

• 動物圖像跟植物圖像，顯示出來的有問題，請再修改  (這部份並無修改)

• 增加抽籤功能

  • 請再增加一個抽籤的功能，可設定抽籤的人數，並從學生中抽出人員來 

• • 請增加抽籤的前置時間，不要直接顯示結果，並增加抽籤音效 

  • 抽籤結果出來的時候也要有音效 

  • 請再增加抽籤時，可不可以排除已抽中的人 

  • 抽籤被抽中的人直接用顏色顯示出來，如同前一個版本的，而不用把抽籤結果列在下方 

  • ....

• • 剛抽到的人與之前抽到的人要用不同顏色呈現

  • ....這邊一直無法呈現我要的結果，只好將就將就了 

  • 此也可以做分組的功能

• 增加倒數計時的功能

  • 請再增加一個倒數計時的功能，預設倒數時間5分鐘，可以設定分及秒數來倒數，倒數時間到時要有音效

• • 倒數時間請獨立用一小視窗來呈現 

  • 倒數視窗及文字再大一點，視窗位置再中間一點，倒數時間到時，就一直發出音效，直到按結束才會關閉聲音 

• • 請把開始計時的按鈕，改名稱為倒數計時  

  • 請在倒數視窗內建立倒數1分鐘、倒數3分鐘、倒數10分鐘的按鈕，按下後就直接倒數該時間

• 增加班級分數總和的功能

  • 請將全班學生的分數進行加總，並顯示在左上角的地方，標題為"全班"

• • 當全班加總的分數為負數時，請將全班及數字的顏色改為紅色

• • 作品大致完成，並下載成html檔

四、將檔案上傳到GibHub

• 上傳方式，請看https://sites.google.com/site/wenyunotify/15-ai%E7%9B%B8%E9%97%9C/18-ai%E8%A3%BD%E4%BD%9C%E7%B6%B2%E9%A0%81%E5%B7%A5%E5%85%B7%E6%88%96%E9%81%8A%E6%88%B2 

  • 網址：https://wenyu168.github.io/homework.github.io/20240805wenyu_classdojo.html 

  • 學生資料範本：https://wenyu168.github.io/homework.github.io/學生資料範本.xlsx 

• 使用說明：

  • 請先下載上面的【學生資料範本】，可以改成自己要的內容(座號的1~9要輸入 01~09)

  • 再點擊【匯入Excel】，把學生資料匯入就可以用了！！

  • 只要網址不變或不清空資料，內容就會一直存在

  • 如果要移到別的電腦就把資料先【匯出Excel】，再把資料匯入即可

  • 完成圖，如下