Question

我正在尝试使用带有计时问题的JavaScript进行简单的测验。每个问题持续10秒钟，然后继续进行下一个。倒数计时器可以很好地解决第一个问题，然后开始加快速度或显示后续问题的随机数。这是我的代码，附言我为效率低下且忙碌的代码表示歉意，但我仍然不熟悉javascript，一旦解决此问题，我将使代码更加简化。

var questionList = [
        {
            q:"What is a dog?",
            a:["fish","mammal","plant","prokaryote"],
            answer: 1
        },
         {
            q:"What is a cat?",
            a:["mammal","fish","plant","amphibian"],
             answer: 0
        },
         {
            q:"What is a tree?",
            a:["plant","fish","mammal","none"],
             answer: 0
        },
         {
            q:"What do cars run on?",
            a:["gasoline","water","ethanol","liquid oxygen"],
             answer: 0
        },
        {
            q:"What is 4 x 4?",
            a:["8","16","4","160"],
            answer: 1
        },
        {
            q:"What is the capital of Australia?",
            a:["Brisbane","GoldCoast","Perth","Canberra","Melbourne"],
            answer: 3
        },
        {
            q:"What is the national flower of Canada?",
            a:["sunflower","daisy","trillium","rose","lotus"],
            answer: 2
        }
    ];
    //--------------------------------------
    var picked;
    var qcount = 0;
    var output = [];
    var timer;
    var timer2;
    var timeLeft = 10;
    var correctQ = 0;
    var wrongQ = 0;
    //var randomQ = Math.floor(Math.random()*7);
    var x = questionList[qcount];
    var j = x.answer;
   // var cAns = x.a[j];
    //console.log(cAns);
    console.log(j);
    //new Q w/ options
    function qGen(){
        timer = setInterval(time, 1000)
        $('#question').text(x.q);
        for (var i=0; i < (x.a).length; i++){
            var newLi = $('<button>');
            newLi.attr('data-id', i);
            newLi.addClass("answer").text(x.a[i]);
            $('#list').append(newLi);
        }
    }
    qGen();
    // correct answer
    function clickChoice(){
      $('#list').on("click",'button', function(){
          picked = parseInt($(this).attr("data-id")); 
          console.log(picked + "    click");
           if (picked === j){
               console.log(j + "    if");
               qcount++;
               x = questionList[qcount]; 
               j = x.answer;
               qGen();
               correct();
           }else{
               qcount++;
               incorrect();
                x = questionList[qcount]; 
               j = x.answer;
               qGen();
           }
    })
    }
    clickChoice();
    //timer
    function time(){
        timeLeft--;
        $('#time').text(timeLeft);
        if(timeLeft===0){
            $('#score').text('TIME UP');
             timer2 = setInterval(timeUp, 2000);
        }
    }
    //time up
    function timeUp(){
        clearInterval(timer);
        wrongQ++;
        qcount++;
        x = questionList[qcount]; 
        j = x.answer;
        clearInterval(timer2);
        nextQ();
    }
    //correct
    function correct(){
        clearInterval(timer);
        clearInterval(timer2);
        $("#list").text("");
        correctQ++;
        nextQ();
    }
    //incorrect
    function incorrect(){
        clearInterval(timer);
        clearInterval(timer2);
        $("#list").text("");
        wrongQ++;
        nextQ();
    }
    //next question gen
    function nextQ(){
        timeLeft= 10;
        $('#score').text("");
        $('#ca').text("");
        $('#question').text(x.q);
        //$("#time").text(timeLeft);
        $("#list").text("");
        qGen();
    }

Answer 1

下面是代码的修改版本，应该可以解决您的问题。

注释

我对您的HTML和CSS作了一些简单的假设
我尚未实现score更新，但是鉴于以下情况，应该很简单

const questionList = [
  {
    q: 'What is a dog?',
    a: ['fish', 'mammal', 'plant', 'prokaryote'],
    answer: 1
  },
  {
    q: 'What is a cat?',
    a: ['mammal', 'fish', 'plant', 'amphibian'],
    answer: 0
  },
  {
    q: 'What is a tree?',
    a: ['plant', 'fish', 'mammal', 'none'],
    answer: 0
  },
  {
    q: 'What do cars run on?',
    a: ['gasoline', 'water', 'ethanol', 'liquid oxygen'],
    answer: 0
  },
  {
    q: 'What is 4 x 4?',
    a: ['8', '16', '4', '160'],
    answer: 1
  },
  {
    q: 'What is the capital of Australia?',
    a: ['Brisbane', 'GoldCoast', 'Perth', 'Canberra', 'Melbourne'],
    answer: 3
  },
  {
    q: 'What is the national flower of Canada?',
    a: ['sunflower', 'daisy', 'trillium', 'rose', 'lotus'],
    answer: 2
  }
];
//--------------------------------------
let picked;
let qcount = 0;
const output = [];
let timer;
const startingTime = 10;
let timeLeft;
let correctQ = 0;
let wrongQ = 0;
// var randomQ = Math.floor(Math.random()*7);
// let x = questionList[qcount];
// let j = x.answer;
// var cAns = x.a[j];
// console.log(cAns);
// console.log(j);

// next question gen
function nextQ() {
  timeLeft = 10;
  document.querySelector('#score').textContent = '';
  // document.querySelector('#ca').textContent = '';
  document.querySelector('#question').textContent = questionList[qcount].q;
  // $("#time").text(timeLeft);
  document.querySelector('#list').textContent = '';
  qGen();
}

// time up
function timeUp() {
  clearInterval(timer);
  wrongQ += 1;
  qcount += 1;
  nextQ();
}

// correct
function correct() {
  clearInterval(timer);
  correctQ += 1;
  nextQ();
}

// incorrect
function incorrect() {
  clearInterval(timer);
  wrongQ += 1;
  nextQ();
}

// timer
function time() {
  timeLeft -= 1;
  document.querySelector('#time').textContent = timeLeft;
  if (timeLeft === 0) {
    document.querySelector('#score').textContent = 'TIME UP';
    timeUp();
  }
}

// Add EventListener to each button
function addEL(el) {
  el.addEventListener('click', event => {
    picked = parseInt(event.currentTarget.getAttribute('data-id'), 10);
    console.log(`${picked} click`);
    const correctAnswer = questionList[qcount].answer;
    qcount += 1;
    if (picked === correctAnswer) {
      console.log(`${correctAnswer} if`);
      correct();
    } else {
      incorrect();
    }
  });
}

// new Q w/ options
function qGen() {
  const x = questionList[qcount];
  timeLeft = startingTime;
  document.querySelector('#time').textContent = startingTime;
  document.querySelector('#question').textContent = x.q;
  for (let i = 0; i < x.a.length; i += 1) {
    const newLi = document.createElement('li');
    const answer = document.createElement('button');
    answer.setAttribute('data-id', i);
    answer.classList.add('answer');
    answer.textContent = x.a[i];
    addEL(answer);
    newLi.appendChild(answer);
    document.querySelector('#list').appendChild(newLi);
  }
  timer = setInterval(time, 1000);
}

document.addEventListener('DOMContentLoaded', () => {
  qGen();
});

.answer {
  background-color: yellow;
}

<div>
  Question:
  <span id="question">XXX</span>
</div>
<div>
  Time:
  <span id="time">XXX</span>
</div>
<div>
  Score:
  <span id="score">XXX</span>
</div>
<div>
  <ul id="list">
  </ul>
</div>

下面是我所做的更改，包括有关JavaScript良好做法的一些提示。

代码逻辑

您两次致电qGen，每次点击有效地延长了两个新间隔
必须将事件监听器添加到所有按钮
不需要第二个计时器
<li> / <ul>内仅允许<ol>元素
- 将其他元素（例如按钮）放置在这些<li>内是非常好的。
- 如果愿意，您也可以使用其他格式（例如一行）
在DOM树完成加载之前，请避免对DOM进行操作
- 查看添加的DOMContentLoaded事件监听器
output，correctQ，wrongQ：这些赋值从未在您的代码中使用

良好做法

避免使用一元运算符++和-
- 自动分号插入可以break your code
在调用函数之前先定义函数
在完全熟悉普通JavaScript之前，请不要使用jQuery（或其他抽象概念）
首选箭头功能胜过匿名功能
- 在事件监听器中使用event.currentTarget代替this

jQuery / Javascript：倒数计时器行为异常

1 个答案: