javascript - 我正在使用 javascript 为在下面发布我的问题的所有功能制作测验 Web 应用程序

Question

我是 JavaScript 新手。我正在制作我的第一个小测验 Web 应用程序，但我被困在这个查询上。我怎样才能打乱问题数组，使问题每次都以不同的顺序出现。我使用了函数 shuffle(array); 并在渲染问题函数中调用了这个函数，但它不起作用

// select all elements
const start = document.getElementById("start");
const quiz = document.getElementById("quiz");
const question = document.getElementById("question");
//const qImg = document.getElementById("qImg");
const choiceB = document.getElementById("B");
const choiceC = document.getElementById("C");
const choiceD = document.getElementById("D");
const counter = document.getElementById("counter");
const timeGauge = document.getElementById("timeGauge");
const progress = document.getElementById("progress");
const scoreDiv = document.getElementById("scoreContainer");

// create our questions
let questions = [{
  question: "What does HTML stand for?",
  choiceA: "Ā.B̄+ĀB",
  choiceB: "AB+BC̄",
  choiceC: " \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\] ",
  choiceD: "<h4>text</h4>",
  correct: "A"
}, {
  question: "What does CSS stand for?",
  choiceA: "Wrong",
  choiceB: "Correct",
  choiceC: "Wrong",
  choiceD: "Wrong2",
  correct: "B"
}, {
  question: "c16/52 in R-L series circuit phase angle is given by ?",
  choiceA: " =tan<sup>-1</sup> l&frasl; wLR",
  choiceB: " tan<sup>-1</sup> wLR",
  choiceC: " ",
  choiceD: "=tan<sup>-1</sup> wL&frasl;R ",
  correct: " A"
}];

// create some variables

const lastQuestion = questions.length - 1;
let runningQuestion = 0;
let count = 0;
const questionTime = 20; // 10s
const gaugeWidth = 150; // 150px
const gaugeUnit = gaugeWidth / questionTime;
let TIMER;
let score = 0;

// render a question
function renderQuestion() {
  let q = questions[runningQuestion];
  shuffle(q);
  question.innerHTML = "<p>" + q.question + "</p>";
  choiceA.innerHTML = q.choiceA;
  choiceB.innerHTML = q.choiceB;
  choiceC.innerHTML = q.choiceC;
  choiceD.innerHTML = q.choiceD;
}

function shuffle(array) {
  var currentIndex = array.length,
    temporaryValue, randomIndex;
  // While there remain elements to shuffle...
  while (0 !== currentIndex) {
    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }
  return array;
}

start.addEventListener("click", startQuiz);

// start quiz
function startQuiz() {
  start.style.display = "none";
  renderQuestion();
  quiz.style.display = "block";
  renderProgress();
  renderCounter();
  TIMER = setInterval(renderCounter, 1000); // 1000ms = 1s
}

// render progress
function renderProgress() {
  for (let qIndex = 0; qIndex <= lastQuestion; qIndex++) {
    progress.innerHTML += "<div class='prog' id=" + qIndex + "></div>";
  }
}

// counter render
function renderCounter() {
  if (count <= questionTime) {
    counter.innerHTML = count;
    timeGauge.style.width = count * gaugeUnit + "px";
    count++
  } else {
    count = 0;
    // change progress color to red
    answerIsWrong();
    if (runningQuestion < lastQuestion) {
      runningQuestion++;
      renderQuestion();
    } else {
      // end the quiz and show the score
      clearInterval(TIMER);
      scoreRender();
    }
  }
}

// checkAnwer

function checkAnswer(answer) {
  if (answer == questions[runningQuestion].correct) {
    // answer is correct
    score++;
    // change progress color to green
    answerIsCorrect();
  } else {
    // answer is wrong
    // change progress color to red
    answerIsWrong();
  }
  count = 0;
  if (runningQuestion < lastQuestion) {
    runningQuestion++;
    renderQuestion();
  } else {
    // end the quiz and show the score
    clearInterval(TIMER);
    scoreRender();
  }
}

// answer is correct
function answerIsCorrect() {
  document.getElementById(runningQuestion).style.backgroundColor = "#0f0";
}

// answer is Wrong
function answerIsWrong() {
  document.getElementById(runningQuestion).style.backgroundColor = "#f00";
}

// score render
function scoreRender() {
  scoreDiv.style.display = "block";

  // calculate the amount of question percent answered by the user
  const scorePerCent = Math.round(100 * score / questions.length);

  // choose the image based on the scorePerCent
  let img = (scorePerCent >= 80) ? "img/5.png" :
    (scorePerCent >= 60) ? "img/4.png" :
    (scorePerCent >= 40) ? "img/3.png" :
    (scorePerCent >= 20) ? "img/2.png" :
    "img/1.png";

  scoreDiv.innerHTML = "<img src=" + img + ">";
  scoreDiv.innerHTML += "<p>" + scorePerCent + "%</p>";
}

标签： javascripthtmlshuffle