如何创建一个简单的 JavaScript 测验？

JavaScript 可用于使任何网页成为动态网页。在本文中，我们将了解如何使用 JavaScript 制作一个简单的测验 Web 应用程序。

此测验 Web 应用程序将具有以下功能。

• 问题的用户界面和四个交互选项。
• 问题之间的导航。
• 以True或False输出值的形式进行评估。

方法：对于用户界面，使用 HTML div标签将页面分为四个部分，并给定类和 id 来标识它们。选择类和 Id 名称，以便它承载每个div的用途。

• 第一个“div”用于“结果”，用于显示问题的状态，如果选择的答案正确与否。
• 第二个“div”用于“question-container”，用于保存问题文本并显示它们。
• 第三个“div”是“option-container”，顾名思义，它将包含问题的所有四个选项。
• 第四个“div”用于“导航”，它将有一个按钮用于导航到下一个问题并评估所选答案。

所有这四个“div”都在另一个带有“panel”类的“div”中。我们在脚本中使用了这个 DOM 元素。

例子：

HTML 代码：以下代码演示了测验应用程序的设计部分。

index.html

    
    
    
       


    
        
  
        
        
            Question goes here.
        
        
            option1
      
            option2
      
            option3
      
            option4
        
        
            Evaluate
            Next
        
    
    

CSS 代码： CSS 有助于对齐不同的选项和按钮。 :hover属性负责创建选择选项的效果。我们还将使用 JavaScript 更改选择效果。

代码负责用户界面的外观和对齐。该文件包含在上述代码的 head 部分中。

样式文件

body{
    padding: 0;
    margin: 0;    
    width:100vw;
    height: 100vh;    
}
.panel{
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.question-container{
    margin: 10px;
    padding: 5px;
    width: 80vw;
    height: 10vh;
    background-color: #c7dddf;
    font-size: x-large;
    text-align: center;
      
}
.result{
    margin: 10px;
    padding: 5px;
    width:80vw;
    height: 10vh;
    text-align: center;
    font-size: 50px;
      
}
.option-container{
    display: flex;
    justify-content: space-around; 
    margin: 10px;
    padding: 5px;
    width: 80vw;
    height: 20vh;
    background-color: #9eb1b3;   
        
}
.option{    
    padding: 10px;
    width: 15vw;
    height: 10vh;
    font-size: larger;
    background-color: lightskyblue;
    border-radius: 25%;
}
.option:hover{
    background-color: lightgoldenrodyellow;
}
.navigation{
    width: 80vw;
    height: 10vh;
    margin: 10px;
    padding: 5px;
    display: flex;
    justify-content: space-around;
    background-color:#c7dddf;
}
  
.evaluate,.next{
    width:30vw;
    height: 8vh;
    padding: 5px;
    font-size: larger;
}
.evaluate{
    
    background-color: #50DBB4;
}
.next{
    color: white;
    background-color: #BF3325;
}

JavaScript 代码：我们将动态显示问题和选项，为此，我们创建了一个对象数组，其中每个对象都有一个问题和相应的选项以及正确答案的信息。有了这个对象数组，我们就有了 JSON 格式，因此它可以帮助我们处理 API 并在大多数情况下处理 JSON 类型的真实数据。

让我们看看如何从这个数组“问题”中访问不同的东西：

How to access any question text	Questions[id].q
How to access  text of the first option of any question	Questions[id].a[0].text
How to know whether the option is true or false	Questions[id].a[0].isCorrect

注意： “id”根据问题编号不断变化，它代表数组中的问题编号。

Questions数组已定义。我们采用了一个布尔变量“start”，它最初设置为真，表示测验的开始。 iterate()函数负责根据传递给它的“id”显示问题和选项。使用代码后面的“下一步”按钮有条件地调用此函数。

iterate()函数：我们从 HTML div中获取结果，并使用 node 元素的 HTML innerText属性将其设置为空文本。设置问题后，我们将使用表中讨论的相同方法设置选项。我们还设置了选项“value”，它也来自数组“Questions”。此“op1.value”表示该选项按钮的值，“Questions[id].a[0].isCorrect”会将其设置为true或false 。然后我们设置一个变量“selected”，用于保存用户所选选项的值。

评估按钮是使用 addEventListener函数实现的。如果它是正确的，那么它会将“result”div文本设置为“true”并将“style.color”属性设置为“green”，否则它将“result”div设置为“false”并将“ style.color”属性为“红色”。

我们正在使用类名获取下一个按钮。设置点击事件将检查 id 变量。如果它小于我们的总问题 id，在我们的例子中是 (0,1,2)，这样我们的数组就不会越界。我们正在调用“迭代”函数，有条件地传递问题的新 ID，同时将“开始”设置为false，表示这不是测验的开始。

脚本.js

// Questions will be asked
const Questions = [{
        id: 0,
        q: "What is capital of India?",
        a: [{ text: "gandhinagar", isCorrect: false },
            { text: "Surat", isCorrect: false },
            { text: "Delhi", isCorrect: true },
            { text: "mumbai", isCorrect: false }
        ]
  
    },
    {
        id: 1,
        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 }
        ]
  
    },
    {
        id: 2,
        q: "What is the capital of Gujarat",
        a: [{ text: "surat", isCorrect: false },
            { text: "vadodara", isCorrect: false },
            { text: "gandhinagar", isCorrect: true },
            { text: "rajkot", isCorrect: false }
        ]
  
    }
  
]
  
// Set start
var start = true;
  
// Iterate
function iterate(id) {
  
    // Getting the result display section
    var result = document.getElementsByClassName("result");
    result[0].innerText = "";
  
    // Getting the question
    const question = document.getElementById("question");
  
  
    // Setting the question text
    question.innerText = Questions[id].q;
  
    // Getting the options
    const op1 = document.getElementById('op1');
    const op2 = document.getElementById('op2');
    const op3 = document.getElementById('op3');
    const op4 = document.getElementById('op4');
  
  
    // Providing option text 
    op1.innerText = Questions[id].a[0].text;
    op2.innerText = Questions[id].a[1].text;
    op3.innerText = Questions[id].a[2].text;
    op4.innerText = Questions[id].a[3].text;
  
    // Providing the true or false value to the options
    op1.value = Questions[id].a[0].isCorrect;
    op2.value = Questions[id].a[1].isCorrect;
    op3.value = Questions[id].a[2].isCorrect;
    op4.value = Questions[id].a[3].isCorrect;
  
    var selected = "";
  
    // Show selection for op1
    op1.addEventListener("click", () => {
        op1.style.backgroundColor = "lightgoldenrodyellow";
        op2.style.backgroundColor = "lightskyblue";
        op3.style.backgroundColor = "lightskyblue";
        op4.style.backgroundColor = "lightskyblue";
        selected = op1.value;
    })
  
    // Show selection for op2
    op2.addEventListener("click", () => {
        op1.style.backgroundColor = "lightskyblue";
        op2.style.backgroundColor = "lightgoldenrodyellow";
        op3.style.backgroundColor = "lightskyblue";
        op4.style.backgroundColor = "lightskyblue";
        selected = op2.value;
    })
  
    // Show selection for op3
    op3.addEventListener("click", () => {
        op1.style.backgroundColor = "lightskyblue";
        op2.style.backgroundColor = "lightskyblue";
        op3.style.backgroundColor = "lightgoldenrodyellow";
        op4.style.backgroundColor = "lightskyblue";
        selected = op3.value;
    })
  
    // Show selection for op4
    op4.addEventListener("click", () => {
        op1.style.backgroundColor = "lightskyblue";
        op2.style.backgroundColor = "lightskyblue";
        op3.style.backgroundColor = "lightskyblue";
        op4.style.backgroundColor = "lightgoldenrodyellow";
        selected = op4.value;
    })
  
    // Grabbing the evaluate button
    const evaluate = document.getElementsByClassName("evaluate");
  
    // Evaluate method
    evaluate[0].addEventListener("click", () => {
        if (selected == "true") {
            result[0].innerHTML = "True";
            result[0].style.color = "green";
        } else {
            result[0].innerHTML = "False";
            result[0].style.color = "red";
        }
    })
}
  
if (start) {
    iterate("0");
}
  
// Next button and method
const next = document.getElementsByClassName('next')[0];
var id = 0;
  
next.addEventListener("click", () => {
    start = false;
    if (id < 2) {
        id++;
        iterate(id);
        console.log(id);
    }
  
})

输出：

JavaScript 测验

这是使用 JavaScript 的简单测验 Web 应用程序，您肯定可以通过使用真实的 API、问题随机播放、设置问题点、设置计数器等来实现它，从而将其提升到一个新的水平。