首页 > 解决方案 > 我正在尝试在 HTML 中创建一个简单的多项选择程序,但我无法在最后显示他们的分数

问题描述

var quiz = document.getElementById("quiz");

var ques = document.getElementById("question");

var opt1 = document.getElementById("option1");

var opt2 = document.getElementById("option2");

var opt3 = document.getElementById("option3");

var opt4 = document.getElementById("option4");

var res = document.getElementById("result");

var nextbutton = document.getElementById("next");

var q = document.getElementById('quit');

var review = document.getElementById("review");

var reviewData = document.getElementById("review-data");



var questions = [

  ["What Is The Capital Of Palestine?", "Nablus", "Ramallah", "Jeruslem", "None of the above", "3"],

  ["On which continent is Palestine located?", "Asia", "Africa", " Antarctica", "Europe", "1"],

  ["What is the official currency in Palestine?", "The shekel", "Dollars", "Jordanian Dinar", "none of the above", "1"],

  [" What is the area of Palestine?", " 6220 km²", " 12232 km²", "26,990 km²", "20770 km²", "3"],

  ["What is the population of Palestine?", "1 million ", "4.6 million", " 2 million", "100", "2"],

  [" What is the official language in Palestine?", " spanish", " english", " Arabic", "armenian", "3"],

  ["What is the official religion in Palestine?", " Islamic religion", " Christianity", "The Jewish Religion", "none of the above", "1"],

  ["In what year was the nakba in Palestine?", " 1945", " 1948", "1952", "1960", "2"],

  ["What is the catastrophe?", "The Zionists' occupation of most of Palestine", "The Jordanian occupation of most of Palestine", "none of the above", "all of the above", "1"],

  [" What is a setback?", "The Zionists were killed and deported", "Began the occupation of Palestine", "Israel's occupation of the rest of Palestine (Gaza and the West Bank)", "none of the above", "3"],

  [" In what year was the setback?", " 1960", "1967", "1984", "1948", "2"],

  ["Where was the Oslo agreement reached ?", "Washington, USA", " Colombia", " italy", "palestine", "1"],

  ["When was the Oslo agreement?", "September 13, 1993.", " 1994", " 2000", "1984,12 September", "1"],

  ["What are the most famous holy places in Palestine?", "Al-Aqsa Mosque", " the Church of the Resurrection", " all of the above ", "the Church of the Nativity", "3"],

  ["What is the desert, which is located south of Palestine?", "The Negev Desert", " Patagonia Desert", " Great Victoria Desert", "Kalahari Desert", "1"],

  ["What is the lake that is located on the borders of Palestine?", "Lake Superior", " Lake Michigan", " Lake Jaffa", "Lake Tiberias.", "4"],

  ["A famous sea is located between Palestine and Jordan, what is it?", "the red sea", " The Dead Sea.", "The Mediterranean Sea", "none of the above", "2"],

  ["What is Palestine famous for in agriculture?", "By growing olives", " By growing citrus fruits", " none of the above", "all of the above", "4"],

  ["What are the most famous Palestinian cities?", "اJerusalem, Jericho, Hebron,Washington", " Ramallah, Gaza,Colombia", "none of the above", " Jerusalem, Jericho, Hebron, Ramallah, Gaza, Jaffa, Haifa, Acre, Nazareth, Bethlehem.", "4"],

  ["What are the borders of Palestine from the east?", "Jordan", " egypt", " america", "lebanon", "1"],

  ["What are the borders of Palestine from the west?", "The Dead Sea", " none of the above", " The Mediterranean Sea", "egypt", "3"],

  ["What are the borders of Palestine from the north?", "lebanon", " syria", " egypt", "Lebanon and Syria", "4"],

  [" What are the borders of Palestine from the south?", "syria", " Egypt and the Gulf of Aqaba.", " Jordan", "egypt", ""],

  ["What is the most famous Islamic event in Palestine?", "It is the incident of Isra and Mi'raj", " Liberation of Palestine", " Nothing mentioned", "Jordan", "1"],

  ["What is the highest mountain in Palestine?", "Mount Algarmouk", " Mount Carmel", " Dora mountain", "Mount Mukaber", "1"],

  ["Where is Mount Gerizim located?", "Jericho", " Ramallah", "Jerusalem", "Nablus", "4"],

  ["Where is Mount Galilee located?", "Hebron", " Ramallah", " Nablus", "Jerusalem", "1"],

  ["What is the economic capital of Palestine?", "Nablus", " Jericho", " Jerusalem", "Hebron", "1"],

  ["In which year did the British Mandate of Palestine set international borders?", "1920", " 1930", " 1950", "1922", "1"],

  ["What is the nature of port activity in Gaza?", "Open to fishing boats and export", " To catch fish for local consumption", " There is only one active international port", "Ports are active on the medium", "2"],

];





var tques = questions.length;

var score = 0;

var quesindex = Math.floor(Math.random() * 21) + 1;

var start = quesindex;

var answers = [];

function reviewRes() {

  reviewData.style.display = '';

  for (var i = 0; i < count - 1; i++) {

    var br = document.createElement("br");

    reviewData.append(i + 1 + ".");

    reviewData.append(questions[start][0]);

    reviewData.append("       Correct- ");

    reviewData.append(questions[start][questions[start][5]]);

    reviewData.append("       Selected- ");

    reviewData.append(questions[start][answers[i]]);

    start++;

    reviewData.appendChild(br);

  }

}

function quit()

{

  quiz.style.display = 'none';

  result.style.display = '';

  review.style.display = '';

  var f = score / tques;

  result.textContent = "SCORE =" + f * 100;

  q.style.display = "none";

}

function give_ques(quesindex, count)

{

  ques.textContent = count + ". " + questions[quesindex][0];

  opt1.textContent = questions[quesindex][1];

  opt2.textContent = questions[quesindex][2];

  opt3.textContent = questions[quesindex][3];

  opt4.textContent = questions[quesindex][4];

  return; // body...

};

give_ques(quesindex, 1);

var count = 1;

function nextques()

{

  var selected_ans = document.querySelector('input[type=radio]:checked');

  if (!selected_ans)

  {
    alert("SELECT AN OPTION");
    return;
  }

  answers.push(selected_ans.value);

  if (selected_ans.value == questions[quesindex][5])

  {
    score = score + 1;
  }

  selected_ans.checked = false;

  quesindex++;

  count++;

  if (count == 10 || quesindex == tques - 1) {

    nextbutton.textContent = "Finish";

  }

  var f = score / tques;

  if (quesindex == tques || count == 11)

  {

    q.style.display = 'none';

    quiz.style.display = 'none';

    result.style.display = '';
    result.textContent = "SCORED:" + (f * 100).toFixed(2) + "%";

    return;

  }

  give_ques(quesindex, count);

标签: javascripthtmlcss

解决方案


推荐阅读