用HTML+CSS+JavaScript制作一个能实现答题且答题结束统计分数功能的网页

2024-12-19 04:23:50 JS 1013

制作一个能够实现答题和统计分数的网页需要结合HTML、CSS和JavaScript来实现。以下是一个简单的示例，演示了如何创建一个基本的答题页面，并在用户完成答题后计算并显示得分。

HTML 结构

在HTML中定义问题、选项和按钮等元素。

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quiz App</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="quiz-container">
        <h2 id="question">Question goes here</h2>
        <ul id="options">
            <li><button onclick="checkAnswer(0)">Option 1</button></li>
            <li><button onclick="checkAnswer(1)">Option 2</button></li>
            <li><button onclick="checkAnswer(2)">Option 3</button></li>
            <li><button onclick="checkAnswer(3)">Option 4</button></li>
        </ul>
        <button id="next-btn" onclick="nextQuestion()">Next</button>
        <div id="result-container">
            <p>Your score: <span id="score">0</span></p>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

CSS 样式

使用CSS美化页面元素，使其看起来更加吸引人。

css
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    text-align: center;
}

#quiz-container {
    max-width: 600px;
    margin: 20px auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#question {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

ul#options {
    list-style-type: none;
    padding: 0;
}

ul#options li {
    margin-bottom: 10px;
}

button {
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

#result-container {
    margin-top: 20px;
}

JavaScript 逻辑

使用JavaScript编写答题逻辑和分数统计功能。

javascript
const quizData = [
    {
        question: "What is the capital of France?",
        options: ["Paris", "London", "Berlin", "Madrid"],
        correctIndex: 0
    },
    {
        question: "Who wrote 'Romeo and Juliet'?",
        options: ["Shakespeare", "Dickens", "Hemingway", "Twain"],
        correctIndex: 0
    },
    // Add more questions here
];

let currentQuestion = 0;
let score = 0;

const questionElement = document.getElementById('question');
const optionsElement = document.getElementById('options');
const scoreElement = document.getElementById('score');
const resultContainer = document.getElementById('result-container');
const nextButton = document.getElementById('next-btn');

function loadQuestion() {
    const currentQuiz = quizData[currentQuestion];
    questionElement.textContent = currentQuiz.question;
    optionsElement.innerHTML = '';

    currentQuiz.options.forEach((option, index) => {
        const button = document.createElement('button');
        button.textContent = option;
        optionsElement.appendChild(document.createElement('li')).appendChild(button);
    });
}

function checkAnswer(index) {
    const currentQuiz = quizData[currentQuestion];
    if (index === currentQuiz.correctIndex) {
        score++;
    }
    optionsElement.querySelectorAll('button').forEach(button => {
        button.disabled = true;
    });
    nextButton.disabled = false;
}

function nextQuestion() {
    currentQuestion++;
    if (currentQuestion < quizData.length) {
        loadQuestion();
        optionsElement.querySelectorAll('button').forEach(button => {
            button.disabled = false;
        });
        nextButton.disabled = true;
    } else {
        showResult();
    }
}

function showResult() {
    questionElement.textContent = '';
    optionsElement.innerHTML = '';
    resultContainer.style.display = 'block';
    scoreElement.textContent = score;
    nextButton.style.display = 'none';
}

// 初始化第一题
loadQuestion();

功能说明

HTML部分：定义了问题、选项和按钮，以及用于显示分数的容器。
CSS部分：样式化页面元素，使其看起来更加美观。
JavaScript部分：实现了加载问题、检查答案、计算分数、显示结果和切换问题等功能。使用了数组来存储题目和答案，通过DOM操作来更新页面内容和交互。

这个简单的示例展示了如何用HTML、CSS和JavaScript创建一个基本的答题网页，用户可以在页面上答题并在答题结束后查看得分。可以根据实际需求和复杂度进一步扩展和优化这个系统，如增加更多题目、定制化UI、持久化存储答题记录等功能。