Develop Reference

Question index not updating when I click next button

I have written this code its just that when I click the next button the questions and answers don't update and go to the next question in the array, but it shows the first question and answers when the page loads. I'm not sure what I havent done here.
const questiontext= document.getElementById('question-text');
const A= document.getElementById('OptionA');
const B= document.getElementById('OptionB');
const C= document.getElementById('OptionC');
const D= document.getElementById('OptionD');
const options= document.getElementsByClassName('options');
const nextbutton= document.getElementById('next');
const submitbutton= document.getElementById('submit');
const questions=[
{
question: "What is the best item at mcdonalds?",
answerA: "Fries",
answerB: "Big Mac",
answerC: "Mcnuggets",
answerD: "Quarter Pounder",
correctanswer: "Big Mac"
},
{
question: "What is the cheapest thing on the mcdonalds menu?",
answerA: "Fries",
answerB: "Double Cheeseburger",
answerC: "Happy Meal",
answerD: "Orange juice",
correctanswer: "Fries"
},
{
question: "What is the least popular item at mcdonalds?",
answerA: "Filet O Fish",
answerB: "Hamburger",
answerC: "Veggie Deluxe",
answerD: "Mineral water",
correctanswer: "Filet O Fish"
},
{
question: "How many dips are you allowed with 20 Mcnuggets?",
answerA: "2",
answerB: "4",
answerC: "3",
answerD: "6",
correctanswer: "4"
}
];
//Question index at start
const questionindex= 0;
const currentquestion= () =>{
questiontext.innerHTML= questions[questionindex].question;
A.innerHTML= questions[questionindex].answerA;
B.innerHTML= questions[questionindex].answerB;
C.innerHTML= questions[questionindex].answerC;
D.innerHTML= questions[questionindex].answerD;
if(questionindex === questions.length){
submitbutton.classList.remove('hidden');
}
}
const nextquestion= () =>{
questionindex++
}
//Load first question and answers
currentquestion(questionindex);
//Button to display next question
nextbutton.addEventListener('click', nextquestion);

change the const and replace it with a let or var

Change
const questionindex
to
let questionindex

Javascript Array String Generator Problem

My web page allows users to generate strings/phrases by selecting a combination of two radio buttons from two different groups: mode and category. After selecting their choice of buttons, they click the 'Push' button and a string pops up. See the snippet below:
class modes {
constructor(items) {
this.items = items;
this.randomUnused = [...items];
this.forwardIndex = 0;
this.reverseIndex = items.length - 1;
}
forwardItem() {
return this.items[this.forwardIndex++ % (this.items.length)];
}
randomItem() {
if (!this.randomUnused.length) {
this.randomUnused.push(...this.items);
}
const index = Math.floor(Math.random() * this.randomUnused.length);
return this.randomUnused.splice(index, 1);
}
reverseItem() {
if (this.reverseIndex < 0) {
this.reverseIndex = this.items.length - 1;
}
return this.items[this.reverseIndex--];
}
}
const categ = {
A: new modes([
"A example 1",
"A example 2",
"A example 3",
"A example 4",
]),
B: new modes([
"B example 1",
"B example 2",
"B example 3",
"B example 4",
]),
C: new modes([
"C example 1",
"C example 2",
"C example 3",
"C example 4",
]),
D: new modes([
"D example 1",
"D example 2",
"D example 3",
"D example 4",
])
};
function main() {
const output = document.querySelector("output");
if(!(document.forms.thingSelection2.type.value in categ)) {
return false;
}
const list = categ[document.forms.thingSelection2.type.value];
const method = document.forms.thingSelection1.mode.value + "Item";
const item = list[method]();
output.innerHTML = item;
}
const abutton = document.getElementById("abutton");
if(abutton) {
abutton.addEventListener("click", main);
}
<output></output>
<button id="abutton">Push</button>
<form name="thingSelection1">
Forwards<input type="radio" name="mode" value="forward">
Random<input type="radio" name="mode" value="random">
Backwards<input type="radio" name="mode" value="reverse">
</form>
<form name="thingSelection2">
<li><input type="radio" name="type" value="A">Choice A</li>
<li><input type="radio" name="type" value="B">Choice B</li>
<li><input type="radio" name="type" value="C">Choice C</li>
<li><input type="radio" name="type" value="D">Choice D</li>
</form>
Each category is currently represented by a radio button and has its own separate array, so only one may be selected at a time. My goal is to allow the user to select multiple categories and combine them into a new array, then cycle through them.
Problem 1: Changing the category radio buttons into checkboxes causes the function to break. The snippet below illustrates this. I figure this is due to the fact that checkboxes have 3 possible states (checked, unchecked, indeterminate) while radio buttons can only be true or false. I am unsure what changes to make to the function to allow the checkboxes to work. I could use some assistance. I'm fairly new to javascript, so please be patient.
class modes {
constructor(items) {
this.items = items;
this.randomUnused = [...items];
this.forwardIndex = 0;
this.reverseIndex = items.length - 1;
}
forwardItem() {
return this.items[this.forwardIndex++ % (this.items.length)];
}
randomItem() {
if (!this.randomUnused.length) {
this.randomUnused.push(...this.items);
}
const index = Math.floor(Math.random() * this.randomUnused.length);
return this.randomUnused.splice(index, 1);
}
reverseItem() {
if (this.reverseIndex < 0) {
this.reverseIndex = this.items.length - 1;
}
return this.items[this.reverseIndex--];
}
}
const categ = {
A: new modes([
"A example 1",
"A example 2",
"A example 3",
"A example 4",
]),
B: new modes([
"B example 1",
"B example 2",
"B example 3",
"B example 4",
]),
C: new modes([
"C example 1",
"C example 2",
"C example 3",
"C example 4",
]),
D: new modes([
"D example 1",
"D example 2",
"D example 3",
"D example 4",
])
};
function main() {
const output = document.querySelector("output");
if(!(document.forms.thingSelection2.type.value in categ)) {
return false;
}
const list = categ[document.forms.thingSelection2.type.value];
const method = document.forms.thingSelection1.mode.value + "Item";
const item = list[method]();
output.innerHTML = item;
}
const abutton = document.getElementById("abutton");
if(abutton) {
abutton.addEventListener("click", main);
}
<output></output>
<button id="abutton">Push</button>
<form name="thingSelection1">
Forwards<input type="radio" name="mode" value="forward">
Random<input type="radio" name="mode" value="random">
Backwards<input type="radio" name="mode" value="reverse">
</form>
<form name="thingSelection2">
<li><input type="checkbox" name="type" value="A">Choice A</li>
<li><input type="checkbox" name="type" value="B">Choice B</li>
<li><input type="checkbox" name="type" value="C">Choice C</li>
<li><input type="checkbox" name="type" value="D">Choice D</li>
</form>
Problem 2: Constructing the custom array in a specific order. While internet searches provide many ways to combine multiple arrays into one, like concat, none of them explain how to organize the strings in a custom order.
Example of what im looking for: ["A example 1", "B example 1", "C example 1", "D example 1", "A example 2", "B example 2"...]
Rather than simply stacking the array contents on top of each other, like concat and every other method of combining arrays: ["A example 1", "A example 2", "A example 3", "A example 4", "B example 1", "B example 2"...]
I'm unaware of any method to achieve this. No external libraries please.

How to disable a group of radio buttons if one has been selected and display an alert if one is not selected and the next button is clicked

I am trying to disable the rest of the radio buttons if one has been selected for a multiple-choice quiz. I tried using a forEach loop but it is skipping the forEach loop and just triggering the alert box in the else part of the if statement when I click a radio button before one is even selected. Here is the function I am working in. the name${questionNumber} is the way to call my radio buttons. The myQuestions is my object with all of the questions and answers stored in it. Can someone please help me figure out how to do this, I would appreciate it. Thanks.
function showExplanation(questionNumber) {
document.getElementsByClassName("explanations")[questionNumber].classList.add("show");
if (document.getElementsByName(`name${questionNumber}`).checked) {
myQuestions.forEach((questionNumber) => {
document.getElementsByName(`name${questionNumber}`).disabled = true;
});
} else {
alert("Please select an answer.");
}
}
const myQuestions = [{
question: "What color is the sky?",
answers: {
a: "blue",
b: "green",
c: "red",
d: "yellow"
},
explanation: {
correct: "Correct answer: A. blue",
explain: `The sky may be blue today
`,
source: "Source: common sense"
},
correctAnswer: "a"
},
{
question: `What color is an elephant?`,
answers: {
a: "blue",
b: "grey",
c: "black",
d: "green"
},
explanation: {
correct: "Correct answer: B. grey",
explain: `Most elephants are grey
`,
source: "Source: life experience"
},
correctAnswer: "b"
}
];
<!-- START OF QUIZ-->
<div id="border" class="uk-align-center uk-width-1-2">
<div class="quiz-body">
<h1 class="h1-quiz">Test Your Knowledge</h1>
<div class="quiz-container">
<div id="quiz"></div>
</div>
<div id="results" class="uk-text-center uk-text-large uk-text-bold uk-margin-small-top"></div>
</div>

You mean When Correct User Can Only Choose one answer and when User select one answer other's will be disabled ??
What is your HTML code look like ??

How to display images from an array in vuepress or vuejs?

I have an array which looks like below:
questions: [
{
question: "How do you say 'My Car' in Malayalam",
answers: {
a: "a) Ente Car",
b: "b) Ninte/Ningalude Car",
c: "c) Onte Car",
d: "d) Aarudeyo Car",
},
images: "#alias/vallamkali.jpg",
correctAnswer: "a",
},
{
question: "How do you say 'your Car' in Malayalam",
answers: {
a: "a) Onte Car",
b: "b) Aarudeyo Car",
c: "c) Ninte/Ningalude Car",
d: "d) Ente Car",
},
images: "#alias/il_leki.png",
correctAnswer: "c",
},
{
question: "How do you say 'our car' in Malayalam",
answers: {
a: "a) Achante Car",
b: "b) Ninte/Ningalude Car",
c: "c) Ente Car",
d: "d) Nammalude/Njangalude Car",
},
images: "#alias/isthapetta_doubt.jpg",
correctAnswer: "d",
},
],
but when I try to print using the below code
<div v-if="index < count">
<p>{{ questions[index]['question']}}</p>
<p>{{ questions[index]['images']}}</p
</div>
Only the questions are generated correctly but the images are not displayed properly, only the location gets printed as below and is highlighted in blue. Please help.

You can not display images in p tag
You need to make method or computed property (assuming images = il_leki.png):
methods: {
getImg(img) {
return require(`#alias/${img}`);
}
}
then in template call that method in img tag (instead p tag) passing img :
<img :src="getImg(questions[index]['images']) />

I didn't use the function call.
I directly used require keyword in the img tag itself and it worked.
<img :src="require(`#alias/${questions[index]['images']}`)" alt="No image here too" />
#Nikola Pavicevic - Thanks for helping me think in this direction!

How to convert json array to java script using php?

I have this data...
{"quiz":
[{"question":"What is your favorite color?",
"choices":[{"prefix":"A","content":"Red"},{"prefix":"B","content":"Blue"},{"prefix":"C","content":"Yellow"},{"prefix":"D","content":"Pink"}]},
{"question":"What is the equivalent measurement of 1 feet?",
"choices":[{"prefix":"A","content":"12cm"},{"prefix":"B","content":"12px"},{"prefix":"C","content":"12mm"},{"prefix":"D","content":"12inch"}]},
{"question":"What is the combination of Green?",
"choices":[{"prefix":"A","content":"Yellow and Red"},{"prefix":"B","content":"Blue and Orange"},{"prefix":"C","content":"Yellow and Blue"},{"prefix":"D","content":"Black and Skyblue"}]}],"success":1}
and i want to convert it in java script like this one...
const myQuestions = [
{
question: "Who is the strongest?",
answers: {
a: "Superman",
b: "The Terminator",
c: "Waluigi, obviously"
},
correctAnswer: "c"
},
{
question: "What is the best site ever created?",
answers: {
a: "SitePoint",
b: "Simple Steps Code",
c: "Trick question; they're both the best"
},
correctAnswer: "c"
},
{
question: "Where is Waldo really?",
answers: {
a: "Antarctica",
b: "Exploring the Pacific Ocean",
c: "Sitting in a tree",
d: "Minding his own business, so stop asking"
},
correctAnswer: "d"
}
];
how can I achieve this one, because im making a quiz app which will view in mobile device by the use of webviewer. any help is much appreciated..

Here's a start of how you could potentially convert the array. Be aware, there is no correctAnswer column in your input, so it's impossible to convert:
var input = {"quiz":
[{"question":"What is your favorite color?",
"choices":[{"prefix":"A","content":"Red"},{"prefix":"B","content":"Blue"},{"prefix":"C","content":"Yellow"},{"prefix":"D","content":"Pink"}]},
{"question":"What is the equivalent measurement of 1 feet?",
"choices":[{"prefix":"A","content":"12cm"},{"prefix":"B","content":"12px"},{"prefix":"C","content":"12mm"},{"prefix":"D","content":"12inch"}]},
{"question":"What is the combination of Green?",
"choices":[{"prefix":"A","content":"Yellow and Red"},{"prefix":"B","content":"Blue and Orange"},{"prefix":"C","content":"Yellow and Blue"},{"prefix":"D","content":"Black and Skyblue"}]}],"success":1}
console.log(input.quiz.map(({question, choices}) => ({
question,
answers: choices.reduce((obj, v) => Object.assign(obj, {[v.prefix]: v.content}), {}),
correctAnswer: "?",
})));