Question

我正在尝试在测验中计算正确的答案，这样当玩家点击正确答案时，计数器将添加一个，在测验结束时，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>

Answer 1

首先，请确保阻止用户先点击上一个，因为索引将低于0，并且在尝试使用负索引访问数组时会引发错误。如果prevButton（）函数中的语句简单，则应该执行技巧

<parent>

并且在nextButton（）函数中执行相同的操作索引不应该大于iconquiz.length

Analyze -> Analyze Module Dependencies...

关于计数器问题，请在阵列中添加新字段，该字段将指示哪个答案正确，例如

if (index != 0) {
    index--;
    code...
}

然后添加另一个函数，在其中使用当前数组元素及其正确的id答案检查单击的按钮。

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

并且每个按钮都应分配onclick功能

{
    iq: "which icon is used for GitHub?",
    ia1: "<i class='fa fa-gitlab fa-lg' aria-hidden='true'></i>" + "<button type='submit' value='submit'><i class='fa fa-heart-o' aria-hidden='true'></i></button>",
    ia2: "<i class='fa fa-grav fa-lg' aria-hidden='true'></i>" + "<button type='submit' value='submit'><i class='fa fa-heart-o' aria-hidden='true'></i></button>",
    ia3: "<i class='fa fa-github-alt fa-lg' aria-hidden='true'>" + "</i><button type='submit' value='submit' id='correct'><i class='fa fa-heart-o' aria-hidden='true'></i></button>",
    correct: 3
  }

抓住我认为你应该能够为自己的

工作

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

Answer 2

这只是一个确定您可以找到更好解决方案的主张：

我使用了这种数据结构：

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}
];

带有相关答案和正确答案索引的问题列表（如果您通过给予correct课程来指示用户可以作弊的html中的正确答案）。

我使用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

使用按钮onclick计算正确的答案

2 个答案: