A few months ago I had a job interview test where I was asked to code an interface that functions like an online personality test using HTML5, CSS, and Javascript.
This simple online test will display one question at a time, with the answer options at the bottom. When the user clicks on one of the answers, it will move on to display the next question. The answer selected will be stored in a JS array to be submitted at the end of the test.
The interface will prompt user questions with answer options, upon answering, the next question will show. Upon every new test, the questions should randomize their order.
The body of my HTML looks like this:
<div >
<div id="question">
<h1>Question goes here</h1>
</div>
<div >
<button type="button" id="op1">Option 1</button>
<button type="button" id="op2">Option 2</button>
</div>
<div >
<p><span id="numbers">0</span> of 5 questions completed.</p>
</div>
</div>
My JS code looks like this:
const Questions = [{
id: 0,
q: "I value",
a: ["justice", "mercy"],
}, {
id: 1,
q: "A quiet weekend at home is",
a: ["boring", "rejuvenating"],
}, {
id: 2,
q: "I prefer speakers that communicate",
a: ["literally", "figuratively"],
}, {
id: 3,
q: "With people, I am more often",
a: ["brief and to the point", "friendly and warm"],
}]
const Answers = []
var start = true;
function iterate(id){
// Test get text
console.log(Questions[id].q);
console.log(Questions[id].a[0]);
console.log(Questions[id].a[1]);
// Getting the question
const question = document.getElementById("question");
const numbers = document.getElementById("numbers");
// Setting the question text
question.innerText = Questions[id].q;
numbers.innerText = Questions[id].id;
// Getting the options
const op1 = document.getElementById("op1");
const op2 = document.getElementById("op2");
// Providing option text
op1.innerText = Questions[id].a[0];
op2.innerText = Questions[id].a[1];
}
if (start) {
iterate(0);
}
// Next button and method
const next = document.getElementsByClassName('next')[0];
var id = 0;
next.addEventListener("click", () => {
start = false;
if (id < 4) {
id ;
iterate(id);
console.log(id);
} else {
// Mark the test as finished
Questions.innerText = "Congratulations. You have finished your personality assessment test"
op1.innerText = "Option 1";
op2.innerText = "Option 2";
}
})
However, I am having a problem when trying to run the code, the interface cannot display any questions or answers, only the initial texts set by the static HTML file (Question goes here, Option 1, Option 2). In addition, I opened the Inspect tool on the browser, which the console produces the following error message:
Uncaught TypeError: Cannot set properties of null (setting 'innerText') at iterate (script.js:38:24) at script.js:57:5
question.innerText = Questions[id].q;
If anyone is having the same problem and is expertise in JavaScript and front-end development, please provide a solution to solve the errors.
I have tried to code the online test interface with the given sample questions and answers according to the JavaScript standards and references from similar codes and projects. However, it did not work out and the questions and answers do not display on the interface.
CodePudding user response：
You should check every time if opt1 and opt2 are not null
next.addEventListener("click", () => {
start = false;
if (id < 4) {
id ;
iterate(id);
console.log(id);
} else {
// Mark the test as finished
Questions.innerText = "Congratulations. You have finished your personality assessment test"
if(op1 && op2){
op1.innerText = "Option 1";
op2.innerText = "Option 2";
}
}
})
CodePudding user response：
Your code is all correct,
- just you have missed to add a
commahere, and i took liberty to make changes to your code. - You referred to a different variable here
Questionis anArray, you should refer toquestion.
Yours: 1.
{
id: 1
q: "A quiet weekend at home is",
a: ["boring", "rejuvenating"]
},
Solution:
{
id: 1,
q: "A quiet weekend at home is",
a: ["boring", "rejuvenating"]
},
Yours:
Questions.innerText = "Congratulations. You have finished your personality assessment test"
Solution:
question.innerText = "Congratulations. You have finished your personality assessment test"
The complete solution
const question = document.getElementById("question");
const numbers = document.getElementById("numbers");
const Questions = [
{
id: 1,
q: "I value",
a: ["justice", "mercy"],
},
{
id: 2,
q: "A quiet weekend at home is",
a: ["boring", "rejuvenating"],
},
{
id: 3,
q: "Random ",
a: ["boring", "rejuvenating"],
},
{
id: 4,
q: "I prefer speakers that communicate",
a: ["literally", "figuratively"],
},
{
id: 5,
q: "With people, I am more often",
a: ["brief and to the point", "friendly and warm"],
},
];
const Answers = [];
function iterate(id = 0) {
// Test get text
console.log(Questions[id].q);
console.log(Questions[id].a[0]);
console.log(Questions[id].a[1]);
// Getting the question
// Setting the question text
question.innerText = Questions[id].q;
numbers.innerText = Questions[id].id;
// Getting the options
const op1 = document.getElementById("op1");
const op2 = document.getElementById("op2");
// Providing option text
op1.innerText = Questions[id].a[0];
op2.innerText = Questions[id].a[1];
}
iterate();
// Next button and method
const next = document.getElementsByClassName("next")[0];
var id = 1;
next.addEventListener("click", () => {
if (id < 5) {
iterate(id);
console.log(id);
id ;
} else {
// Mark the test as finished
question.innerText = "Congratulations. You have finished your personality assessment test";
op1.innerText = "Option 1";
op2.innerText = "Option 2";
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div >
<div id="question">
<h1>Question goes here</h1>
</div>
<div >
<button type="button" id="op1">Option 1</button>
<button type="button" id="op2">Option 2</button>
</div>
<div >
<p><span id="numbers">0</span> of 5 questions completed.</p>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>
Hope it helped