Question

In: Computer Science

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

<!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>"];

}
// 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 repeat001() {
location.reload();
}
</script>
</body>
</html>

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

venereology answered 10 months 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;...

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)) }

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

Leave code as is ALL I NEED IS TO MAKE THE LIST INTO ASCENDING ORDER FROM...

Leave code as is ALL I NEED IS TO MAKE THE LIST INTO ASCENDING ORDER FROM A TO Z OF ARTISTS NAMES YOU CAN USE THIS AS REFERENCE SPOTIFY LIST TOP 50 AS REFERENCE FOR CSV FILE https://spotifycharts.com/viral/ import java.io.*; public class Spotify { public static void main(String[]args) { // Read csv Spotify file located on my desktop // Download csv file, save on desktop, and add file location in csvFile = " " String csvFile = "CSVFILE LOCATION OF...

I need to add this checkpoint to an existing code that i have in python Checkpoint...

I need to add this checkpoint to an existing code that i have in python Checkpoint 1: Once you have created and tested the Bank Account Class create subclasses to the BankAccount class. There should be two subclasses, CheckingAccount and SavingsAccount. You should add interest_rate to the parent BankAccount class. To the CheckingAccount add variables called per_check_fee default to false and allow_overdraft default to True. To SavingsAccount add the variable transactions_per_month, default it to 5. Create instances of CheckingAccount and...

Subjects