0

This is my first day using HTML/Javascript. I've done some Java a while ago. I'm trying to make a quiz that will get answers from a drop down list and compare them to the answer key. I've tried so many things I can't even remember them all. Any help would be appreciated. Specifically, I cant figure out how to compare each element in the two arrays. I'm sure there is a lot more wrong than just the arrays. I;ve googled answers for 4 hours and got nothinggggg. Here is my code so far:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>Critical Device Test</h1>
<p>Please match the letter to the corresponding answer.<p>

<br>
<br>

<img src="https://i.imgur.com/kDHijRv.jpg" alt="Proton Source CD's" width = 300 height = 200>
<br>
<label for="Q1">A:</label>
<select id="Q1" class="Q">
  <option value="0">SELECT</option>
  <option value="1">L:CRDEV</option>
  <option value="2">L:CDC</option>
  <option value="3">L:LINCDC</option>
  <option value="4">L:LINAC</option>
</select>
<br>
<label for="Q2">B:</label>
<select id="Q2" class="Q">
  <option value="0">SELECT</option>
  <option value="1">n1</option>
  <option value="2">n2</option>
  <option value="3">n3</option>
  <option value="4">n4</option>
</select>
<br>
<label for="Q3">C:</label>
<select id="Q3" class="Q">
  <option value="0">SELECT</option>
  <option value="1">e1</option>
  <option value="2">e2</option>
  <option value="3">e3</option>
  <option value="4">e4</option>
</select>

<br>
<br>

<button onclick="myFunc()">Click me</button>

<script>
var q1 = document.getElementById("Q1");
var valueQ1=q1.options[q1.selectedIndex].value
var q2 = document.getElementById("Q2");
var valueQ2=q2.options[q2.selectedIndex].value
var q3 = document.getElementById("Q3");
var valueQ3=q3.options[q3.selectedIndex].value

var array ans = [1,2,3]
var array inpans = [valueQ1,valueQ2,valueQ3]
var counter = 0;
var count = 0;

function myFunc(){
    while (count<ans.length){
    if(ans[count]==inpans[count])
    {
        counter ++;
        count ++;
    }else {
        counter = counter;
        count ++,
        }
}
    document.getElementById("one").innerHTML = "You got " + counter + " right.";
}

</script>
<p id="one"></p>
</body>
</html>

1 Answer 1

2

You have a number of issues which need fixing:

  1. Your HTML is invalid. Your're not closing your <p> tag on line 11:

    <p>Please match the letter to the corresponding answer.</p> <!-- <-- close this -->
    
  2. You have many syntax errors in your code. Whenever your code isn't working, the first thing you should look for is syntax errors. Syntax errors can be identified by your brower's console. The first syntax errors are on lines 58 and 59. There should only be one variable name (identifier) after the var keyword:

    var ans = [1, 2, 3]; // <-- used to be: var array ans
    var inpans = [valueQ1, valueQ2, valueQ3]; // used to be: array inpans
    
  3. Another syntax error occurs on line 70. Here you're using a comma instead of a semi-colon. Again, the console could of helped you identify this error yourself:

    count++; // used to be: count++,
    
  4. Your next issue is a logical issue. The following code runs when the page loads:

    var q1 = document.getElementById("Q1");
    var valueQ1 = q1.options[q1.selectedIndex].value
    var q2 = document.getElementById("Q2");
    var valueQ2 = q2.options[q2.selectedIndex].value
    var q3 = document.getElementById("Q3");
    var valueQ3 = q3.options[q3.selectedIndex].value
    

    ...as it runs when the page initially loads, the values of valueQ1 etc. will all be the initial value of the dropdowns when the page initially loads. These values don't change when you change the selected value in the dropdowns. If you wanted that behaviour you'd need an event listener. However, an easy way to fix this is to set the values of valueQ1 through to valueQ3 inside your function. This way, your code will grab the values from the dropdowns when you click your button, which should be after the user has manually selected a value from the dropdowns themselves:

    var q1 = document.getElementById("Q1");
    var q2 = document.getElementById("Q2");
    var q3 = document.getElementById("Q3");
    ...
    function myFunc() {
      // get value of dropdown elements
      var valueQ1 = q1.value; // you can just grab the dropdown's value, no need for `q1.options[q1.selectedIndex].value`
      var valueQ2 = q2.value;
      var valueQ3 = q3.value;
      var inpans = [valueQ1, valueQ2, valueQ3];
      while (count < ans.length) {
      ...
    

Fixing all these will allow your code to check against answers. Currently, as your count variable is defined outside of the myFunc, your button will only run your while loop once (as the second time it runs count >= ans.length, making your while loop condition false - thus not running the code within it). If you want users to have multiple attempts at a given question you define count inside your function so that it gets reset when the button is clicked.

As a side note, if you're planning on using this code in production keep in mind that users will be able to see the answers to the questions by inspecting your website's source.

See altered code below:

<!DOCTYPE html>
<html>

  <head>
    <title>Page Title</title>
  </head>

  <body>

    <h1>Critical Device Test</h1>
    <p>Please match the letter to the corresponding answer.</p>

    <br>
    <br>

    <img src="https://i.imgur.com/kDHijRv.jpg" alt="Proton Source CD's" width=300 height=200>
    <br>
    <label for="Q1">A:</label>
    <select id="Q1" class="Q">
      <option value="0">SELECT</option>
      <option value="1">L:CRDEV</option>
      <option value="2">L:CDC</option>
      <option value="3">L:LINCDC</option>
      <option value="4">L:LINAC</option>
    </select>
    <br>
    <label for="Q2">B:</label>
    <select id="Q2" class="Q">
      <option value="0">SELECT</option>
      <option value="1">n1</option>
      <option value="2">n2</option>
      <option value="3">n3</option>
      <option value="4">n4</option>
    </select>
    <br>
    <label for="Q3">C:</label>
    <select id="Q3" class="Q">
      <option value="0">SELECT</option>
      <option value="1">e1</option>
      <option value="2">e2</option>
      <option value="3">e3</option>
      <option value="4">e4</option>
    </select>

    <br>
    <br>

    <button onclick="myFunc()">Click me</button>

    <script>
    	// Get dropdown elements when page loads
      var q1 = document.getElementById("Q1");
      var q2 = document.getElementById("Q2");
      var q3 = document.getElementById("Q3");
      

      var ans = [1, 2, 3]
      var counter = 0;
      var count = 0;

      function myFunc() {
      	// get value of dropdown elements
      	var valueQ1 = q1.value;
        var valueQ2 = q2.value;
        var valueQ3 = q3.value;
        var inpans = [valueQ1, valueQ2, valueQ3];
        while (count < ans.length) {
          if (ans[count] == inpans[count]) {
            counter++;
            count++;
          } else {
            counter = counter;
            count++;
          }
        }
        document.getElementById("one").innerHTML = "You got " + counter + " right.";
      }

    </script>
    <p id="one"></p>
  </body>

</html>

For what it's worth, here's how I would write the equivalent code. It takes advantage of the class you have on each dropdown, and then iterating over all dropdowns to check whether they equal the correct answer. If you want the user to have multiple attempts at the question you can remove the {once: true} option:

// Get dropdown elements when page loads
const dropdowns = document.querySelectorAll('.Q');
const submitBtn = document.querySelector("#guess-btn");
const resultElem = document.getElementById("one");
const ans = [1, 2, 3];
submitBtn.addEventListener("click", () => {
  const correctCount = [...dropdowns].reduce(
    (total, dropdown, i) => total + (+dropdown.value === ans[i]), 0
  );
  resultElem.innerText = `You got ${correctCount} right.`;
}, {once: true});
<h1>Critical Device Test</h1>
<p>Please match the letter to the corresponding answer.</p>

<br />
<br />

<img src="https://i.imgur.com/kDHijRv.jpg" alt="Proton Source CD's" width="300" height="200" />
<br />
<label for="Q1">A:</label>
<select id="Q1" class="Q">
  <option value="0">SELECT</option>
  <option value="1">L:CRDEV</option>
  <option value="2">L:CDC</option>
  <option value="3">L:LINCDC</option>
  <option value="4">L:LINAC</option>
</select>
<br />
<label for="Q2">B:</label>
<select id="Q2" class="Q">
  <option value="0">SELECT</option>
  <option value="1">n1</option>
  <option value="2">n2</option>
  <option value="3">n3</option>
  <option value="4">n4</option>
</select>
<br />
<label for="Q3">C:</label>
<select id="Q3" class="Q">
  <option value="0">SELECT</option>
  <option value="1">e1</option>
  <option value="2">e2</option>
  <option value="3">e3</option>
  <option value="4">e4</option>
</select>

<br />
<br />

<button id="guess-btn">Click me</button>
<p id="one"></p>

Sign up to request clarification or add additional context in comments.

1 Comment

Well thank you very much! I was looking at it for far too long I made some silly mistakes. I'm trying to get back into coding after only some intro Java courses years ago so this really helps having you lay it out like that. I'm sure ill be back soon with more questions.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.