Javascript Quiz with HTML + CSS

Question

****This code is now working. Thankyou for your input everyone.

The initial problem was that the code would run on page load, and then the second problem was that it refreshed the page on submit

After some input from a few individuals we were able to debug it together and I learned some new things.****

function check(){
    let correctAns1 = 'carname = "volvo"';
    let input = document.getElementById("q1").value;
    
    let score=0;
    

if(input.toLowerCase() == correctAns1) {
    score++;
    alert("That is correct")
    alert("You have a total of " + score + " points")
}else{
    alert("Incorrect")
    };
};



document.getElementById("testForm").addEventListener("submit", function(e){
    e.preventDefault();
    });

 <div id="testForm">
    <form onsubmit="check(); return false"><br><br>
        <h2>Task 1</h2> 

        <p>Create a variable called carname and give it a value of Volvo</p>
        <input type="text" id="q1" value><br>

        <input type="submit" value="Submit">
    </form>

</div>

`code input == correctAns1` it's equal `"string" === "carname = 'Volvo'"` instead you need `let correctAns1= 'Volvo';` — Simone Rossaini, Jan 27 '22 at 13:06
*"I can't seem to link it to the front end"* - What do you mean? Are you just asking how to reference a JavaScript file from an HTML file? Are you trying to put the JavaScript code directly into the HTML file? Are you familiar with the ` — David, Jan 27 '22 at 13:08
@SimoneRossaini I think op is trying to test users' python knowledge. So he wants them to put into the input how would they declare variable with value of "Volvo" in python. — Esszed, Jan 27 '22 at 13:10
I think you are troubled by that empty screen after submission, if yes, then the reason for that is "On form submit the page gets refreshed/redirected" to stop that use `onsubmit = "oncheck(); return false"` or handle it with js using `event.preventDefault`. — Shivam Sharma, Jan 27 '22 at 13:15
So I am attempting to test python ability by getting them to type python into a javascript text box (then on submit it tells them if they're right or wrong and adds 1 to their overall score) The problem is, I either always get an "Incorrect" or the page just refreshes (I tried the onsubmit return false thing Shivam thankyou, it didn't seem to solve the issue — Keira J, Jan 27 '22 at 13:31
@KeiraJarvis It's working for me, check my answer below. Your overall question is very big, like an assignment. You have to achieve that by yourself, we can only help in the issues being faced and guide to the solution. — Shivam Sharma, Jan 27 '22 at 13:38
@KeiraJarvis: Well, currently the code executes `check()` immediately upon loading the page, before the user has typed anything. So that will always result in an "incorrect" answer right away. But then when submitting the form the expected output occurs. But submitting a form reloads the page, which [you can prevent](https://stackoverflow.com/q/3350247/328193). — David, Jan 27 '22 at 13:40
I do realise this is basically an entire assignment but its MY assignment that I have set for myself. I only come on here as a last resort (after working with multiple colleagues) as I know the feedback on here can be overly negative — Keira J, Jan 27 '22 at 13:45
I do really appreciate all of your help though, I have sorted the page refresh problem which wasn't a problem I had begun to tackle yet — Keira J, Jan 27 '22 at 13:46
@KeiraJarvis: Regarding the updated question... The code snippet in the question returns the expected result for me when clicking the button (just before the page refresh). So it's not really clear what you mean by "its skipping the if statement and going straight to the default". Can you update the question to include the fix for the page refresh and demonstrate the problem? — David, Jan 27 '22 at 13:46
amazing, I have solved that issue (I now get correct answer) but I get it reported two times haha — Keira J, Jan 27 '22 at 13:51

score 2 · Answer 1 · answered Jan 27 '22 at 13:08

You can keep questions, scores in localstorage in JavaScript.

This information is stored in the browser and works like cookies.

ex: value inserting in localstorage:

localStorage.setItem('myCat', 'Tom');

ex: accessing to value from localstorage:

localStorage.getItem('myCat');

You Can Look: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

score 1 · Answer 2 · answered Jan 27 '22 at 13:33

I think you are troubled by that empty screen after submission, if yes, then the reason for that is "On form submit the page gets refreshed/redirected" to stop that use onsubmit = "check(); return false" or handle it with js using event.preventDefault.

Using return false:

onsubmit = "check(); return false"

Source

function check() {
  let correctAns1 = 'carname = "Volvo"';
  let input = document.getElementById("q1").value;

  let score = 0;


  if (input == correctAns1) {
    score++;
    console.log("That is correct")
    console.log(score)
  } else {
    console.log("Incorrect")
  };
};


check();

<div id="question1">
  <form onsubmit="check(); return false"><br><br>
    <h2>Task 1</h2>

    <p>Create a variable called carname and give it a value of Volvo</p>

    <input type="text" id="q1"><br>
    <input type="submit" value="Submit">

  </form>
</div>

Using preventDefault and javascript onsubmit:

e.preventDefault();

Source

function check() {
  let correctAns1 = 'carname = "Volvo"';
  let input = document.getElementById("q1").value;

  let score = 0;


  if (input == correctAns1) {
    score++;
    console.log("That is correct")
    console.log(score)
  } else {
    console.log("Incorrect")
  };
  return false
};

document.getElementById("testForm").addEventListener("submit", function(e){
  e.preventDefault();
  check();
  });

<div id="question1">
  <form id="testForm" ><br><br>
    <h2>Task 1</h2>

    <p>Create a variable called carname and give it a value of Volvo</p>

    <input type="text" id="q1"><br>
    <input type="submit" value="Submit">

  </form>
</div>

For storing, you can use localstorage on client-side. You can have an array/object of questions and answers and convert it into a string using JSON.stringify and store it in localstorage

localStorage.setItem('questionBook', JSON.stringify(questionBookObject));

and retrieve it using getItem and then JSON.parse it to get the object back.

const questionBookObject = localStorage.getItem('questionBook');

Amazing thankyou!! You solved the refresh problem!. Now we just have to get it to run the if statement and get a correct answer — Keira J, Jan 27 '22 at 13:39

Javascript Quiz with HTML + CSS

2 Answers2