50 天学习 50 个项目 - HTMLCSS and JavaScript

day46-Quiz App（测试题计分）

效果

在这里插入图片描述

index.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="style.css" />
</head>

<body>
    <!-- 测试题容器 -->
    <div class="quiz-container" id="quiz">
        <!-- 测试题 -->
        <div class="quiz-header">
            <!-- 显示当前第几题 -->
            <span id="currentQuestion">1/4</span>
            <!-- 每一个问题 -->
            <h2 id="question">问题文本</h2>
            <ul>
                <li>
                    <!-- 单选框 -->
                    <input type="radio" name="answer" id="a" class="answer">
                    <label for="a" id="a_text">选项</label>
                </li>

                <li>
                    <input type="radio" name="answer" id="b" class="answer">
                    <label for="b" id="b_text">选项</label>
                </li>

                <li>
                    <input type="radio" name="answer" id="c" class="answer">
                    <label for="c" id="c_text">选项</label>
                </li>

                <li>
                    <input type="radio" name="answer" id="d" class="answer">
                    <label for="d" id="d_text">选项</label>
                </li>
            </ul>
        </div>
        <!-- 提交按钮 -->
        <button id="submit">下一题</button>
    </div>
    <script src="script.js"></script>
</body>

</html>

style.css

/* 引入字体 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');

* {
    /* 内减模式 */
    box-sizing: border-box;
}

body {
    background: url('https://source.unsplash.com/random') no-repeat top center/cover;
    /* background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7fa 100%); */
    font-family: 'Poppins', sans-serif;
    /* 子元素居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
}

/* 测试题容器 */
.quiz-container {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px 2px rgba(100, 100, 100, 1);
    width: 600px;
    overflow: hidden;
}

/* 测试题 */
.quiz-header {
    padding: 4rem;
}

/* 标题 问题文本 */
h2 {
    padding: 1rem;
    text-align: center;
    margin: 0;
}

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

/* 每一项选项 */
ul li {
    font-size: 1.2rem;
    margin: 1rem 0;
}

ul li label {
    cursor: pointer;
}

button {
    background-color: #8e44ad;
    color: #fff;
    border: none;
    display: block;
    width: 100%;
    cursor: pointer;
    font-size: 1.1rem;
    font-family: inherit;
    padding: 1.3rem;
}

/* 悬浮按钮时 */
button:hover {
    background-color: #732d91;
}

/* 点击按钮时 */
button:focus {
    outline: none;
    background-color: #5e3370;
}

script.js

// 重点 flex οnclick="location.reload()" 函数
// 定义问题 
const quizData = [
    {
        question: "web浏览器中运行哪种语言?",
        a: "Java",
        b: "C",
        c: "Python",
        d: "JavaScript",
        correct: "d",
    },
    {
        question: "CSS代表什么?",
        a: "Central Style Sheets",
        b: "Cascading Style Sheets",
        c: "Cascading Simple Sheets",
        d: "Cars SUVs Sailboats",
        correct: "b",
    },
    {
        question: "HTML代表什么?",
        a: "Hypertext Markup Language",
        b: "Hypertext Markdown Language",
        c: "Hyperloop Machine Language",
        d: "Helicopters Terminals Motorboats Lamborginis",
        correct: "a",
    },
    {
        question: "JavaScript是哪一年推出的?",
        a: "1996",
        b: "1995",
        c: "1994",
        d: "none of the above",
        correct: "b",
    },
];
// 1.获取元素节点
const quiz = document.getElementById('quiz')//测试题容器
const answerEls = document.querySelectorAll('.answer')//选项
const questionEl = document.getElementById('question')//问题
const a_text = document.getElementById('a_text')//label
const b_text = document.getElementById('b_text')
const c_text = document.getElementById('c_text')
const d_text = document.getElementById('d_text')
const submitBtn = document.getElementById('submit')//提交按钮
const currentQuestion = document.getElementById('currentQuestion')//显示当前第几题的文本

let currentQuiz = 0//当前的问题
let score = 0//分数
// 初始化加载问题
loadQuiz()
// 函数 加载渲染问题
function loadQuiz() {
    // 先设置所有都为未选中
    deselectAnswers()
    // 当前问题的数据
    const currentQuizData = quizData[currentQuiz]
    // 渲染问题
    questionEl.innerText = currentQuizData.question
    a_text.innerText = currentQuizData.a
    b_text.innerText = currentQuizData.b
    c_text.innerText = currentQuizData.c
    d_text.innerText = currentQuizData.d
    // 显示当前第几题
    currentQuestion.innerHTML = `${currentQuiz + 1}/${quizData.length}`
}
// 函数：设置所有选项都未选中
function deselectAnswers() {
    answerEls.forEach(answerEl => answerEl.checked = false)
}
// 函数：获取选中的选项
function getSelected() {
    let answer

    answerEls.forEach(answerEl => {
        if (answerEl.checked) {
            answer = answerEl.id
        }
    })

    return answer
}
// 2.绑定事件 
submitBtn.addEventListener('click', () => {
    // 获取选中的值
    const answer = getSelected()
    // 如果选中的值存在，即选了，则下一个问题
    if (answer) {
        // 正确 分数+1
        if (answer === quizData[currentQuiz].correct) {
            score++
        }
        // 下一个问题
        currentQuiz++
        // 如果存在下一个问题则再次渲染，否则提交显示结果
        if (currentQuiz < quizData.length) {
            loadQuiz()
            // 是否最后一道
            submitBtn.innerHTML = currentQuiz == quizData.length - 1 ? '提交' : '下一题';
        } else {
            quiz.innerHTML = `
                <h2>答对了 ${score}/${quizData.length} 道题</h2>

                <button οnclick="location.reload()">Reload</button>
            `
        }
    }
})