如何用大语言模型做一个Html+CSS+JS的词卡网站

一、引言

词汇是语言学习的核心，如何有效地帮助学生记忆并使用词汇是英语教学中的一个重要课题。大语言模型精通各类编程语言，能够为开发各类小项目提供帮助。为了辅助外语教学中的词汇学习，我借助大语言模型开发有声词卡网站，网站的主要功能是能够读取上传的txt文本，同时根据提前设定好的间隔时间、朗读遍数，进行滚动朗读和显示。本网站主要采用html+style+CSS编写，利用xampp在本地进行调试，然后上传网站运行，使用者可以通过手机、电脑、平板等终端进行使用。

二、网站的主要特点

根据需求，采用人机多轮对话的形式，设计并开发了一款有声在线词汇教学程序——Vocabulary Flashcards。它结合了交互式设计和自动播放功能，旨在提升学生的学习体验，同时减轻教师的教学负担。网站的界面如下所示：

程序的主要特点包括：

1. 程序以卡片的形式展示目标词汇。用户可以选择不同的单元进行学习。

2. 自动播放与重复设置。 用户可设定单词播放的重复次数和间隔时间。自动播放功能支持学生无缝学习，无需手动切换单词。

3. 可定制化学习。提供学习单元选择、间隔时间设定、是否自动朗读、朗读遍数等自定义参数设定。学习过程中可以启用或禁用自动朗读、朗读遍数等设定。

4. 控制按钮。设定有开始、暂停、重置功能按钮，便于学习灵活掌控学习节奏。

三、网站的设计

本网站程序采用了HTML、CSS和JS，HTML用于前端展示，CSS来控制样式，JS代码来实现功能逻辑，以下是整体开发思路：

1. 前端设计

使用HTML结构化呈现单词卡片、控制面板及功能按钮。利用CSS优化页面布局，确保卡片和控件在不同设备上的良好适配。可以在手机、电脑上进行自适应显示和播放，方便用户随时随地学习、复习和巩固单词。

2. 功能逻辑实现

用大语言模型编写Js代码用于实现自动播放、重复次数控制及按钮功能响应。

利用DOM操作动态更新单词显示内容。

3. 界面设计优化

集用采用CSS代码来控制网页样式、字体颜色、控件样式等，使用户界面设计简洁直观，大大降低使用门槛。用户可自定义的学习参数，提升灵活性和实用性。

四、开发过程

首先要通过Chatgtp进行提问，说明生成的是一个html+css+js的英语词卡朗读网站，详细描述其功能是可以读取wordlist文件夹下面的txt文件，然后展示在页面上，并根据是否设置auto read words来朗读单词，播放的同时还可以设定播放间隔时间和次数。在生成的三个不同的代码中，把html代码先放在txt文档当中，然后保存为index.html， css代码放入txt文件中，另存为style.css，js代码存入txt，另存为script.js文件，和其它的文件语言在同一目录。

同时把单词存为txt文件，放入到wordlist文件夹中。调试时，可以直接使用chrome浏览器，打开index.html就可以看到效果，如果想省事一些，也可以打开这个Just a moment...网站，把对应的html, css, js代码放到对应的位置就可以看到效果。但是，自动读取txt的功能还需要放在服务器上才可以，因此可以使用xampp来模拟网络空间，把文件放到htdoc目录下面，运行服务器，就可以通过网页127.0.0.1来访问了。