Web development: Fixing Code Main Purpose: Submit Answer button: User must choos

ID: 3920123 • Letter: W

Question

Web development: Fixing Code

Main Purpose:

Submit Answer button: User must choose one of the three radio buttons then finalize their answer by clicking on the Submit Answer button. Once the Submit Answer is clicked, you cannot click on the Submit button again, as the final answer is submitted. After the answer is submitted, color code will tell the user whether they get the answer correct or not. Green means the answer is correct, red means the answer is incorrect.

Next Question button: User must submit the answer first before going into the next question. If the user is yet to press "Next Question", an alert message will pop up, which says "You have not completed this question yet."

--------------

Instruction: Please fix the source code and post the fixed code on Chegg, do NOT screenshot or write it on paper, just copy and paste them onto Chegg. Also, screenshot website for proof.

Source code is listed below, please help me to fix this:

Source file name: test.html

-----------

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Quiz</title>
<style>
div#test{ border:#5AB029 3px solid; padding:10px 40px 40px 40px; background-color:#E5FCE3; width:50%;}
</style>
<script type="text/javascript">
// pos is position of where the user in the test or which question they're up to
var pos = 0, test, test_status, question, choice, choices, chA, chB, chC, correct = 0;
// this is a multidimensional array with 4 inner array elements with 5 elements inside them
// if you don't want answers viewable in the code, then you should use PHP and mySQL database
var questions = [
["What is 36 + 42", "64", "78", "76", "B"],
["What is 7 x 4?", "21", "27", "28", "C"],
["What is 16 / 4?", "4", "6", "3", "A"],
["What is 8 x 12?", "88", "112", "96", "C"]
];
// this get function is short for the getElementById function
function get(x){
return document.getElementById(x);
}
function renderQuestion(){
test = get("test");
if(pos >= questions.length){
test.innerHTML = "<h2>You got "+correct+" of "+questions.length+" questions correct</h2>";
get("test_status").innerHTML = "Test completed";
// resets the variable to allow users to restart the test
pos = 0;
correct = 0;
// stops rest of renderQuestion function running when test is completed
return false;
}
get("test_status").innerHTML = "Question "+(pos+1)+" of "+questions.length;
question = questions[pos][0];
chA = questions[pos][1];
chB = questions[pos][2];
chC = questions[pos][3];
test.innerHTML = "<h3>"+question+"</h3>";
// the += appends to the data we started on the line above
test.innerHTML += "<input type='radio' name='choices' value='A'> "+chA+"<br>";
test.innerHTML += "<input type='radio' name='choices' value='B'> "+chB+"<br>";
test.innerHTML += "<input type='radio' name='choices' value='C'> "+chC+"<br><br>";
test.innerHTML += "<button>Submit Answer</button>";
test.innerHTML += "<button>Next Question</button>";
}
function checkAnswer(){
// use getElementsByName because we have an array which it will loop through
choices = document.getElementsByName("choices");
for(var i=0; i<choices.length; i++){
if(choices[i].checked){
choice = choices[i].value;
}
}
// checks if answer matches the correct choice
if(choice == questions[pos][4]){
//each time there is a correct answer this value increases
correct++;
test.innerHTML = "<p>Correct!</p>";
}
}
function newQuestion(){
// changes position of which character user is on
pos++;
// then the renderQuestion function runs again to go to next question
renderQuestion();
}
window.addEventListener("load", renderQuestion, false);
</script>
</head>
<body>
<h2 id="test_status"></h2>
<div id="test"></div>
</body>
</html>

Question 1 of 4 What is 36 + 42 64 78 ? lchose 78 76 Then, I click Submit Answer Submit Answer Next Question

Explanation / Answer

Hi.. I have modified your code towards above changes. Please check the below code.

test.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Quiz</title>
<style>
div#test{ border:#5AB029 3px solid; padding:10px 40px 40px 40px; background-color:#E5FCE3; width:50%;}
</style>
<script type="text/javascript">
// pos is position of where the user in the test or which question they're up to
var pos = 0, test, test_status, question, choice, choices, chA, chB, chC, correct = 0;
// this is a multidimensional array with 4 inner array elements with 5 elements inside them
// if you don't want answers viewable in the code, then you should use PHP and mySQL database
var questions = [
["What is 36 + 42", "64", "78", "76", "B"],
["What is 7 x 4?", "21", "27", "28", "C"],
["What is 16 / 4?", "4", "6", "3", "A"],
["What is 8 x 12?", "88", "112", "96", "C"]
];
// this get function is short for the getElementById function
function get(x){
return document.getElementById(x);
}
function renderQuestion(){
test = get("test");
if(pos >= questions.length){
test.innerHTML = "<h2>You got "+correct+" of "+questions.length+" questions correct</h2>";
get("test_status").innerHTML = "Test completed";
// resets the variable to allow users to restart the test
pos = 0;
correct = 0;
// stops rest of renderQuestion function running when test is completed
return false;
}
get("test_status").innerHTML = "Question "+(pos+1)+" of "+questions.length;
question = questions[pos][0];
chA = questions[pos][1];
chB = questions[pos][2];
chC = questions[pos][3];
test.innerHTML = "<h3>"+question+"</h3>";
// the += appends to the data we started on the line above
test.innerHTML += "<input type='radio' name='choices' value='A'> "+chA+"<br>";
test.innerHTML += "<input type='radio' name='choices' value='B'> "+chB+"<br>";
test.innerHTML += "<input type='radio' name='choices' value='C'> "+chC+"<br><br>";
test.innerHTML += "<button>Submit Answer</button>";
test.innerHTML += "<button>Next Question</button>";
}
function checkAnswer(){
// use getElementsByName because we have an array which it will loop through
choices = document.getElementsByName("choices");
choice = "";
for(var i=0; i<choices.length; i++){
if(choices[i].checked){
choice = choices[i].value;
}
}
// checks if answer matches the correct choice
if(choice == questions[pos][4]){
//each time there is a correct answer this value increases
correct++;
test = get("test");
if(pos >= questions.length){
test.innerHTML = "<h2>You got "+correct+" of "+questions.length+" questions correct</h2>";
get("test_status").innerHTML = "Test completed";
// resets the variable to allow users to restart the test
pos = 0;
correct = 0;
// stops rest of renderQuestion function running when test is completed
return false;
}
get("test_status").innerHTML = "Question "+(pos+1)+" of "+questions.length;
question = questions[pos][0];
chA = questions[pos][1];
chB = questions[pos][2];
chC = questions[pos][3];

if(choice == 'A'){
chA = "<span>"+chA+"</span>";
chB = "<span>"+chB+"</span>";
chC = "<span>"+chC+"</span>";
}else if(choice=='B'){
chA = "<span>"+chA+"</span>";
chB = "<span>"+chB+"</span>";
chC = "<span>"+chC+"</span>";
}else{
chA = "<span>"+chA+"</span>";
chB = "<span>"+chB+"</span>";
chC = "<span>"+chC+"</span>";
}

test.innerHTML = "<h3>"+question+"</h3>";
// the += appends to the data we started on the line above
if(choice == 'A'){
test.innerHTML += "<input type='radio' name='choices' checked value='A'> "+chA+"<br>";
test.innerHTML += "<input type='radio' name='choices' value='B'> "+chB+"<br>";
test.innerHTML += "<input type='radio' name='choices' value='C'> "+chC+"<br><br>";
}else if(choice=='B'){
test.innerHTML += "<input type='radio' name='choices' value='A'> "+chA+"<br>";
test.innerHTML += "<input type='radio' name='choices' checked value='B'> "+chB+"<br>";
test.innerHTML += "<input type='radio' name='choices' value='C'> "+chC+"<br><br>";
}else{
test.innerHTML += "<input type='radio' name='choices' value='A'> "+chA+"<br>";
test.innerHTML += "<input type='radio' name='choices' value='B'> "+chB+"<br>";
test.innerHTML += "<input type='radio' name='choices' checked value='C'> "+chC+"<br><br>";
}

test.innerHTML += "<button>Submit Answer</button>";
test.innerHTML += "<button>Next Question</button>";
//test.innerHTML = "<p>Correct!</p>";
}else{
test = get("test");
if(pos >= questions.length){
test.innerHTML = "<h2>You got "+correct+" of "+questions.length+" questions correct</h2>";
get("test_status").innerHTML = "Test completed";
// resets the variable to allow users to restart the test
pos = 0;
correct = 0;
// stops rest of renderQuestion function running when test is completed
return false;
}
get("test_status").innerHTML = "Question "+(pos+1)+" of "+questions.length;
question = questions[pos][0];
chA = questions[pos][1];
chB = questions[pos][2];
chC = questions[pos][3];
test.innerHTML = "<h3>"+question+"</h3>";
// the += appends to the data we started on the line above
test.innerHTML += "<input type='radio' name='choices' value='A'> "+chA+"<br>";
test.innerHTML += "<input type='radio' name='choices' value='B'> "+chB+"<br>";
test.innerHTML += "<input type='radio' name='choices' value='C'> "+chC+"<br><br>";
test.innerHTML += "<button>Submit Answer</button>";
test.innerHTML += "<button>Next Question</button><br><br>";
test.innerHTML += "<span>Please select atleast one option</span>";
}
}
function newQuestion(){
// changes position of which character user is on

choices = document.getElementsByName("choices");
choice = "";
for(var i=0; i<choices.length; i++){
if(choices[i].checked){
choice = choices[i].value;
}
}
if(choice==""){
test = get("test");
if(pos >= questions.length){
test.innerHTML = "<h2>You got "+correct+" of "+questions.length+" questions correct</h2>";
get("test_status").innerHTML = "Test completed";
// resets the variable to allow users to restart the test
pos = 0;
correct = 0;
// stops rest of renderQuestion function running when test is completed
return false;
}
get("test_status").innerHTML = "Question "+(pos+1)+" of "+questions.length;
question = questions[pos][0];
chA = questions[pos][1];
chB = questions[pos][2];
chC = questions[pos][3];
test.innerHTML = "<h3>"+question+"</h3>";
// the += appends to the data we started on the line above
test.innerHTML += "<input type='radio' name='choices' value='A'> "+chA+"<br>";
test.innerHTML += "<input type='radio' name='choices' value='B'> "+chB+"<br>";
test.innerHTML += "<input type='radio' name='choices' value='C'> "+chC+"<br>";

test.innerHTML += "<span>You have not completed this question yet.</span><br><br>";

test.innerHTML += "<button>Submit Answer</button>";
test.innerHTML += "<button>Next Question</button><br><br>";

}else{
pos++;
// then the renderQuestion function runs again to go to next question
renderQuestion();
}

}
window.addEventListener("load", renderQuestion, false);
</script>
</head>
<body>
<h2 id="test_status"></h2>
<div id="test"></div>
</body>
</html>

Please check ot and let me know if any querries. Thank you. All the best.

Navigate

Web development field is very dynamic and constantly being changed. The purpose

Web development: Fixing Code Main Purpose: Submit Answer button: User must choos

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

Web development: Fixing Code Main Purpose: Submit Answer button: User must choos

Question

Explanation / Answer

Related Questions

Navigate