How do I use an array and class?

Curriculum Help JavaScript
#1

I am trying to use array and class but cannot get this to work. Please advice what should be the correct way?

++++++++++++++++++++++++++++++++++++++++++++++++++++++++

class MCQ{                                  /* Declcaring a class called MCQ  */
    constructor(question, choice, answer) {
        this.question = question;
        this.choice = choice;
        this.answer = answer;
    }
    
}
var qn = [];
qn[0] = new MCQ(["Question 0",["Answer 1", "Answer 2", "Answer 3", "Answer 4"],1]);  // 1st element is question, 2nd is choices, 3rd is correct answer
qn[1] = new MCQ(["Question 1",["Answer 1", "Answer 2", "Answer 3", "Answer 4"],1]);  // 1st element is question, 2nd is choices, 3rd is correct answer
qn[2] = new MCQ(["Question 2",["Answer 1", "Answer 2", "Answer 3", "Answer 4"],2]);  // 1st element is question, 2nd is choices, 3rd is correct answer
qn[3] = new MCQ(["Question 3",["Answer 1", "Answer 2", "Answer 3", "Answer 4"],3]);  // 1st element is question, 2nd is choices, 3rd is correct answer

function display () {
    for (i=0; i < (qn.length); i++) {
        console.log(qn[i].question);
        var getans = input.question("Please enter choice >> ")
        if (getans ==  qn[i].answer) {
            console.log("You are correct!");
        
        } else {
            console.log ("You are wrong!");
        }
}
}

function displayHTML () {
    // display all questions in HTML
}


// main
var input = require('readline-sync');
console.log("Running main program\n");
display();
#2 
qn[0] = new MCQ(["Question 0",["Answer 1", "Answer 2", "Answer 3", "Answer 4"],1])

I think you are not correctly passing arguments. What you are doing is just passing 1 whole array so that is one argument, not 3.
What would be correct is to do this.

qn[0] = new MCQ("Question 0", ["Answer 1", "Answer 2", "Answer 3", "Answer 4"], 1 )
2 Likes
#3

Thanks.

Another question. How do i display the following data in the function displayHTML function.

I like to get the question from array
Display the choices as radio button
Allow user select
Allow user submit
And check if answer is correct

An example of the html linking the javascript would be helpful for me to understand

My html would be index.html… and my javascript would be quiz.js

<!DOCTYPE html>
<html>
  <head>
    <title>
      Simple Javascript Quiz Demo
    </title>
    <!-- [CSS AND JS] -->
    <link href="quiz-css.css" rel="stylesheet">
    <script src="quiz.js"></script>
  </head>
  <body>
     <p> ......an example will help me understand how I get data from javascript and post it back </p>
  </body>
</html>
#4

I think you should give it a go yourself first. If you face problems then you can ask them here.

#5

Have been trying but I don’t understand how the HTML invoke the JS script
How do I pass the data in array as the radio button.

Say example

<input type="radio" name="choice" value=qn[i].choice[i]>qn[i]choice[i]<br> .

I get the value from javascript than I replace the value of radio as the variable it does not seems to make sense

<p> Display Quiz </p>
<p> qn[i].question </p>

Again above I try using variable and place under HTML. I am confused of how the javascript process the data and then post in HTML.

#6

Hi @Ronald.
You need to manage the html through JavaScript.
You can’t call the JavaScript code like that in the html, it will be evaluated as text.

I suggest you to do all the JavaScript and the jQuery modules first and than try it again.
Those modules would be sufficient to answer the question. After those, I advise you to take a look also at React which will provide you with a way to mix html and js code.

#7

Thanks will do what you suggested

#8

In the browser, JavaScript is loaded after HTML. There are multiple ways to include JavaScript in HTML.
You can add at the end of body tag. You can also add it through the external file.
How you invoke JavaScript is through function calls on Event. You can read about events here.
So for example, a page is loaded, a button is clicked or a radio button is checked/unchecked then the JavaScript you have attached to the event will be automatically invoked and perform the action you have asked him to do.
I hope this all makes sense.