JavaScript 创建一款测验应用

在这篇文章中，我们将学习如何使用JavaScript创建一款测验应用。这款测验应用会包含一系列问题，并在测验结束后显示总分。根据回答正确的问题数量逐渐增加总分。初始时只有三个问题，但你可以在JavaScript文件中增加更多问题。

我们将使用HTML创建结构，并使用CSS进行设计。JavaScript将用于实现测验的逻辑和计分。

让我们来看一下最终应用的样子：

JavaScript 创建一款测验应用

前提条件：

项目结构：

--index.html
--style.css
--script.js

示例： 在相应的文件中编写以下代码。

index.html： 此文件包含项目的结构。
style.css： 此文件包含应用程序的样式。
script.js： 此文件包含加载问题和计分方法的逻辑。

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
 
</head>
 
<body>
    <div class="panel">
        <h1>Quiz Application Using JavaScript</h1>
        <div class="question" id="ques"></div>
        <div class="options" id="opt"></div>
        <button onclick="checkAns()" id="btn">SUBMIT</button>
        <div id="score"></div>
        <script src="script.js"></script>
    </div>
 
</body>
 
</html>

CSS

body {
    background-color: aliceblue;
}
 
.panel {
    margin-top: 8%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: navy;
}
 
.question {
    font-size: 30px;
    margin-bottom: 20px;
}
 
.options {
    font-size: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
    margin-top: 10px;
    margin-bottom: 20px;
    position: fixed;
    top: 40%;
    left: 40%;
}
 
button {
    margin-right: 75px;
    margin-top: 8%;
    font-size: 20px;
    padding: 10px 20px;
    background-color: #4f98c2;
    color: white;
    border: none;
    cursor: pointer;
}
 
#score {
    font-size: 30px;
    color: darkslategray;
}

Javascript

// Questions that will be asked
const Questions = [{
    q: "What is capital of India?",
    a: [{ text: "Gandhinagar", isCorrect: false },
    { text: "Surat", isCorrect: false },
    { text: "Delhi", isCorrect: true },
    { text: "Mumbai", isCorrect: false }
    ]
 
},
{
    q: "What is the capital of Thailand?",
    a: [{ text: "Lampang", isCorrect: false, isSelected: false },
    { text: "Phuket", isCorrect: false },
    { text: "Ayutthaya", isCorrect: false },
    { text: "Bangkok", isCorrect: true }
    ]
 
},
{
    q: "What is the capital of Gujarat",
    a: [{ text: "Surat", isCorrect: false },
    { text: "Vadodara", isCorrect: false },
    { text: "Gandhinagar", isCorrect: true },
    { text: "Rajkot", isCorrect: false }
    ]
 
}
 
]
 
let currQuestion = 0
let score = 0
 
function loadQues() {
    const question = document.getElementById("ques")
    const opt = document.getElementById("opt")
 
    question.textContent = Questions[currQuestion].q;
    opt.innerHTML = ""
 
    for (let i = 0; i < Questions[currQuestion].a.length; i++) {
        const choicesdiv = document.createElement("div");
        const choice = document.createElement("input");
        const choiceLabel = document.createElement("label");
 
        choice.type = "radio";
        choice.name = "answer";
        choice.value = i;
 
        choiceLabel.textContent = Questions[currQuestion].a[i].text;
 
        choicesdiv.appendChild(choice);
        choicesdiv.appendChild(choiceLabel);
        opt.appendChild(choicesdiv);
    }
}
 
loadQues();
 
function loadScore() {
    const totalScore = document.getElementById("score")
    totalScore.textContent = `You scored  ${score} out of$ {Questions.length}`
}
 
 
function nextQuestion() {
    if (currQuestion < Questions.length - 1) {
        currQuestion++;
        loadQues();
    } else {
        document.getElementById("opt").remove()
        document.getElementById("ques").remove()
        document.getElementById("btn").remove()
        loadScore();
    }
}
 
function checkAns() {
    const selectedAns = parseInt(document.querySelector('input[name="answer"]:checked').value);
 
    if (Questions[currQuestion].a[selectedAns].isCorrect) {
        score++;
        console.log("Correct")
        nextQuestion();
    } else {
        nextQuestion();
    }
}

输出：

JavaScript 创建一款测验应用