Question

In: Computer Science

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;
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;
}
       #img{
           alight: centerl
</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 />"];
var a1 = ["<button class=buttons002 onclick=q1c()>England</button>",
"<button class=buttons002 onclick=q2c()>Croatia</button>",
"<button class=buttons002 onclick=q3c()>Spain</button>",
"<button class=buttons002 onclick=q4i()>Netherlands</button>",
"<button class=buttons002 onclick=q5i()>Chile</button>",
"<button class=buttons002 onclick=q6i()>Autralia</button>",
"<button class=buttons002 onclick=q7i()>Cameroon</button>",
"<button class=buttons002 onclick=q8i()>Mexico</button>",
"<button class=buttons002 onclick=q9i()>Colombia</button>",
"<button class=buttons002 onclick=q10i()>Greece</button>"];

var a2 = ["<button class=buttons002 onclick=q1i()>Japan</button>",
"<button class=buttons002 onclick=q2i()>Greece</button>",
"<button class=buttons002 onclick=q3i()>Uruguay</button>",
"<button class=buttons002 onclick=q4c()>Costa Rica</button>",
"<button class=buttons002 onclick=q5c()>Italy</button>",
"<button class=buttons002 onclick=q6c()>Switzerland</button>",
"<button class=buttons002 onclick=q7i()>Ecuador</button>",
"<button class=buttons002 onclick=q8i()>France</button>",
"<button class=buttons002 onclick=q9i()>Honduras</button>",
"<button class=buttons002 onclick=q10i()>Brazil</button>"];

var a3 = ["<button class=buttons002 onclick=q1i()>Argentina</button>",
"<button class=buttons002 onclick=q2i()>Bosnia and Herzegovina</button>",
"<button class=buttons002 onclick=q3i()>Iran</button>",
"<button class=buttons002 onclick=q4i()>Nigeria</button>",
"<button class=buttons002 onclick=q5i()>Germany</button>",
"<button class=buttons002 onclick=q6i()>Ghana</button>",
"<button class=buttons002 onclick=q7c()>USA</button>",
"<button class=buttons002 onclick=q8c()>Belgium</button>",
"<button class=buttons002 onclick=q9i()>Algeria</button>",
"<button class=buttons002 onclick=q10i()>Russia</button>"];

var a4 = ["<button class=buttons002 onclick=q1i()>Kora Republic</button>",
"<button class=buttons002 onclick=q2i()>Poland</button>",
"<button class=buttons002 onclick=q3i()>Egypt</button>",
"<button class=buttons002 onclick=q4i()>Iceland</button>",
"<button class=buttons002 onclick=q5i()>Serbia</button>",
"<button class=buttons002 onclick=q6i()>Portugal</button>",
"<button class=buttons002 onclick=q7i()>Panama</button>",
"<button class=buttons002 onclick=q8i()>Morocco</button>",
"<button class=buttons002 onclick=q9c()>Tunisia</button>",
"<button class=buttons002 onclick=q10c()>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"];

var n = 0;
n++;
var s = 0;
s++;

function begin001() {
disappear001.innerHTML = "";
message001.innerHTML = "";
question001.innerHTML = q[0];
option001.innerHTML = a1[0];
option002.innerHTML = a2[0];
option003.innerHTML = a3[0];
option004.innerHTML = a4[0];
number001.innerHTML = n++;
}

function q1c() {
answer001.innerHTML = "<div id=green001>" + c[0] + "</div>";
option001.innerHTML = "";
option002.innerHTML = "";
option003.innerHTML = "";
option004.innerHTML = "";
next001.innerHTML = "<button class=buttons001 onclick=new002()>Next</button>";
score001.innerHTML = s++;
}

function q1i() {
answer001.innerHTML = "<div id=red001>" + i[0] + "</div>";
option001.innerHTML = "";
option002.innerHTML = "";
option003.innerHTML = "";
option004.innerHTML = "";
next001.innerHTML = "<button class=buttons001 onclick=new002()>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

Solution:- To generate the questions and answers in a different order each time you begin the quiz, can be used JavaScript random() function as shown below in modified working code,

<!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;
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;
}
#img{
alight: centerl
</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 = ["Q.1 What team is this? <br /><br/><img src='thought.jpg'>", "Q.2 What team is this?<br/><br /><img src='thought.jpg'>", "Q.3 What team is this?<br/><br /><img src='thought.jpg'>", "Q.4 What team is this?<br /><br/><img src='thought.jpg'>", "Q.5 What team is this?<br/><br /><img src='thought.jpg'>", "Q.6 What team is this?<br /><br/><img src='thought.jpg'>", "Q.7 What team is this?<br /><br/><img src='thought.jpg'>", "Q.8 What team is this?<br /><br/><img src='thought.jpg'>", "Q.9 What team is this?<br/><br/><img src='thought.jpg'>", "Q.10 What team is this?<br /><br/><img src='thought.jpg'>"];
//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"];

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() * 10); //Random number from 0 to 9
// Check if a randomnumber exists in the quesFilled array
if(quesFilled.indexOf(randomNumber) !== -1){
} else {
question001.innerHTML = q[randomNumber];
option001.innerHTML = a1[randomNumber];
option002.innerHTML = a2[randomNumber];
option003.innerHTML = a3[randomNumber];
option004.innerHTML = a4[randomNumber];
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++;
}

// 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>

============================Code END=============================

venereology answered 1 year 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. 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;...
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;...
This is a code for a bouncing ball on an 8X8 LED. How can i change...
This is a code for a bouncing ball on an 8X8 LED. How can i change the code to make it a ping pong game against AI by adding 1 potentionmeter to control it? #include <TimerOne.h>//this is a library that uses timer 1 of the arduino to trigger interrupts in certain time intervals //This defines a matrix defining a smiley face for the 8x8 LED matrix display #define BALL { \ {1, 0, 0, 0, 0, 0, 0, 0}, \...
Solve the following problem with Excel Solver: (Leave no cells blank - be certain to enter...
Solve the following problem with Excel Solver: (Leave no cells blank - be certain to enter "0" wherever required. Do not round intermediate calculations. Round your answers to 2 decimal places.) Maximize Z = 8X + 17Y. 8X + 14Y ≤ 143          Resource A 1X + 2Y ≤ 75          Resource B 3Y ≤ 12          Resource C   Decision for X      Decision for Y      Total profit $                  Resources Used   Resource A        Resource B        Resource C...
What would I add to the following code to detect the pitch of the audio signal?...
What would I add to the following code to detect the pitch of the audio signal? (use cepstral method) clear all; close all; clc; info = audiodevinfo; info.input(1) info.input(2) pause(3); % delete it if necessary clc; fs = 44.1e3; noBits = 16; noChannels = 1; recordObject = audiorecorder(fs,noBits,noChannels); disp('Start speaking...'); record(recordObject); pause(3); stop(recordObject); disp('End of Recording.'); x = getaudiodata(recordObject); %takin in as aperiodic signal noSamples = length(x); %length of vector x "max(size(x)) time = [1:noSamples]/fs; %time ticks %DFT: X[k]= (sigma...
code in python I want to make a function that adds all the multipliers together. The...
code in python I want to make a function that adds all the multipliers together. The code is posted below and please look at wanted output section to see what I want the code to output. The last line of the code is the only addition I need. Thanks. Code: initial=int(input("Initial value : "))       #taking inputs multiplier=float(input("Multiplier : ")) compound=int(input("No of compounds : ")) print("Your values are:") mult=initial                         #initalizing to find answer for i in range(0,compound):         #multiplying by multiplier    ...
I need the code in python where I can encrypt and decrypt any plaintext. For example,...
I need the code in python where I can encrypt and decrypt any plaintext. For example, the plaintext "hello" from each of these Block Cipher modes of Operation. Electronic Code Block Mode (ECB) Cipher block Mode (CBC) Cipher Feedback Mode (CFB) Output feedback Mode (OFB) Counter Mode (CTR) Here is an example, Affine cipher expressed in C. Encryption: char cipher(unsigned char block, char key) { return (key+11*block) } Decryption: char invcipher(unsigned char block, char key) { return (163*(block-key+256)) }
Change the format of the given code to two columns, add a sub title and an...
Change the format of the given code to two columns, add a sub title and an author name and increase the color and thickness of the column-rule. Add an image and float the text around the image. <!DOCTYPE html> <!-- Fig. 5.17: multicolumns.html --> <!-- Multicolumn text in CSS3. --> <html> <head> <meta charset = "utf-8"› <title>Multicolumns</title> <style type = "text/css"› p { margin:0.9em Oem; } .multicolumns { /* setting the number of columns to 3 */ -webkit-column-count: 3; -moz-column-count:...
Can you add more comments explaining what this code does? i commented what I know so...
Can you add more comments explaining what this code does? i commented what I know so far #include<stdio.h> #include<pthread.h> #include<semaphore.h> #include<unistd.h> sem_t mutex,writeblock; int data = 0,rcount = 0; int sleepLength = 2; // used to represent work void *reader(void *arg) { int f; f = ((int)arg); sem_wait(&mutex); // decrement by 1 if rcount = rcount + 1; if(rcount==1) sem_wait(&writeblock); sem_post(&mutex); printf("Data read by the reader%d is %d\n",f,data); //shows current reader and data sleep(sleepLength); // 1 second of "work" is...
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...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT