I've been trying to figure this out for a while, and I'm totally stumped.
I'm writing a program that is supposed to display a basic series of multiple-choice questions. You see a question, you click one of the answers, and you move on to the next question.
The problem is, I can't figure out how to display one question, then display the next question when the user clicks one of the buttons. Nothing happens when I click a button. What's going wrong?
// progress meter
var progress = new Array();
for (var i = 0; i < questions.length; i++) progress.push("0");
var i = 0;
display(0);
// display questions
function display(i) {
var prg_string;
for (var j = 0; j < progress.length; j++) prg_string += progress[j];
document.write(
"<div id = 'background'>"
+ "<div id = 'progress'>" + progress + "</div>"
+ "<div id = 'title'>-JogNog Test v1-<br></br>" + tower + "</div>"
+ "<div id = 'question'>" + questions[i].text + "</div>"
+ "<div id = 'stats'>Level " + level + "/" + total_levels + " Question " + (i + 1) + "/" + questions.length + "</div>"
+ "</div>"
);
document.write("<button id = 'answer1' onclick = 'next(questions[i].answers[0].correct)'>" + questions[i].answers[0].text + "</button>");
if (questions[i].answers.length > 0)
document.write("<button id = 'answer2' onclick = 'next(questions[i].answers[1].correct)'>" + questions[i].answers[1].text + "</button>");
if (questions[i].answers.length > 1)
document.write("<button id = 'answer3' onclick = 'next(questions[i].answers[2].correct)'>" + questions[i].answers[2].text + "</button>");
if (questions[i].answers.length > 2)
document.write("<button id = 'answer4' onclick = 'next(questions[i].answers[3].correct)'>" + questions[i].answers[3].text + "</button>");
}
// go to next question, marking whether answer was right or wrong
function next(correct) {
if(correct) progress[i] = "T";
else progress[i] = "F";
i += 1;
display(i);
}
I haven't read through your code, (you might want to work on posting SSCCEs by focusing just on the part that handles the loop) but I get the feeling a loop is not what you want here. Loops are great if you need to automatically iterate through something. But really, you want to display only a single question at a time.
The easiest way to do this, assuming you have a means of handling each question independently, is just to keep track of which question the user is up to. Display that question. When the user submits an answer, call whatever function renders a question using the counter, plus one. Make sure to check that you haven't hit the end of the quiz so that you don't reference a question that doesn't exist.
Here's some pseudocode:
var questionNumber, questions; //assume these already have values
function printQuestion(questionNumber){ ... }
function nextQuestion(){
if(questionNumber < questions){
questionNumber++;
printQuestion(questionNumber);
}
else{
showResults();
}
}
I agree with #ngmiceli that a loop isn't what you want here. You want to display one question, and then create click event handlers that will move on to the next question when the user selects an answer to the previous question.
I went ahead and created a different setup to demonstrate. You can see a demo here:
-- jsFiddle DEMO --
But I'll walk through the process. First, I set up a basic HTML document:
<body>
<h1>-Test v1-</h1>
<h2>Simple Math</h2>
<div id="container">
<div><span id="numRight">0</span> of <span id="numQuestions">0</span></div>
<div id="question"></div>
<div id="answers"></div>
</div>
</body>
Then, I created a questions array, each element in the array being an object. Each question object contains the question itself, an array of possible answers, and an "answerIdx" property that indicates the array index of the correct answer.
questions = [
{
question: 'What is 0 / 6 ?',
options: ['0','1','2'],
answerIdx: 0
},
{
question: 'What is 2 + 2 ?',
options: ['72','4','3.5'],
answerIdx: 1
}
]
I also created some other variables that point to the HTML elements I am going to want to manipulate:
numRight = 0,
numQuestions = 0,
answerDiv = document.getElementById('answers'),
questionDiv = document.getElementById('question'),
numRightSpan = document.getElementById('numRight'),
numQuestionsSpan = document.getElementById('numQuestions');
Next, I created a 'displayQuestion' function which takes a single question object as a parameter:
function displayQuestion(q) {
// insert the question text into the appropriate HTML element
questionDiv.innerHTML = q.question;
// remove any pre-existing answer buttons
answerDiv.innerHTML = '';
// for each option in the 'options' array, create a button
// attach an 'onclick' event handler that will update
// the question counts and display the next question in the array
for(i = 0; i < q.options.length; i++) {
btn = document.createElement('button');
btn.innerHTML = q.options[i];
btn.setAttribute('id',i);
// event handler for each answer button
btn.onclick = function() {
var id = parseInt(this.getAttribute('id'),10);
numQuestionsSpan.innerHTML = ++numQuestions;
// if this is the right answer, increment numRight
if(id === q.answerIdx) {
numRightSpan.innerHTML = ++numRight;
}
// if there is another question to be asked, run the function again
// otherwise, complete the test however you see fit
if(questions.length) {
displayQuestion(questions.shift());
} else {
alert('Done! You got '+numRight+' of '+numQuestions+' right!');
}
}
answerDiv.appendChild(btn);
}
}
Finally, I displayed the first question:
displayQuestion(questions.shift());
Related
This is a pure JavaScript question no jQuery please.
Trying to make a JavaScript Dartboard score keeper. Running into an issue of printing an incremental list. When you click a part of the dartboard would like to calculate throws 1, 2, and 3. The problem is I would like to print off those throws in incremental list format.
HTML:
<button class="score-section" data-value="20" data-multiplier="1">20</button>
<ul id="dartTotals">
<li>Throw 1: {total}</li>
<li>Throw 2: {total}</li>
<li>Throw 3: {total}</li>
</ul>
JavaScript
document.body.onclick = function(e){
e = e.target;
if (e.className && e.className.indexOf('score-section') != -1) {
var i = 0;
(function increment(){
document.getElementById('dartTotals').innerHTML += "<li> Throw " + ++i + ": " + " total </li>";
}());
}
}
The only thing I've been able to do is add 1 to i and just keep printing that off with out incrementing i. Or run a for loop and print off the list but it does it 3 at a time. Could someone assist in helping to show how I can go about making this incremental list with each click? Thanks in advance.
JSFIDDLE
Update:
Updated Fiddle
On body click the function was getting reset. Moved var i, now called dartThrow out of the function scope and is working as expected.
var dartThrow = 0;
document.body.onclick = function(e) {
e = e.target;
if (e.className && e.className.indexOf('score-section') != -1) {
(function increment() {
document.getElementById('dartTotals').innerHTML += "<li> Throw " + ++dartThrow + ": " + " total </li>";
}());
}
}
You're setting $i to 0 on every click and then increment that value. Just do a variable outside your functions scope and then it should increment properly everytime with the code you already do have. You'll just need a reset when $i reaches your total throw count that you want.
I'm trying to have a button, that once pressed. Dynamically loads Two Questions (question1, and question2) into separate forms. But it also contains the questions 3 Answers to choose from. Currently my for loop adds an additional set of 3 answers(question 2's answers) to choose from to Question 1
OUTPUT Looks like the following :
It needs to be QUESTION 1 (YES, NO, OTHER) and QUESTION 2 (YES2, NO2, OTHER2)
CODE
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="center col-xs-12">
<button class="contentBtn btn"><label for="contentBtn">CONTENT</label></button>
</div>
<div class="row-2 center col-xs-12"></div>
<script src="js/jquery-1.11.3.min.js" type='text/javascript'>
</script>
<script>
$('.contentBtn').click(function(){
var contentArray = [
["QUESTION1?", "YES", "NO", "OTHER"],
["QUESTION2?", "YES2", "NO2", "OTHER2"]
];
for (var i = 0; i < contentArray.length; i++){
$('.row-2').append("<form><span class='question'>" + contentArray[i][0] + "<\/span><br>")
for (var x = 1; x < 4; x++){
$('form').append("<input type='radio' value='" + contentArray[i][x] + "'>" + contentArray[i][x] + "");
}
$('.row-2').append("<\/form><br>");
}
});
</script>
</body>
</html>
The short answer is that you are appending 'form', meaning you are appending every form on the DOM. The code is also corrupting the DOM. The inputs are not closed, and append should never be done in partials like given in the example.
// Always favor the 'on' events instead of the 'click' events.
$('.contentBtn').on('click', function () {
var contentArray = [
['QUESTION1?', 'YES', 'NO', 'OTHER'],
['QUESTION2?', 'YES2', 'NO2', 'OTHER2']
];
// we are going to use a for each on the first item,
// we could use a for as well but it just is really messy.
// remember that variables are defined at function scope, not block scope.
$(contentArray).each(function (index, item) {
// our item in the array is directly coming in to us now.
// do not add incomplete html blocks to the dom, always
// create them and then add them!
var newContent = $('<form><span class="question">' +
item[0] + '</span><br></form><br>');
// now we will foreach, but instead of going by a length of 4,
// I am looking at the actual length of the array.
for (var i = 1; i < item.length; i++) {
// we are going to precreate our dom object.
var answerContent = $('<input type="radio" value="' +
item[i] + '">' + item[i] + '</input>');
// now we are going to append the object to our form object.
newContent.append(answerContent);
}
// now that the structure is complete we will append the browser dom.
$('.row-4').append(newContent);
});
});
I have created a corrected fiddle with comments for you.
https://jsfiddle.net/t9h91nbk/
Hope this helps.
The problem is in this line :
$('form').append("<input type='radio' value='" + contentArray[i][x] + "'>" + contentArray[i][x] + "");
The javascript can't detect wich form you want to append input to it so it will append to all the forms in page, so you have to add an identifier to the form you create.
I'll add class to identify each form and append the input using this identifiers :
$('.row-2').append("<form class='form_"+i+"'><span class='question'>" + contentArray[i][0] + "</span><br>")
for (var x = 1; x < 4; x++){
$('.form_'+i).append("<input type='radio' value='" + contentArray[i][x] + "'>" + contentArray[i][x] + "");
}
Hope this helps.
Working fiddle
I'm making a quiz. The user decides how many questions he wants to answer.
A function then takes this number and runs a loop to make an individual question div for each question. The quiz shows a Chinese character and the user has to pick the correct translation.
My code:
var fillInQuestion = function() {
questionDivIdHTML = 'question' + questionNum;
/****************************************
How do I make this Div's ID = to questionDivIdHTML?
// Creates question div
$('#questionArea').append("<div class='questionDiv'></div>");
//$('#questionArea:last-child').attr("id", questionDivIdHTML); <-- NOT WORKING
***************************************/
// Sets up a choice bank.
var choices = [];
// choices will be chosen from this.
var tempAnswerSet = allChoices.slice(0);
//find random item in the database for the question
var thisQuestion = allQuestions[Math.floor(Math.random() * allQuestions.length)];
// add that item to choices
choices.push(thisQuestion);
// remove item from 'database' so it cannot be used in another question
allQuestions.splice(allQuestions.indexOf(thisQuestion), 1);
// remove item from tempAnswer set so it can only be one choice
tempAnswerSet.splice(tempAnswerSet.indexOf(thisQuestion), 1);
// add three more items from the database (incorrect items)
var i = 3;
for (i; i > 0; i--) {
var addChoice = tempAnswerSet[Math.floor(Math.random() * tempAnswerSet.length)];
choices.push(addChoice);
// remove the one selected each time so they cant be chosen again
tempAnswerSet.splice(tempAnswerSet.indexOf(addChoice), 1);
//console.log("choices length: " + choices.length);
}
// shuffle the array
choices.shuffle();
// fill in the div with choices.
$('#questionDivIdHTML').append("Here is an question prompt:" + thisQuestion.english + " <br>");
$('questionDivIdHTMLwithHash').append("<input type='radio' name='question<script>questionNum</script>Choice' value='<script>choices[0].hanyu</script>'></input>" + choices[0].hanyu + "<br>");
$('questionDivIdHTMLwithHash').append("<input type='radio' name='question<script>questionNum</script>Choice' value='<script>choices[1].hanyu</script>'></input> " + choices[1].hanyu + "<br>");
$('questionDivIdHTMLwithHash').append("<input type='radio' name='question<script>questionNum</script>Choice' value='<script>choices[2].hanyu</script>'></input> " + choices[2].hanyu + "<br>");
$('questionDivIdHTMLwithHash').append("<input type='radio' name='question<script>questionNum</script>Choice' value='<script>choices[3].hanyu</script>'></input> " + choices[3].hanyu + "<br>");
};
var fillOutQuiz = function() {
for (questionAmount; questionAmount > 0; questionAmount--) {
fillInQuestion();
questionNum += 1;
}
};
I've gotten this code to work, but I broke it, when trying to add the dynamic ID and loop it.
You are saying that this portion of code is not working:
$('#questionArea').append("<div class='questionDiv'></div>");
$('#questionArea:last-child').attr("id", questionDivIdHTML);
Well, it does not work because the :last-child pseudo selector is used incorrectly (see below). It should be:
$('#questionArea').append("<div class='questionDiv'></div>");
$('#questionArea > :last-child').attr("id", questionDivIdHTML);
Or better, you can rearrange your code like this:
$("<div class='questionDiv'></div>")
.attr("id", questionDivIdHTML)
.appendTo("#questionArea");
#questionArea:last-child selects an element with id = questionArea which is also the last child of its parent
#questionArea > :last-child selects the last child of an element with id = questionArea
I have written a script that creates a number of fields based on a number the user inputs (k).
I originally wrote a script that would create the correct number of fields. However I wanted to arrange them like vectors on the screen, so I adapted my script.
I wanted the following script to create the correct number of fields and place them in DIVS, so I could lay them out as I wish on the page.
Since doing this, the script now produces duplicate DIVS as iff it runs through the loop twice, but I can't for life of me work out why...
function createFields(k)
{
k=k+1
for (var n=1; n<k; n++) {
var makeBox=document.createElement("div");
makeBox.id = "box" + n;
document.getElementById("top").appendChild(makeBox);
document.getElementById("box" + n).setAttribute('class',"box");
var addOpen=document.createElement("div");
addOpen.id = "open"+n;
document.getElementById("box" + n ).appendChild(addOpen);
document.getElementById("open" + n).setAttribute('class',"open");
var vectorBox=document.createElement("div");
vectorBox.id = "vector" + n;
document.getElementById("box" + n).appendChild(vectorBox);
document.getElementById("vector" + n).setAttribute('class',"vect");
var xVector=document.createElement("div");
xVector.id = "top" + n;
document.getElementById("vector" + n).appendChild(xVector);
document.getElementById("top" + n).setAttribute('class',"xVect");
var newx=document.createElement("input");
newx.id = "x" + n;
document.getElementById("top" + n).appendChild(newx);
document.getElementById("x" + n).setAttribute('name',"x" + n);
document.getElementById("x" + n).setAttribute('type',"text");
document.getElementById("x" + n).setAttribute('size',"4");
document.getElementById("x" + n).setAttribute('maxlength',"4");
var yVector=document.createElement("div");
yVector.id = "bottom" + n;
yVector.class = "yVect";
document.getElementById("vector" + n).appendChild(yVector);
document.getElementById("bottom" + n).setAttribute('class',"yVect");
var newy=document.createElement("input");
newy.id = "y" + n;
document.getElementById("bottom" + n).appendChild(newy);
document.getElementById("y" + n).setAttribute('name',"y" + n);
document.getElementById("y" + n).setAttribute('type',"text");
document.getElementById("y" + n).setAttribute('size',"4");
document.getElementById("y" + n).setAttribute('maxlength',"4");
var addClose=document.createElement("div");
addClose.id = "close"+n;
document.getElementById("box" + n ).appendChild(addClose);
document.getElementById("close" + n).setAttribute('class',"close");
}
}
Any clues?
UPDATED:
The Code is called via another function:
function getVectors()
{
v = document.getElementById("vectorN").value;
v=parseInt(v); //turn the text into an integer
document.getElementById("q1").innerHTML="Enter your Vectors below!";
createFields(v);
document.getElementById("enter").innerHTML="<input type=\"button\" id=\"button\" value=\"Submit Numbers\" onclick=\"canvas()\"/>";
}
Which is called by onchange in the html:
<p id="q1">How many Vectors will you need?
<input id="vectorN" name="vectorN" type="text" onChange="getVectors()" size="4" maxlength="4">
</p>
Further UPDATE
After checking the console.log,
the only place that calls createFields() is the getVectors() function. It does appear to be calling createFields twice (despite only doing so once in the script).
The ONLY place that calls getVectors() is the onChange event in the input field.
Is it possible that when I change the innerHTML and remove the input field that this is being registered as an onChange event and calling the function again?
Your function looks fine. aren't you just calling the function twice? Do a console.log right after function createFields(k) { to check if that's the case. Maybe 2 event listeners on the field where the user inputs k (onkeyup, change)?
If you're not sure where you call createFields from. Do a find in all files and look for createFields. Add a console.log('Calling createFields from here'); just before you call createFields.
This SO Question sheds some light on the problem. I'd been tabbing out of the text box, which only triggers the onChange event once. Pressing enter fires it twice, which is the problem you were getting.
There are a couple of ways to get around this. I've chosen to keep track of the number of fields entered. If this changes, generate the fields. If not do nothing.
var fields = 0;
function createFields(k) {
if (k != fields) {
fields = k;
console.log("Fields: " + k);
//Rest of the code the same;
}
}
Demo: http://jsfiddle.net/Ej8Ly/5/
You could also do something similar in the getVectors() function instead.
Rather than "creating" all the elements with the DOM why not build a "string" and then set a container objects .innerHTML = the_string value? This way it won't matter if the function gets called twice because it will simply overwrite itself the second time and produce the same output.
I have a small piece of code that is writing some values into a textarea inside a form. The write whenever I click a button. However if I click the button more than once they will write over and over. I need to be able to click the button multiple times (for example if the user changes a value) and have the values that I am writing simply refresh rather than repeat. Here is what I have...
var endwallPanelLengths = [totalHeightInches];
var i = 0;
while (endwallPanelLengths[i] > eaveInches)
{
endwallPanelLengths.push(endwallPanelLengths[i] - peakHeightDecrease);
document.getElementById("test83").value += "4 - " + endwallPanelLengths[i] + "\n";
i++;
}
When I click the button the first time the values are correct however they write again after everytome i click it?
In this line:
document.getElementById("test83").value += "4 - " + endwallPanelLengths[i] + "\n";
you're appending a value to test83. Presumably (since I can't see your html!!!) you just need to remove the + from the +=.
EDIT: in case you want to append all of the values in your loop, and nothing else, simply clear the value before you enter your loop and leave the +=
document.getElementById("test83").value = "";
var endwallPanelLengths = [totalHeightInches];
......
I think you want to do the whole iteration when the user change a value. Then you just need to reset the value of the textarea to empty before the loop. Something like this:
var endwallPanelLengths = [totalHeightInches];
var i = 0;
document.getElementById("test83").value = ''; //Reset the value
while (endwallPanelLengths[i] > eaveInches) {
endwallPanelLengths.push(endwallPanelLengths[i] - peakHeightDecrease);
document.getElementById("test83").value += "4 - " + endwallPanelLengths[i] + "\n";
i++;
}
I have worked out a demo page. Hope that is what you are after.
Try this:
var endwallPanelLengths = [totalHeightInches];
var i = 0;
document.getElementById("test83").value = '';
while (endwallPanelLengths[i] > eaveInches)
{
endwallPanelLengths.push(endwallPanelLengths[i] - peakHeightDecrease);
document.getElementById("test83").value += "4 - " + endwallPanelLengths[i] + "\n";
i++;
}
I'm assuming that all the code is executed eacht time you click the button, am I right ?
you need to implement a clickEventhandler that checks whether or not your texts exists.....