Web development: Fixing Code Main Purpose: Submit Answer button: User must choos
ID: 3920251 • 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.
Problem: You shouldn't be able to click "Submit Answer" again after you submitted an answer already. Gray out the "Submit Answer" button once the answer is submitted.
Screenshot of the issue it caused: you can submit answer multiple times after initial submission, now you can get 19/4 questions correct.
Source code is listed below, please help me to fix these two problems:
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 disabled>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 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><br>";
test.innerHTML += "<button>Submit Answer</button>";
test.innerHTML += "<button disabled>Next Question</button><br><br>";
test.innerHTML += "<span>Please select atleast one option</span>";
}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];
if(questions[pos][4] == 'A'){
chA = "<span>"+chA+"</span>";
chB = "<span>"+chB+"</span>";
chC = "<span>"+chC+"</span>";
}
else if(questions[pos][4]=='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>";
}
}
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>";
alert("You have not completed this question yet.");
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>
Explanation / Answer
<!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 id='submitBtn'>Submit Answer</button>";
test.innerHTML += "<button disabled>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 id='submitBtn'>Submit Answer</button>";
test.innerHTML += "<button>Next Question</button>";
//test.innerHTML = "<p>Correct!</p>";
var btn = get('submitBtn');
btn.disabled=true;
}
else 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><br>";
test.innerHTML += "<button id='submitBtn'>Submit Answer</button>";
test.innerHTML += "<button disabled>Next Question</button><br><br>";
test.innerHTML += "<span>Please select atleast one option</span>";
}
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];
if(questions[pos][4] == 'A'){
chA = "<span>"+chA+"</span>";
chB = "<span>"+chB+"</span>";
chC = "<span>"+chC+"</span>";
}
else if(questions[pos][4]=='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 id='submitBtn'>Submit Answer</button>";
test.innerHTML += "<button>Next Question</button>";
var btn = get('submitBtn');
btn.disabled=true;
}
}
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>";
alert("You have not completed this question yet.");
test.innerHTML += "<span>You have not completed this question yet.</span><br><br>";
test.innerHTML += "<button id='submitBtn'>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>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.