个人中心
gpt4 book ai didi

javascript - 使用 jquery 和 javascript 进行测验

转载 作者：行者123 更新时间：2023-11-28 15:44:52 25 4
gpt4 key购买 nike

我正在用 javascript 和 jquery 做一个测验，但我完全不知道如何继续。目前我只创建了一个 JSON 来保存问题。

到目前为止的 Javascript 文档:

    // JavaScript Document
(function(){
    window.onload = init;

    function init(){

    }

    var points = 0;
    var numberofquestions= 0;
    var correct= 0;
    var quiz= {question: [
        {Question: "Question 1?", 
            answers: [
                {answer: "Answer 1", correct_answer: 0},
                {answer: "Answer 2", correct_answer: 1},
                {answer: "Answer 3", correct_answer: 0}
        ]}
    ]};
})();

HTML

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Quiz</title>
<script src="../javascript/quizJS.js"></script>
<link rel="stylesheet" type="text/css" href="../css/stil.css">
</head>

<body>
    <div id="wrapper">
        <header id="header">
            <h1>Quiz</h1>
        </header>
        <div id="container">
            <h2 id="Title"></h2>
            <ul class="answer">
            </ul>

            <section id="navigation">
                <button ID="btnPrev">Prev</button>
                <button ID="btnNext">Next</button>
            </section>
        </div>
        <footer id="footer">

        </footer>
    </div>
</body>
</html>

我并不是要求任何人这样做，但我需要帮助才能取得任何进展。我尝试过使用谷歌来找到类似的东西，但它看起来很复杂，我无法弄清楚其中的模式。谢谢

最佳答案

我给你一些想法:

  • 您提出问题的结构是正确的，并且您的初始变量选择正确。这是一个很好的开始。我还缺少一个变量“current_question”，您将其设置为 0。

  • 然后我们有 HTML 部分。它似乎也是一个足以描述问题的结构。

现在，缺少的是第三部分:逻辑。您需要编写一个程序:

  • 1) 在 HTML 中绘制一个问题
  • 2) 当用户点击答案时，查看测验数组中的当前问题，并检查其是否正确
  • 3) 如果正确，您将向点变量添加一些点。
  • 4) 您将执行 current_question=current_question + 1 并返回步骤 1)

这可以补充您的计划

 var current_question_number=0;
 var currentQuestion=null; // we will store the current question here for easy access

 function start_quiz() {
    current_question_number=0;
    correct=0;
    points=0;

    paint_question();       

 }


 // you will call this to paint the current question current_question_number

 function paint_question() {

     currentQuestion=quiz.question[current_question_number];

      // paint the title

      // paint inside a HTML by id: Standard javascript way
      document.getElementById("title").innerText=currentQuestion.Question;

      // or use jquery: $("#title").text(currentQuestion.Question);

      // paint the answers
      var answers=currentQuestion.answers;

      for (var i=0; i<answers.length; i++) {
             var answer=answers[i]; // current answer
             // now you have to add <li>answer</li> to the <ul>
             // this is your homework!
      }
 }

 // you will call this when the user clicks on one answer, with the answer number

 function receive_answer(chosen) {

         if (currentQuestion.answers[chosen].correct_answer==1) {
                 // add the points
         }

         current_question++;
         paint_question();

 }

关于javascript - 使用 jquery 和 javascript 进行测验，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22745951/

25 4 0
文章推荐： javascript - 使用 can.Map.Validate 验证动态对象
文章推荐： javascript - 使用 AJAX/JSON 返回整个文件
文章推荐： html - 主体中的居中部分
文章推荐： javascript - jQuery 选择第 n 个子元素
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com