个人中心
gpt4 book ai didi

javascript - 使用按钮 onclick 计算正确答案

转载 作者：行者123 更新时间：2023-12-01 03:07:37 26 4
gpt4 key购买 nike

我正在尝试计算测验中的正确答案，以便当玩家单击正确答案时，计数器会加一，并且在测验结束时，html 会显示“你得到了”+正确+ “答案正确”。

期望的结果:显示玩家正确回答的答案数量。

正如你所看到的，我已经尝试了一些方法，但是不起作用。

var index = 0;

function nextButton() {
  document.getElementById("questionHere").innerHTML = iconquiz[index].iq;
  document.getElementById("answer1").innerHTML = iconquiz[index].ia1;
  document.getElementById("answer2").innerHTML = iconquiz[index].ia2;
  document.getElementById("answer3").innerHTML = iconquiz[index].ia3;
  if (index < iconquiz.length) {
    index++
  }
}

function prevButton() {
  document.getElementById("questionHere").innerHTML = iconquiz[index].iq;
  document.getElementById("answer1").innerHTML = iconquiz[index].ia1;
  document.getElementById("answer2").innerHTML = iconquiz[index].ia2;
  document.getElementById("answer3").innerHTML = iconquiz[index].ia3;
  if (index != 0) {
    index--
  }
}

var counter = 0;

function buttonClicked(number) {
  if (iconquiz[index].correct === number) {
    counter++
  }
}

var iconquiz = [{
    iq: "Please Begin",
    ia1: "This is a quiz over different icons used in the coding community!",
    ia2: "",
    ia3: ""
  },

  {
    iq: "which icon is used for GitHub?",
    ia1: "<i class='fa fa-gitlab fa-lg' aria-hidden='true'></i>" + "<input class='answers' type='radio' name='answer' value='incorrect'>",
    ia2: "<i class='fa fa-grav fa-lg' aria-hidden='true'></i>" + "<input class='answers' type='radio' name='answer' value='incorrect'>",
    ia3: "<i class='fa fa-github-alt fa-lg' aria-hidden='true'></i>" + "<input class='answers' type='radio' name='answer' value='correct'>"
    correct: 3
  },

  {
    iq: "What is this? " + "<i class='fa fa-gitlab' aria-hidden='true'></i>",
    ia1: "GitHub" + "<input class='answers' type='radio' name='answer' value='incorrect'>",
    ia2: "Atom.io" + "<input class='answers' type='radio' name='answer' value='incorrect'>",
    ia3: "GitLab" + "<input class='answers' type='radio' name='answer' value='correct'>"
  },
  {
    iq: "question number three",
    ia1: "1 ",
    ia2: "2 ",
    ia3: "3 "
  },

  {
    iq: "no more!",
    ia1: "you got " + correct + " answers correct!",
    ia2: "",
    ia3: ""

  },



];
/*************
MAIN STUFFF
*************/

body {
  background: #CCC;
  font-family: 'Varela Round', sans-serif;
}

.collapse {
  color: #fff;
  background: #494949;
  border-radius: 10px;
  width: 300px;
  margin: 20px auto;
  padding: 10px 0;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}

#correct:active {
  color: #4ada95;
}

#correct:focus {
  color: #4ada95;
}


/*************
QUIZ BOXES
*************/

h2 {
  text-align: center;
}

input {
  display: none;
  visibility: hidden;
}

.answers {
  display: inline;
  visibility: visible;
}

label {
  width: 90px;
  margin: 0 auto;
  margin-bottom: 10px;
  display: block;
  text-align: center;
  color: #fff;
  background-color: #4ada95;
  border-radius: 5px;
}

label:hover {
  color: #494949;
  cursor: pointer;
}

label::before {}


/************
QUIZ CONTENT
************/

h3 {
  background-color: #707070;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin: 0;
  padding: 10px;
}

li {
  list-style-type: none;
  padding: 10px;
  margin: 0 auto;
  text-align: center;
}

button {
  color: #fff;
  background-color: #707070;
  border-radius: 5px;
  border-style: solid;
  border-color: #707070;
  margin: 5px;
}

.buttons {
  position: absolute;
  bottom: 0;
  text-align: center;
  margin-left: 73px;
}


/***********
QUIZES
***********/

#expand {
  height: 225px;
  overflow: hidden;
  transition: height 0.5s;
  background-color: #4ada95;
  color: #FFF;
  width: 250px;
  margin: 0 auto;
  text-align: center;
  border-radius: 10px;
  position: relative;
}


/**********
FIRST QUIZ
**********/

#toggle:checked~#expand {
  height: 0px;
}

#toggle:checked~label::before {
  display: hidden;
}
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
  <link href="quiz.css" rel="stylesheet">
  <script src="quiz.js"></script>
</head>

<body>
  <main>

    <div class="collapse">
      <h2>Icon Quiz</h2>
      <input id="toggle" type="checkbox" checked>
      <label for="toggle">take quiz</label>
      <div id="expand">
        <section>
          <h3 id="questionHere">Please Begin</h3>
          <section>
            <li id="answer1" onclick="buttonClicked(1)">This is a quiz over different icons used in the coding community!</li>
            <li id="answer2" onclick="buttonClicked(2)"></li>
            <li id="answer3" onclick="buttonClicked(3)"></li>
          </section>
        </section>
        <div class="buttons">
          <button onclick="prevButton()" type="button">prev</button><button onclick="nextButton()" type="button">next</button>
        </div>
      </div>
    </div>

  </main>
</body>

</html>

最佳答案

这只是一个建议，确保您可以找到更好的解决方案:

我使用了这个数据结构:

var iconquiz =[
{"question" : "Question 1" ,"answers" : ["Answer 1.1","Answer 1.2","Answer 1.3"] ,"correct" :2 ,"was_correct":0},
{"question" : "Question 2" ,"answers" : ["Answer 2.1","Answer 2.2","Answer 2.3"] ,"correct" :3,"was_correct":0},
{"question" : "Question 3" ,"answers" : ["Answer 3.1","Answer 3.2","Answer 3.3"] ,"correct" :3,"was_correct":0}
];

包含相关答案和正确答案索引的问题列表(如果您在 html 中通过赋予用户可以作弊的 corre 类来指示正确答案)。

我使用了 was_ Correct 属性仅在一次专业问题中通过正确答案增加分数(或通过错误答案减少分数)。

2-确保以正确的间隔递增/递减索引

function nextButton() {
   if(index < iconquiz.length-1 ){
      index++;
   }
}


function prevButton() {
   if(index > 0){
      index--;
   }
}

3-您可以在单击提交按钮后计算一次分数，或在用户每次进行更改时计算分数。

var radios = document.getElementsByClassName("answers");
for(radio in radios) {
   radios[radio].onchange = function() {
      if(iconquiz[this.dataset.question].was_correct==0){
        if(iconquiz[this.dataset.question].correct == this.value)   {
          correct ++;iconquiz[this.dataset.question].was_correct=1;
        }
      }
   else if(iconquiz[this.dataset.question].correct != this.value){
      correct --;iconquiz[this.dataset.question].was_correct=0;
   } 
 }

jsfiddle

关于javascript - 使用按钮 onclick 计算正确答案，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46078095/

26 4 0
文章推荐： jquery - 如何在模态中使用sweetalert2？
文章推荐： r - 如何减少R中的数据大小？
文章推荐： javascript - Robin Herbot 的输入掩码，带有逗号和 2 位小数
文章推荐： jQuery 使用 .next() 函数查找紧邻字符 "@"的字符
行者123
个人简介

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

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