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

PythonFun2025-01-31 17:27

一、引言

词汇是语言学习的核心，如何有效地帮助学生记忆并使用词汇是英语教学中的一个重要课题。大语言模型精通各类编程语言，能够为开发各类小项目提供帮助。为了辅助外语教学中的词汇学习，我借助大语言模型开发有声词卡网站，网站的主要功能是能够读取上传的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来访问了。

调试过程中如果出现问题，还可以继续向Chatgpt进行提问，修改js的功能逻辑，优化页面设置，从而最终使程序变的更加完善。

程序在开发的过程中借鉴了有道发音的部分代码，融入到了js代码当中，同时修复了部分bug

五、代码展示

Html代码展示：

php 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vocabulary Flashcards</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="flashcard">
            <div class="word" id="wordDisplay">Welcome</div>
        </div>
        
        <div class="controls">
            <div class="unit-controls">
                <select id="textSelect" class="control-item">
                    <option value="Unit1">Unit 1</option>
                    <option value="Unit2">Unit 2</option>
                </select>
                
                <select id="repeatCount" class="control-item">
                    <option value="1">Repeat 1x</option>
                    <option value="2">Repeat 2x</option>
                    <option value="3">Repeat 3x</option>
                    <option value="4">Repeat 4x</option>
                    <option value="5">Repeat 5x</option>
                </select>
            </div>
            
            <div class="settings-row">
                <div class="interval-control">
                    <label for="interval">Interval (seconds):</label>
                    <input type="number" id="interval" min="1" max="10" value="2" class="control-item">
                </div>

                <div class="auto-read-control">
                    <label for="autoRead">
                        <input type="checkbox" id="autoRead" class="control-item" checked>
                        Auto Read Words
                    </label>
                </div>
            </div>
            
            <div class="buttons">
                <button id="startBtn" class="control-item">Start</button>
                <button id="pauseBtn" class="control-item" disabled>Pause</button>
                <button id="resetBtn" class="control-item">Reset</button>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS代码展示：

php 复制代码 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 13px;
}

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f2f5;
    font-family: Arial, sans-serif;
}

.container {
    width: 90%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.flashcard {
    width: 100%;
    height: 200px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
}

.flashcard:hover {
    transform: translateY(-5px);
}

.word {
    font-size: 52px;
    color: #007bff;
    text-align: center;
    padding: 2rem;
}

.controls {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.control-item {
    padding: 0.5rem 1rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.control-item:hover {
    border-color: #007bff;
}

.unit-controls {
    display: flex;
    gap: 1rem;
    align-items: center;
}

select.control-item {
    width: 150px;
}

.settings-row {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
}

.interval-control, .auto-read-control {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.auto-read-control input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-right: 8px;
}

input[type="number"] {
    width: 80px;
}

.buttons {
    display: flex;
    gap: 1rem;
}

button.control-item {
    min-width: 80px;
    background: #007bff;
    color: white;
    border: none;
}

button.control-item:hover {
    background: #0056b3;
}

button.control-item:disabled {
    background: #cccccc;
    cursor: not-allowed;
}

js代码展示

class FlashcardPlayer {
    constructor() {
        this.currentList = [];
        this.currentIndex = 0;
        this.interval = 2000; // 默认的间隔时间，最终会基于音频时长调整
        this.timer = null;
        this.isPlaying = false;
        this.audioElement = new Audio();
        this.currentRepeatCount = 0;
        this.maxRepeatCount = 1;

        // DOM Elements
        this.wordDisplay = document.getElementById('wordDisplay');
        this.textSelect = document.getElementById('textSelect');
        this.intervalInput = document.getElementById('interval');
        this.autoReadCheckbox = document.getElementById('autoRead');
        this.repeatCountSelect = document.getElementById('repeatCount');
        this.startBtn = document.getElementById('startBtn');
        this.pauseBtn = document.getElementById('pauseBtn');
        this.resetBtn = document.getElementById('resetBtn');

        // Initialize
        this.setupEventListeners();
        this.loadWordList();
    }

    setupEventListeners() {
        this.startBtn.addEventListener('click', () => this.start());
        this.pauseBtn.addEventListener('click', () => this.pause());
        this.resetBtn.addEventListener('click', () => this.reset());
        this.textSelect.addEventListener('change', () => this.loadWordList());
        this.intervalInput.addEventListener('change', () => {
            this.interval = this.intervalInput.value * 1000;
            if (this.isPlaying) {
                this.pause();
                this.start();
            }
        });
        this.repeatCountSelect.addEventListener('change', () => {
            this.maxRepeatCount = parseInt(this.repeatCountSelect.value);
        });
    }

    async loadWordList() {
        try {
           // const response = await fetch(`./wordlist/${this.textSelect.value}.txt`);
           const response = await fetch(`./wordlist/${selectedFile}`);
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            const text = await response.text();
            this.currentList = text.split('\n').filter(word => word.trim() !== '');
            this.currentIndex = 0;
            this.wordDisplay.textContent = this.currentList[0];
        } catch (error) {
            console.error('Error loading word list:', error);
            this.wordDisplay.textContent = 'Error loading words';
        }
    }

    playWord(word, repeatCount, callback) {
        if (this.autoReadCheckbox.checked) {
            let count = 0;
            const playAudio = () => {
                if (count < repeatCount) {
                    const encodedWord = encodeURIComponent(word);
                    this.audioElement.src = `https://xx.com/dictvoice?audio=${encodedWord}&type=1`; 
                    this.audioElement.play();
                    count++;
                    this.audioElement.onended = playAudio;
                } else {
                    callback(); // 音频播放结束后调用回调，开始延迟
                }
            };
            playAudio();
        } else {
            callback(); // 如果没有勾选自动朗读，直接执行延迟
        }
    }

    start() {
        if (!this.isPlaying) {
            this.isPlaying = true;
            this.startBtn.disabled = true;
            this.pauseBtn.disabled = false;
            this.currentRepeatCount = 0;
            this.showNextWord();
        }
    }

    pause() {
        if (this.isPlaying) {
            this.isPlaying = false;
            this.startBtn.disabled = false;
            this.pauseBtn.disabled = true;
            clearTimeout(this.timer);
            this.audioElement.pause();
        }
    }

    reset() {
        this.pause();
        this.currentIndex = 0;
        this.currentRepeatCount = 0;
        this.wordDisplay.textContent = this.currentList[0]; // 更新单词显示为第一个单词
        this.audioElement.pause();
    }

    showNextWord() {
        if (!this.isPlaying) return;

        const currentWord = this.currentList[this.currentIndex];
        const repeatCount = parseInt(this.repeatCountSelect.value);

        // 获取当前单词的朗读次数并播放音频
        this.playWord(currentWord, repeatCount, () => {
            // 在播放完当前单词后，延迟切换到下一个单词
            this.timer = setTimeout(() => {
                if (this.currentIndex >= this.currentList.length - 1) {
                    this.currentRepeatCount++;
                    if (this.currentRepeatCount >= this.maxRepeatCount) {
                        this.pause();
                        this.currentIndex = 0;
                        this.currentRepeatCount = 0;
                        return;
                    }
                    this.currentIndex = 0;
                } else {
                    this.currentIndex++;
                }

                this.wordDisplay.textContent = this.currentList[this.currentIndex]; // 更新显示当前单词
                this.showNextWord(); // https://zhida.zhihu.com/search?content_id=253056071&content_type=Article&match_order=1&q=%E9%80%92%E5%BD%92%E8%B0%83%E7%94%A8&zhida_source=entity，继续播放下一个单词
            }, this.interval); // 使用间隔时间来控制延迟
        });
    }
}

// Initialize the flashcard player when the page loads
document.addEventListener('DOMContentLoaded', () => {
    new FlashcardPlayer();
});

六、未来改进方向

本项目是一个小型的词卡朗读网站，未来可以考虑从以下几个方面来持续改进：

  1. 单词库扩展：引入用户系统，扩展功能，支持用户上传自定义单词库，满足不同学习者的个性化要求。

  2. 学习数据分析：通过本地存储记录学生学习进度，提供个性化反馈。

  3. 增加管理功能：把网页程序扩展为php页面，增加用户注册、管理，词库上传、改名和删除功能。

通过本次开发，我们不仅增强了个人利用大语言模型来进行Web开发的实践能力，还探索了如何将技术融入外语词汇。希望这款小工具能为英语词汇教学提供助力，同时也期待与更多教育工作者探讨改进的方向！

相关推荐
我命由我123451 小时前
前端性能优化指标 - DCL（触发时机、脚本对 DCL 的影响、CSS 对 DCL 的影响）
开发语言·前端·javascript·css·性能优化·html·js
大模型任我行4 小时前
中科大：LLM检索偏好优化应对RAG知识冲突
人工智能·语言模型·自然语言处理·论文笔记
我命由我123455 小时前
Tailwind CSS - Tailwind CSS 引入（安装、初始化、配置、引入、构建、使用 Tailwind CSS）
前端·javascript·css·npm·node.js·js
亓才孓6 小时前
[JavaWeb]搜索表单区域
java·前端·css·css3·web
东临碣石828 小时前
【AI论文】Transformer^2: 自适应大语言模型
人工智能·语言模型·transformer
新加坡内哥谈技术8 小时前
阿里巴巴Qwen团队发布AI模型，可操控PC和手机
人工智能·深度学习·学习·语言模型
NiNg_1_2349 小时前
使用CSS实现一个加载的进度条
前端·css·进度条
新生派19 小时前
HTML＜hgroup＞标签
前端·html
热门推荐
01【deepseek】deepseek-r1本地部署-第一步：下载LM Studio02具身智能之RT-H03Dell服务器升级ubuntu 22.04失败解决04新鲜速递：DeepSeek-R1开源大模型本地部署实战—Ollama + MaxKB 搭建RAG检索增强生成应用05xgboost: Why not implement distributed XGBoost on top of spark06半导体应用系统一些小知识收集(strip&wafer mapping,EAP&scada)07第一届“启航杯”网络安全挑战赛WP08Vue Router 快速入门09密码学原理技术-第六章-introduction to pulibc-key cryptography10macOS安装Gradle环境