Question

In: Computer Science

Change or edit the following code so that it has 20 questions, there's an image for...

Change or edit the following code so that it has 20 questions, there's an image for each question and once the user enters an incorrect answer, there's a button that the user can click on that displays the correct answer. The questions and answer choices should also be random each time you start the quiz.

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>World Cup Quiz</title>
</head>
<body>
<style>
#flashcards001 {
background-color: white;
border: 4px solid black;
width: 400px;
height: 400px;
border-radius: 10px;
padding: 10px;
margin: 10px;
}

.buttons001 {
background-color: blue;
color: white;
padding: 5px;
margin: 10px;
border-radius: 10px;
width: 100px;
}

.buttons002 {
background-color: lightblue;
color: black;
padding: auto;
margin: auto;
border-radius: auto;
width:auto;
}

#text001 {
text-align: center;
}

#text002 {
text-align: left;
}

#green001 {
color: green;
}

#red001 {
color: red;
}

</style>
<div id="frame001">
<div id="text001">
<h2>World Cup Quiz</h2>
Question: <text id="number001">0</text><br />
Score: <text id="score001">0</text>
<hr />
<div id="message001">Click Begin to start</div><br />
</div>
<div id="text002">
<div id="question001"></div>
<div id="option001"></div>
<div id="option002"></div>
<div id="option003"></div>
<div id="option004"></div>
<div id="answer001"></div>
<div id="text001">
<div id="disappear001"><button class="buttons001" onclick="begin001()">Begin</button></div>
</div>
<div id="next001"></div>
</div>
</div>

<script>

var q = [" What team is this? <br /><br />", "What team is this?<br /><br />", "What team is this?<br /><br />", "What team is this?<br /><br />", "What team is this?<br /><br />", "What team is this?<br /><br />", "What team is this?<br /><br />", "What team is this?<br /><br />", "What team is this?<br /><br />", "What team is this?<br /><br />"];
//Below code no need to call different function on onclick(), call same function instead
var a1 = ["<button class=buttons002 onclick=q1c()>England</button>",
"<button class=buttons002 onclick=q1c()>Croatia</button>",
"<button class=buttons002 onclick=q1c()>Spain</button>",
"<button class=buttons002 onclick=q1c()>Netherlands</button>",
"<button class=buttons002 onclick=q1c()>Chile</button>",
"<button class=buttons002 onclick=q1c()>Autralia</button>",
"<button class=buttons002 onclick=q1c()>Cameroon</button>",
"<button class=buttons002 onclick=q1c()>Mexico</button>",
"<button class=buttons002 onclick=q1c()>Colombia</button>",
"<button class=buttons002 onclick=q1c()>Greece</button>"];

var a2 = ["<button class=buttons002 onclick=q1i()>Japan</button>",
"<button class=buttons002 onclick=q1i()>Greece</button>",
"<button class=buttons002 onclick=q1i()>Uruguay</button>",
"<button class=buttons002 onclick=q1i()>Costa Rica</button>",
"<button class=buttons002 onclick=q1i()>Italy</button>",
"<button class=buttons002 onclick=q1i()>Switzerland</button>",
"<button class=buttons002 onclick=q1i()>Ecuador</button>",
"<button class=buttons002 onclick=q1i()>France</button>",
"<button class=buttons002 onclick=q1i()>Honduras</button>",
"<button class=buttons002 onclick=q1i()>Brazil</button>"];

var a3 = ["<button class=buttons002 onclick=q1i()>Argentina</button>",
"<button class=buttons002 onclick=q1i()>Bosnia and Herzegovina</button>",
"<button class=buttons002 onclick=q1i()>Iran</button>",
"<button class=buttons002 onclick=q1i()>Nigeria</button>",
"<button class=buttons002 onclick=q1i()>Germany</button>",
"<button class=buttons002 onclick=q1i()>Ghana</button>",
"<button class=buttons002 onclick=q1i()>USA</button>",
"<button class=buttons002 onclick=q1i()>Belgium</button>",
"<button class=buttons002 onclick=q1i()>Algeria</button>",
"<button class=buttons002 onclick=q1i()>Russia</button>"];

var a4 = ["<button class=buttons002 onclick=q1i()>Kora Republic</button>",
"<button class=buttons002 onclick=q1i()>Poland</button>",
"<button class=buttons002 onclick=q1i()>Egypt</button>",
"<button class=buttons002 onclick=q1i()>Iceland</button>",
"<button class=buttons002 onclick=q1i()>Serbia</button>",
"<button class=buttons002 onclick=q1i()>Portugal</button>",
"<button class=buttons002 onclick=q1i()>Panama</button>",
"<button class=buttons002 onclick=q1i()>Morocco</button>",
"<button class=buttons002 onclick=q1i()>Tunisia</button>",
"<button class=buttons002 onclick=q1i()>Peru</button>"];

var c = ["Correct", "Correct", "Correct", "Correct", "Correct", "Correct", "Correct", "Correct", "Correct", "Correct"];
var i = ["Incorrect", "Incorrect", "Incorrect", "Incorrect", "Incorrect", "Incorrect", "Incorrect", "Incorrect", "Incorrect", "Incorrect"];

}
// Pass randomNumber variable in place of index 0
function q1c() {
answer001.innerHTML = "<div id=green001>" + c[randomNumber] + "</div>";
option001.innerHTML = "";
option002.innerHTML = "";
option003.innerHTML = "";
option004.innerHTML = "";
next001.innerHTML = "<button class=buttons001 onclick=begin001()>Next</button>";
score001.innerHTML = s++;
}

// Pass randomNumber variable in place of index 0
function q1i() {
answer001.innerHTML = "<div id=red001>" + i[randomNumber] + "</div>";
option001.innerHTML = "";
option002.innerHTML = "";
option003.innerHTML = "";
option004.innerHTML = "";
next001.innerHTML = "<button class=buttons001 onclick=begin001()>Next</button>";
}

function end001() {
message001.innerHTML = "End of Quiz.";
question001.innerHTML = "";
option001.innerHTML = "";
option002.innerHTML = "";
option003.innerHTML = "";
option004.innerHTML = "";
next001.innerHTML = "<div id=text001>" + "<button class=buttons001 onclick=repeat001()>Repeat</button>" + "</div>";
answer001.innerHTML = "";
}

function repeat001() {
location.reload();
}
</script>
</body>
</html>

Solutions

Expert Solution

I have updated the code so now it will take 20 questions to end the quiz as you can see in the above screenshot. Questions will be asked randomly along with options which are jumbled among themselves like when I got the code to edit only option (a) was correct for every question but now it will generate random option for the correct answer.

If you selected the wrong answer you can view the correct answer by clicking on the answer button.

And the answer will be shown and you can move to the next question

If you have selected the correct option only score will get increased.

Now Code for this is given below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>World Cup Quiz</title>
    <style>
      #flashcards001 {
        background-color: white;
        border: 4px solid black;
        width: 400px;
        height: 400px;
        border-radius: 10px;
        padding: 10px;
        margin: 10px;
      }

      .buttons001 {
        background-color: blue;
        color: white;
        padding: 5px;
        margin: 10px;
        border-radius: 10px;
        width: 100px;
      }

      .buttons002 {
        background-color: lightblue;
        color: black;
        padding: auto;
        margin: auto;
        border-radius: auto;
        width: auto;
      }

      #text001 {
        text-align: center;
      }

      #text002 {
        text-align: left;
      }

      #green001 {
        color: green;
      }

      #red001 {
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="frame001">
      <div id="text001">
        <h2>World Cup Quiz</h2>
        Question: <text id="number001">0</text><br />
        Score: <text id="score001">0</text>
        <hr />
        <div id="message001">Click Begin to start</div>
        <br />
      </div>
      <div id="text002">
        <div id="question001"></div>
        <div id="option001"></div>
        <div id="option002"></div>
        <div id="option003"></div>
        <div id="option004"></div>
        <div id="answer001"></div>
        <div id="text001">
          <div id="disappear001">
            <button class="buttons001" onclick="begin001()">Begin</button>
          </div>
        </div>
        <div id="next001"></div>
      </div>
    </div>

    <script>
      var q = [
        "What team is this 1?<br /><br />",
        "What team is this 2?<br /><br />",
        "What team is this 3?<br /><br />",
        "What team is this 4?<br /><br />",
        "What team is this 5?<br /><br />",
        "What team is this 6?<br /><br />",
        "What team is this 7?<br /><br />",
        "What team is this 8?<br /><br />",
        "What team is this 9?<br /><br />",
        "What team is this 10?<br /><br />",
        "What team is this 11?<br /><br />",
        "What team is this 12?<br /><br />",
        "What team is this 13?<br /><br />",
        "What team is this 14?<br /><br />",
        "What team is this 15?<br /><br />",
        "What team is this 16?<br /><br />",
        "What team is this 17?<br /><br />",
        "What team is this 18?<br /><br />",
        "What team is this 19?<br /><br />",
        "What team is this 20?<br /><br />",
      ];
      //Below code no need to call different function on onclick(), call same function instead
      var corAns = [
        "England",
        "Croatia",
        "Spain",
        "Netherlands",
        "Chile",
        "Autralia",
        "Cameroon",
        "Mexico",
        "Colombia",
        "Greece",
        "England",
        "Croatia",
        "Spain",
        "Netherlands",
        "Chile",
        "Autralia",
        "Cameroon",
        "Mexico",
        "Colombia",
        "Greece",
      ];

      var a1 = [
        "<button class=buttons002 onclick=q1c()>England</button>",
        "<button class=buttons002 onclick=q1c()>Croatia</button>",
        "<button class=buttons002 onclick=q1c()>Spain</button>",
        "<button class=buttons002 onclick=q1c()>Netherlands</button>",
        "<button class=buttons002 onclick=q1c()>Chile</button>",
        "<button class=buttons002 onclick=q1c()>Autralia</button>",
        "<button class=buttons002 onclick=q1c()>Cameroon</button>",
        "<button class=buttons002 onclick=q1c()>Mexico</button>",
        "<button class=buttons002 onclick=q1c()>Colombia</button>",
        "<button class=buttons002 onclick=q1c()>Greece</button>",
        "<button class=buttons002 onclick=q1c()>England</button>",
        "<button class=buttons002 onclick=q1c()>Croatia</button>",
        "<button class=buttons002 onclick=q1c()>Spain</button>",
        "<button class=buttons002 onclick=q1c()>Netherlands</button>",
        "<button class=buttons002 onclick=q1c()>Chile</button>",
        "<button class=buttons002 onclick=q1c()>Autralia</button>",
        "<button class=buttons002 onclick=q1c()>Cameroon</button>",
        "<button class=buttons002 onclick=q1c()>Mexico</button>",
        "<button class=buttons002 onclick=q1c()>Colombia</button>",
        "<button class=buttons002 onclick=q1c()>Greece</button>",
      ];

      var a2 = [
        "<button class=buttons002 onclick=q1i()>Japan</button>",
        "<button class=buttons002 onclick=q1i()>Greece</button>",
        "<button class=buttons002 onclick=q1i()>Uruguay</button>",
        "<button class=buttons002 onclick=q1i()>Costa Rica</button>",
        "<button class=buttons002 onclick=q1i()>Italy</button>",
        "<button class=buttons002 onclick=q1i()>Switzerland</button>",
        "<button class=buttons002 onclick=q1i()>Ecuador</button>",
        "<button class=buttons002 onclick=q1i()>France</button>",
        "<button class=buttons002 onclick=q1i()>Honduras</button>",
        "<button class=buttons002 onclick=q1i()>Brazil</button>",
        "<button class=buttons002 onclick=q1i()>Japan</button>",
        "<button class=buttons002 onclick=q1i()>Greece</button>",
        "<button class=buttons002 onclick=q1i()>Uruguay</button>",
        "<button class=buttons002 onclick=q1i()>Costa Rica</button>",
        "<button class=buttons002 onclick=q1i()>Italy</button>",
        "<button class=buttons002 onclick=q1i()>Switzerland</button>",
        "<button class=buttons002 onclick=q1i()>Ecuador</button>",
        "<button class=buttons002 onclick=q1i()>France</button>",
        "<button class=buttons002 onclick=q1i()>Honduras</button>",
        "<button class=buttons002 onclick=q1i()>Brazil</button>",
      ];

      var a3 = [
        "<button class=buttons002 onclick=q1i()>Argentina</button>",
        "<button class=buttons002 onclick=q1i()>Bosnia and Herzegovina</button>",
        "<button class=buttons002 onclick=q1i()>Iran</button>",
        "<button class=buttons002 onclick=q1i()>Nigeria</button>",
        "<button class=buttons002 onclick=q1i()>Germany</button>",
        "<button class=buttons002 onclick=q1i()>Ghana</button>",
        "<button class=buttons002 onclick=q1i()>USA</button>",
        "<button class=buttons002 onclick=q1i()>Belgium</button>",
        "<button class=buttons002 onclick=q1i()>Algeria</button>",
        "<button class=buttons002 onclick=q1i()>Russia</button>",
        "<button class=buttons002 onclick=q1i()>Argentina</button>",
        "<button class=buttons002 onclick=q1i()>Bosnia and Herzegovina</button>",
        "<button class=buttons002 onclick=q1i()>Iran</button>",
        "<button class=buttons002 onclick=q1i()>Nigeria</button>",
        "<button class=buttons002 onclick=q1i()>Germany</button>",
        "<button class=buttons002 onclick=q1i()>Ghana</button>",
        "<button class=buttons002 onclick=q1i()>USA</button>",
        "<button class=buttons002 onclick=q1i()>Belgium</button>",
        "<button class=buttons002 onclick=q1i()>Algeria</button>",
        "<button class=buttons002 onclick=q1i()>Russia</button>",
      ];

      var a4 = [
        "<button class=buttons002 onclick=q1i()>Kora Republic</button>",
        "<button class=buttons002 onclick=q1i()>Poland</button>",
        "<button class=buttons002 onclick=q1i()>Egypt</button>",
        "<button class=buttons002 onclick=q1i()>Iceland</button>",
        "<button class=buttons002 onclick=q1i()>Serbia</button>",
        "<button class=buttons002 onclick=q1i()>Portugal</button>",
        "<button class=buttons002 onclick=q1i()>Panama</button>",
        "<button class=buttons002 onclick=q1i()>Morocco</button>",
        "<button class=buttons002 onclick=q1i()>Tunisia</button>",
        "<button class=buttons002 onclick=q1i()>Peru</button>",
        "<button class=buttons002 onclick=q1i()>Kora Republic</button>",
        "<button class=buttons002 onclick=q1i()>Poland</button>",
        "<button class=buttons002 onclick=q1i()>Egypt</button>",
        "<button class=buttons002 onclick=q1i()>Iceland</button>",
        "<button class=buttons002 onclick=q1i()>Serbia</button>",
        "<button class=buttons002 onclick=q1i()>Portugal</button>",
        "<button class=buttons002 onclick=q1i()>Panama</button>",
        "<button class=buttons002 onclick=q1i()>Morocco</button>",
        "<button class=buttons002 onclick=q1i()>Tunisia</button>",
        "<button class=buttons002 onclick=q1i()>Peru</button>",
      ];

      var c = [
        "Correct",
        "Correct",
        "Correct",
        "Correct",
        "Correct",
        "Correct",
        "Correct",
        "Correct",
        "Correct",
        "Correct",
        "Correct",
        "Correct",
        "Correct",
        "Correct",
        "Correct",
        "Correct",
        "Correct",
        "Correct",
        "Correct",
        "Correct",
      ];
      var i = [
        "Incorrect",
        "Incorrect",
        "Incorrect",
        "Incorrect",
        "Incorrect",
        "Incorrect",
        "Incorrect",
        "Incorrect",
        "Incorrect",
        "Incorrect",
        "Incorrect",
        "Incorrect",
        "Incorrect",
        "Incorrect",
        "Incorrect",
        "Incorrect",
        "Incorrect",
        "Incorrect",
        "Incorrect",
        "Incorrect",
      ];

      var n = 0;
      n++;
      var s = 0;
      s++;
      var randomNumber = 0; // New variable defined
      var quesFilled = []; // array for already answer ques order no.
      //changes in below funtion
      function begin001() {
        disappear001.innerHTML = "";
        message001.innerHTML = "";
        randomNumber = Math.floor(Math.random() * 19); //Random number from 0 to 9
        // Check if a randomnumber exists in the quesFilled array
        function shuffle(arra1) {
          var ctr = arra1.length,
            temp,
            index;
          // While there are elements in the array
          while (ctr > 0) {
            // Pick a random index
            index = Math.floor(Math.random() * ctr);
            // Decrease ctr by 1
            ctr--;
            // And swap the last element with it
            temp = arra1[ctr];
            arra1[ctr] = arra1[index];
            arra1[index] = temp;
          }
          return arra1;
        }
        var myArray = [
          a1[randomNumber],
          a2[randomNumber],
          a3[randomNumber],
          a4[randomNumber],
        ];
        shuffle(myArray);

        if (n > 20) {
          end001();
        } else {
          question001.innerHTML = q[randomNumber];
          option001.innerHTML = myArray[0];
          option002.innerHTML = myArray[1];
          option003.innerHTML = myArray[2];
          option004.innerHTML = myArray[3];
          number001.innerHTML = n++;
          quesFilled.push(randomNumber); // push this to quesFilled array
          //below code to remove existing message from screen after click on next
          var correctmsg = document.getElementById("green001");
          var incorrectmsg = document.getElementById("red001");
          if (typeof correctmsg != "undefined" && correctmsg != null) {
            document.getElementById("green001").innerHTML = "";
          }
          if (typeof incorrectmsg != "undefined" && incorrectmsg != null) {
            document.getElementById("red001").innerHTML = "";
          }
        }
      }
      // Pass randomNumber variable in place of index 0
      function q1c() {
        answer001.innerHTML = "<div id=green001>" + c[randomNumber] + "</div>";
        option001.innerHTML = "";
        option002.innerHTML = "";
        option003.innerHTML = "";
        option004.innerHTML = "";
        next001.innerHTML =
          "<button class=buttons001 onclick=begin001()>Next</button>";
        score001.innerHTML = s++;
      }
      function Answer001() {
        var ans = corAns[randomNumber];
        answer001.innerHTML = "<div id=green001>" + ans + "</div>";
        option001.innerHTML = "";
        option002.innerHTML = "";
        option003.innerHTML = "";
        option004.innerHTML = "";
        next001.innerHTML =
          "<button class=buttons001 onclick=begin001()>Next</button>";
      }
      // Pass randomNumber variable in place of index 0
      function q1i() {
        answer001.innerHTML =
          "<div id=red001>" +
          i[randomNumber] +
          "<button class=buttons001 onclick=Answer001()>Answer</button>" +
          "</div>";
        option001.innerHTML = "";
        option002.innerHTML = "";
        option003.innerHTML = "";
        option004.innerHTML = "";
        next001.innerHTML =
          "<button class=buttons001 onclick=begin001()>Next</button>";
      }

      function end001() {
        message001.innerHTML = "End of Quiz.";
        question001.innerHTML = "";
        option001.innerHTML = "";
        option002.innerHTML = "";
        option003.innerHTML = "";
        option004.innerHTML = "";
        next001.innerHTML =
          "<div id=text001>" +
          "<button class=buttons001 onclick=repeat001()>Repeat</button>" +
          "</div>";
        answer001.innerHTML = "";
      }

      function repeat001() {
        location.reload();
      }
    </script>
  </body>
</html>

You can modify the above code as per your questions and answer requirement.

venereology answered 1 month ago

Next > < Previous

Related Solutions

Change the following code to where it adds an image(leave the image blank, I can add...

Change the following code to where it adds an image(leave the image blank, I can add the image) to the question and to generate the questions and answers in a different order each time you begin the quiz. <!DOCTYPE html> <html lang="en" xmlns=""> <head> <meta charset="utf-8" /> <title>World Cup Quiz</title> </head> <body> <style> #flashcards001 { background-color: white; border: 4px solid black; width: 400px; height: 400px; border-radius: 10px; padding: 10px; margin: 10px; } .buttons001 { background-color: blue; color: white; padding: 5px;...

Change the following code to where it adds an image(leave the image blank, I can add...

Change the following code to where it adds an image(leave the image blank, I can add the image) to the question and to generate the questions and answers in a different order each time you begin the quiz. I have 10 questions but due to chegg not allowing me to post all of my code I shorted it to one question. <!DOCTYPE html> <html lang="en" xmlns=""> <head> <meta charset="utf-8" /> <title>World Cup Quiz</title> </head> <body> <style> #flashcards001 { background-color: white;...

using C++. edit this code down below so that it will implement stack with linked list...

using C++. edit this code down below so that it will implement stack with linked list contains a default constructor, a copy constructor, and a destructor. #include <iostream> #include <vector> #include <string> #include <stack> #include <limits> using namespace std; class Stack { public: bool isEmpty(); int top(); int pop(); void push(int); void printList(); private: vector<int> elements; }; bool Stack::isEmpty() { return elements.empty(); } int Stack::top() { if(isEmpty()) { throw runtime_error("error: stack is empty"); } return elements.back(); } int Stack::pop() {...

Im asked to edit the C++ code given to me so that the user can enter...

Im asked to edit the C++ code given to me so that the user can enter as many courses as they would like. I've already built the array to house the courses, but Im a tiny bit stuck on writing the user input to the array every time a new line Is made. Code: //CSC 211 Spring 2019 //Program Description: // // Originally From: // CSC 211 Spring 2018 // Dr. Sturm // This program... // #include<iostream> #include<string> #include<fstream> using...

Run the following code and answer the following questions: (a) How do accuracy change with changing...

Run the following code and answer the following questions: (a) How do accuracy change with changing the tree maximum depth? [Your answer] (b) What are the ways to reduce overfitting in a decision tree? [Your answer] from sklearn import datasets import numpy as np from sklearn.model_selection import train_test_split from sklearn.tree import plot_tree iris = datasets.load_iris() X = iris.data[:, [2, 3]] y = iris.target X_train, X_test, y_train, y_test = train_test_split( X, y, test_size=0.3, random_state=1, stratify=y) tree = DecisionTreeClassifier(criterion='entropy', max_depth=10, random_state=1) tree.fit(X_train,...

can someone change this code so that timestandard can be calculated at the end of the...

can someone change this code so that timestandard can be calculated at the end of the code using the inputs n,RF,PFD, and the measured cycles, instead of being called from the beginning of the code using namespace std; float timestandard(float time, float rf, float pfd) { return((time / 100) * rf * (1 + pfd)); /* calculating the time standard using the given formula*/ } int main() { int n, rf, pfd, x; /* inputs are taken*/ cout << "****...

JAVA- How do I edit the following code as minimally as possible to add this method...

JAVA- How do I edit the following code as minimally as possible to add this method for calculating BMI? BMI Method: public static double calculateBMI(int height, int weight) { double BMI = (((double) weight) * 0.453592d) / ((((double) height) * 0.0254) * (((double) height) * 0.0254)); Format f = new DecimalFormat("##.######"); return (f.format(BMI)); } Code: import java.text.DecimalFormat; import java.util.Scanner; public class test2 { public static void main(String[] args) { DecimalFormat f = new DecimalFormat("##.0"); Scanner reader = new Scanner(System.in); System.out.printf("%10s...

This is all the questions, There are no MAC code include, so just need a general...

This is all the questions, There are no MAC code include, so just need a general answer but need to be close to the questions. Thank you and the unit this question come from name "Computer Networks" Question 12 (10 points) Consider Message Authentication Codes: a) Identify whether an symmetric / asymmetric cryptosystem is used and explain how it is applied to generate and validate the MAC. b) Describe any additional information is needed by the receiver to validate the...

Using c# rewrite/edit the following program so that it runs the simulation 10,000 times (play the...

Using c# rewrite/edit the following program so that it runs the simulation 10,000 times (play the games 10,000 times) and count the number wins. Then calculate the winning probability by using the formula: the expected winning probability = the number of wins / 10,000 using System; class lottery { static void Main() { int n, random, choice = 1; Random randnum = new Random(); while (choice == 1) { Console.Write("\nEnter a integer from 1 to 5:"); n =...

Managing Organizational Change Please answer the below questions: Is change management obsolete? If so, why do...

Managing Organizational Change Please answer the below questions: Is change management obsolete? If so, why do you say so? If you think it is still relevant, why do you think so? Select one of the arguments for why change management programs don't create change and offer suggestions to overcome the obstacle.

Subjects