Adding detailed input forms to quiz results with Javascript - javascript

I currently have an online quiz in the making. The current code works fine, but I would like to see who scored what. I am still extremely new to Javascript, and I have been building this quiz for a friend. I have learned quite a bit just getting this thing to work.
Could someone please point me in the right direction on how to add a simple text input or two that will show up when the results page is called at the end of the questions array
I would like to be able to have the user input their name, and submit it along with the results using the php mailer.
I tried to add a simple html input field like below in the HTML area, but it never produced any results.
<input name="Name" type="text" value="" size="80">
Here is my fiddle to see my setup:
var allQuestions = [{
question: "Anger can be thought of as a like other feelings and emotions.",
choices: ["Emotion", "Wave length", "Continuum", "Exercise"],
correctAnswer: 2
}, {
question: "Strong, silent type of personality will usually when things finally overwhelm him.",
choices: ["Explode", "Implode", "Leave", "Cry"],
correctAnswer: 0
}, {
question: "People that complain about everything, and see themselves as victims, fit the personality type called.",
choices: ["Prosecutor", "Grouch", "Exterminator", "Terminator"],
correctAnswer: 1
}, {
question: "When someone wants to point out the faults in others, in order to shift blame off of himself, he is probably a",
choices: ["Displacer", "Intimidator", "Prosecutor", "grouch"],
correctAnswer: 2
},
{
question: "The type of personality takes his anger out on people or things he views as “less threatening” than the person he is actually mad at.",
choices: ["Grouch", "Displacer", "Prosecutor", "Coward"],
correctAnswer: 1
},
{
question: "The easiest type of anger personality to spot is usually the. Often these types come from abusive backgrounds.",
choices: ["Intimidator", "Grouch", "Displacer", "Prosecutor"],
correctAnswer: 0
},
{
question: "Anger has a medical definition, saying it is an state that ranges from to intense fury and rage.",
choices: ["Mental State Embarrassment", "Emotional State Mild Irritation", "Exhausted State Yawning", "Typical State Relaxing"],
correctAnswer: 1
},
{
question: "Anger is often compared to a",
choices: ["Flock of Geese", "Chord of Wood", "Pressure Cooker", "Bag of Ice"],
correctAnswer: 2
},
{
question: "Anger and rage can become a form of . These people are known as rageaholics.",
choices: ["Addiction", "Skin Disease", "Problem", "Comfort Zone"],
correctAnswer: 0
},
{
question: "First rule When you are don’t say anything!",
choices: ["Right", "Wrong", "Angry", "Confused"],
correctAnswer: 2
},
{
question: "Many times, we feel angry because a situation seems negative, and seems to clash with our.",
choices: ["Belief System", "Current Plans", "Family Members", "Schedule"],
correctAnswer: 0
},
{
question: "Many people carry beliefs, that keep them feeling victimized all of the time.",
choices: ["Stoic", "Unusual", "Irrational", "Western"],
correctAnswer: 2
},
{
question: "To contain anger, all we have to do is learn to view life from a perspective.",
choices: ["Personal", "Different", "Closed", "Unknown"],
correctAnswer: 1
},
];
//you can access checkbox name through an array
//match array number to number in allQuestions array
var questionNum = 0;
var scoreNum = 0;
var makeQuestions = "";
var failedQuestions = [];
$(document).ready(function () {
makeQuestions = function () {
if (questionNum === allQuestions.length) {
$("input[value=SUBMIT]").remove();
$("#questions").text(" All Complete!") .append("<br> Please click the button below to submit your results.") .append("<br>Your score is" + " " + scoreNum);
$("#questions").append("<br><input type='button' id='submit_answers' value='SUBMIT'><br><br>");
$("#answers_correct").val(scoreNum);
$("#questions").append("Failed questions: " + failedQuestions.join());
} else {
$("#questions").text(allQuestions[questionNum].question);
for (var i = 0; i < allQuestions[questionNum]['choices'].length; i++) {
$('#words').append('<input type="radio" name="buttons">' + allQuestions[questionNum]['choices'][i] + '</input');
}
}
}
makeQuestions();
$('#submit_answers').on('click', function () {
$('#answer_submission_form').submit();
});
});
var checkQuestions = function () {
var lenG = document.getElementsByName("buttons").length;
console.log(lenG);
var rightAnswer = allQuestions[questionNum]['correctAnswer'];
for (var i = 0; i < lenG; i++) {
if (document.getElementsByName("buttons")[i].checked === true) {
console.log(i);
console.log(document.getElementsByName("buttons")[i].checked);
//compare value to what was inputted
if (i === rightAnswer) {
scoreNum += 1;
alert("Correct! Your score is" + " " + scoreNum);
} else {
failedQuestions.push(questionNum);
alert("False! Your score is still" + " " + scoreNum);
}
}
}
questionNum = questionNum + 1;
$("#words").empty();
makeQuestions();
}

I'm not sure if this is what you need but I have added a fiddle:
http://jsfiddle.net/5Jjam/40/
I have added a div with the id='name'. This contains an input field for entering your text. This will be shown when all the answers have been submitted.

Related

Chart.js using the value of certain data in external json file

I'm working on this self exploration which I want to show a chart that shows how many anime that have comedy genre or fantasy genre. The data for my chart is going to be an external json file (anime.json) on my computer and it's not yet contain the total of how many anime that have comedy or fantasy genre, so I need to do some loop to know that. I try this to make it happen by trying with this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<canvas id="myChart"></canvas>
</div>
<script>
let data;
$.getJSON("anime.json", function(json){
data = json;
});
let comedy = 0;
let fantasy= 0;
for (i = 0; i < data.length; i++)
{
let genres = data[i]['genres']
for (j = 0; j < genress.length; j++)
{
let value = genres[j].trim()
if (value.toLowerCase() == 'comedy')
{
comedy = comedy +1;
}
if (value.toLowerCase() == 'fantasy')
{
fantasy = fantasy + 1;
}
}
}
let myChart = document.getElementById('myChart').getContext('2d');
let massPopChart = new Chart(myChart, {
type: 'bar',
data: {
labels:['Comedy', 'Super Natural'],
datasets:[{
label : 'Genre',
data: [
comedy,
superNatural
],
}]
},
options : {},
});
</script>
</body>
</html>
But when I open this html on my browser, It came up empty so I'm wondering what is the correct way to do it. And this is my json file (and I have like 25 or 30 of them):
[
{
"cover_title": "Haikyuu!! TO THE TOP",
"cover_studio": "Production I.G",
"cover_img": "https://s4.anilist.co/file/anilistcdn/media/anime/cover/large/bx106625-UR22wB2NuNVi.png",
"format": "TV",
"duration": "84%",
"description": "The fourth season of Haikyuu!!\n\nThe Karasuno High School Volleyball Club finally won their way into the nationals after an intense battle for the Miyagi Prefecture Spring Tournament qualifiers. As they were preparing for the nationals, Kageyama is invited to go to All-Japan Youth Training Camp. At the same time, Tsukishima is invited to go to a special rookie select training camp for first-years in Miyagi Prefecture. Hinata feels panic that he\u2019s being left behind as one of the first-years and then decides to show up at the Miyagi Prefecture rookie select training camp anyway...\n\n(Source: Crunchyroll)",
"genres": [
"Comedy ",
" Drama ",
" Sports"
]
},
{
"cover_title": "Eizouken ni wa Te wo Dasu na!",
"cover_studio": "Science SARU",
"cover_img": "https://s4.anilist.co/file/anilistcdn/media/anime/cover/large/bx109298-YvjfI88hX76T.png",
"format": "TV",
"duration": "79%",
"description": "First year high schooler Midori Asakusa loves anime so much, she insists that \"concept is everything\" in animation. Though she draws a variety of ideas in her sketchbook, she hasn't taken the first step to creating anime, insisting that she can't do it alone. The producer-type Sayaka Kanamori is the first to notice Asakusa's genius. Then, when it becomes clear that their classmate, charismatic fashion model Tsubame Mizusaki, really wants to be an animator, they create an animation club to realize the \"ultimate world\" that exists in their minds.\n\n(Source: Crunchyroll)",
"genres": [
"Adventure ",
" Comedy"
]
},
{
"cover_title": "Made in Abyss: Fukaki Tamashii no Reimei",
"cover_studio": "Kinema Citrus",
"cover_img": "https://s4.anilist.co/file/anilistcdn/media/anime/cover/large/bx100643-fPH9OgEKKvcI.jpg",
"format": "Movie",
"duration": "78%",
"description": "Dawn of the Deep Soul continues the epic adventure of plucky Riko and Reg who are joined by their new friend Nanachi. Together they descend into the Abyss\u2019 treacherous fifth layer, the Sea of Corpses, and encounter the mysterious Bondrewd, a legendary White Whistle whose shadow looms over Nanachi\u2019s troubled past. Bondrewd is ingratiatingly hospitable, but the brave adventurers know things are not always as they seem in the enigmatic Abyss...\n\n(Source: Sentai Filmworks)",
"genres": [
"Adventure ",
" Fantasy ",
" Sci-Fi ",
" Drama"
]
}]
Thank you!
Your code seems to be fine, the only thing I can see is you are not handling the callback properly. The code you have written after $.getJSON should be placed inside the callback function. As because of the async behavior your data is set after other codes are executed. If you open console you may see error as cannot read property length of undefined as initially, the data is undefined.
Below snippet should fix your problem.
<script>
$.getJSON("anime.json", function (json) {
const data = json;
let comedy = 0;
let fantasy = 0;
for (i = 0; i < data.length; i++) {
let genres = data[i]["genres"];
for (j = 0; j < genress.length; j++) {
let value = genres[j].trim();
if (value.toLowerCase() == "comedy") {
comedy = comedy + 1;
}
if (value.toLowerCase() == "fantasy") {
fantasy = fantasy + 1;
}
}
}
let myChart = document.getElementById("myChart").getContext("2d");
let massPopChart = new Chart(myChart, {
type: "bar",
data: {
labels: ["Comedy", "Super Natural"],
datasets: [
{
label: "Genre",
data: [comedy, superNatural],
},
],
},
options: {},
});
});
</script>

Attempting to dynamcially append innerText to label elements from array

I am working on my second ever Javascript project. As you can imagine, since I am still finding my feet with building projects, there are quite a few errors which I am running into (and learning from).
Let me just quickly explain what stage I am at in building the family quiz and what the problem is. I have created an array of objects which stores questions, choices and answers within each index of the array.
When the quiz starts up, there is an intro screen displaying the rules etc. The user then clicks on a "start quiz" button which transitions the screen to the first question.
The user then selects the correct answer and clicks next question. This is the stage I am at currently.
What I am trying to simply do is append the next 'choices' into the label elements. But when I click it nothing happens. Obviously I am doing something wrong.
Please can someone assist?
Many thanks!
EDIT I have been informed by a response that there was a syntax error in my forEach loop which appends the next 'choices' to the label elements. I have corrected that. However, what I am finding now is that it is only appending the first index value of every 'choices' array to every label button.
$(document).ready(function(){
var azeem = [
{
question: "What is Azeem's favourte color?",
choices: ["blue", "yellow", "red", "green"],
answer: 0
},
{
question: "What is Azeem's favourte movie?",
choices: ["Scarface", "The Terminator", "Shawshank Redemption", "The Dark Knight"],
answer: 3
},
{
question: "What was Azeem's first ever job role?",
choices: ["Cleaner", "Store Assistant", "Sales", "Admin"],
answer: 1
},
{
question: "What is Azeem's favourite dish?",
choices: ["Pasta", "Pizza", "Chips", "Curry"],
answer: 0
},
{
question: "What subject did Azeem enjoy the most in school?",
choices: ["Drama", "Science", "P.E", "History"],
answer: 0
},
{
question: "What subject did Azeem least enjoy in school?",
choices: ["Geography", "Maths", "History", "I.T"],
answer: 1
},
{
question: "Which one of these cities has Azeem travelled to?",
choices: ["Madrid", "Lisbon", "Istanbul", "Dublin"],
answer: 1
},
{
question: "Which college did Azeem study in?",
choices: ["NewVic", "Redbridge", "East Ham", "Barking"],
answer: 3
},
{
question: "Who is Azeem's favourite sports icon?",
choices: ["Eric Cantona", "Muhammad Ali", "Cristiano Ronaldo", "Prince Naseem"],
answer: 1
},
{
question: "Who is Azeem's favourite music artist?",
choices: ["Michael Jackson", "Eminem", "Drake", "Linkin Park"],
answer: 1
},
];
var currentQuestion = 0;
var questionNumberCounter = 1;
var questionNumber = document.getElementById("questionCount");
var choices = document.getElementById("choicesSection");
var questions = document.getElementById("ques");
questions.innerText = azeem[currentQuestion].question;
// The following event listener will transition from the instructions to the first question of the quiz
document.getElementById("startquiz").addEventListener("click",function(){
$(".quiz-intro").fadeOut(600);
$(".quiz-section").delay(600).slideDown("slow");
questionNumber.innerText = questionNumberCounter;
azeem[currentQuestion].choices.forEach(function(value){
var radio = document.createElement("input");
var label = document.createElement("label");
var div = document.createElement("div");
$(div).addClass("choice");
radio.setAttribute("type", "radio");
radio.setAttribute("name", "answer");
radio.setAttribute("value", value);
var radioID = 'question-'+currentQuestion;
radio.setAttribute('id', radioID) ;
label.setAttribute("for", radioID);
label.innerHTML = value +"<br>";
choices.appendChild(div);
div.appendChild(radio);
div.appendChild(label);
})
})
document.getElementById("submitanswer").addEventListener("click",function(){
questionNumberCounter++;
questionNumber.innerText = questionNumberCounter;
currentQuestion++
questions.innerText = azeem[currentQuestion].question;
azeem[currentQuestion].choices.forEach(function(value){
var labels = document.getElementsByTagName("label");
var labelCounter = 0;
while (labelCounter < 5){
labels[labelCounter].innerText = value;
labelCounter++;
}
}
})
});
HTML:
<div class="container">
<h1 class="text-center">FAMILY QUIZ</h1>
<h4 class="text-center">YOU HAVE CHOSEN AZEEM!</h4>
<div class="row text-center quizSection">
<div class="col-md-4 image-section">
<img src="images/3.jpg" id="azeem" class="img-responsive img-thumbnail">
</div>
<div class="col-md-8 quiz-intro">
<h2>INSTRUCTIONS</h2>
<ul id="instructions">
<li>This is a multiple choice quiz</li>
<li>There is only one correct answer per question</li>
<li>At the end of the quiz you will be shown your total score which will reflect the amount of questions answered correctly</li>
<li>There are no hints available during the process of the quiz</li>
<li>Click the 'Start Quiz' button to begin</li>
</ul>
<button id="startquiz" class="btn-small btn-success">START QUIZ</button>
</div>
<div class="col-md-8 quiz-section">
<h5>Question <span id="questionCount">1</span> of 15</h5>
<p class="text-center" id="ques"></p>
<div id="choicesSection">
</div>
<input type="submit" id="submitanswer" value="Submit Answer" class="btn-small btn-success">
</div>
</div>
Okay so first things first, you were missing a closing parens )
The bigger issue with your code lay within two things. First, this for loop is causing an issue where every choice you iterate over you are renaming every label that name. Why? The code below goes through each choice, sure, but it then loops over every label and redefines the label's text as that choice. Take a look:
azeem[currentQuestion].choices.forEach(function(value) {
var labels = document.getElementsByTagName("label");
var labelCounter = 0;
while (labelCounter < 5) {
labels[labelCounter].innerText = value;
labelCounter++;
}
});
Another thing you'll notice above is that you are specifically saying 5 when really the operand should be checking for an amount that's less than labels.length (this will throw an error, so once we change it we can carry on)
azeem[currentQuestion].choices.forEach(function(value) {
var labels = document.getElementsByTagName("label");
var labelCounter = 0;
while (labelCounter < labels.length) {
labels[labelCounter].innerText = value;
labelCounter++;
}
});
Now you'll see the questions populate with the same possible answer over and over. How do we fix this? Well, first it would pay to get our labels ahead of the loop since the elements themselves aren't being moved or deleted(we're just changing their text property) otherwise we're wasting resources grabbing the same elements over and over again.
Secondly forEach comes with a handy parameter called index that is automatically supplied to the callback function. a.e. forEach(item, indexOFItem) - this means that we can eliminate your while loop entirely and just change the label corresponding to the index of the choice.
var labels = document.getElementsByTagName("label");
azeem[currentQuestion].choices.forEach(function(value, ind) {
labels[ind].innerText = value;
});
Edit As pointed out in the comments, you're also going to want to check if the current question exists before loading it. A quick and dirty test for this with your current code is to simply check if the question exists in your object. There are better ways to make sure. You want to avoid static values when it comes to dynamic objects/arrays. As an example the labels issue above where you had set it to check if it was < 5 (less than 5). We changed this to labels.length to dynamically check the length instead of assuming it would always be 5. In the case of the question number, you have 15 questions stated, but that's not dynamic. A better way would be to check against azeem.length if you know that every object within azeem is a question. However, as I'm not sure, a quick fix is the following:
if (azeem[currentQuestion]) {
questions.innerText = azeem[currentQuestion].question;
var labels = document.getElementsByTagName("label");
azeem[currentQuestion].choices.forEach(function(value, ind) {
labels[ind].innerText = value;
});
} else {
alert("no more questions");
}
If you change these things the code will run as follows:
$(document).ready(function() {
var azeem = [{
question: "What is Azeem's favourte color?",
choices: ["blue", "yellow", "red", "green"],
answer: 0
}, {
question: "What is Azeem's favourte movie?",
choices: ["Scarface", "The Terminator", "Shawshank Redemption", "The Dark Knight"],
answer: 3
}, {
question: "What was Azeem's first ever job role?",
choices: ["Cleaner", "Store Assistant", "Sales", "Admin"],
answer: 1
}, {
question: "What is Azeem's favourite dish?",
choices: ["Pasta", "Pizza", "Chips", "Curry"],
answer: 0
}, {
question: "What subject did Azeem enjoy the most in school?",
choices: ["Drama", "Science", "P.E", "History"],
answer: 0
}, {
question: "What subject did Azeem least enjoy in school?",
choices: ["Geography", "Maths", "History", "I.T"],
answer: 1
}, {
question: "Which one of these cities has Azeem travelled to?",
choices: ["Madrid", "Lisbon", "Istanbul", "Dublin"],
answer: 1
}, {
question: "Which college did Azeem study in?",
choices: ["NewVic", "Redbridge", "East Ham", "Barking"],
answer: 3
}, {
question: "Who is Azeem's favourite sports icon?",
choices: ["Eric Cantona", "Muhammad Ali", "Cristiano Ronaldo", "Prince Naseem"],
answer: 1
}, {
question: "Who is Azeem's favourite music artist?",
choices: ["Michael Jackson", "Eminem", "Drake", "Linkin Park"],
answer: 1
}, ];
var currentQuestion = 0;
var questionNumberCounter = 1;
var questionNumber = document.getElementById("questionCount");
var choices = document.getElementById("choicesSection");
var questions = document.getElementById("ques");
questions.innerText = azeem[currentQuestion].question;
// The following event listener will transition from the instructions to the first question of the quiz
document.getElementById("startquiz").addEventListener("click", function() {
$(".quiz-intro").fadeOut(600);
$(".quiz-section").delay(600).slideDown("slow");
questionNumber.innerText = questionNumberCounter;
azeem[currentQuestion].choices.forEach(function(value) {
var radio = document.createElement("input");
var label = document.createElement("label");
var div = document.createElement("div");
$(div).addClass("choice");
radio.setAttribute("type", "radio");
radio.setAttribute("name", "answer");
radio.setAttribute("value", value);
var radioID = 'question-' + currentQuestion;
radio.setAttribute('id', radioID);
label.setAttribute("for", radioID);
label.innerHTML = value + "<br>";
choices.appendChild(div);
div.appendChild(radio);
div.appendChild(label);
})
})
document.getElementById("submitanswer").addEventListener("click", function() {
questionNumberCounter++;
questionNumber.innerText = questionNumberCounter;
currentQuestion++;
if (azeem[currentQuestion]) {
questions.innerText = azeem[currentQuestion].question;
var labels = document.getElementsByTagName("label");
azeem[currentQuestion].choices.forEach(function(value, ind) {
labels[ind].innerText = value;
});
} else {
alert("no more questions");
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h1 class="text-center">FAMILY QUIZ</h1>
<h4 class="text-center">YOU HAVE CHOSEN AZEEM!</h4>
<div class="row text-center quizSection">
<div class="col-md-4 image-section">
<img src="images/3.jpg" id="azeem" class="img-responsive img-thumbnail">
</div>
<div class="col-md-8 quiz-intro">
<h2>INSTRUCTIONS</h2>
<ul id="instructions">
<li>This is a multiple choice quiz</li>
<li>There is only one correct answer per question</li>
<li>At the end of the quiz you will be shown your total score which will reflect the amount of questions answered correctly</li>
<li>There are no hints available during the process of the quiz</li>
<li>Click the 'Start Quiz' button to begin</li>
</ul>
<button id="startquiz" class="btn-small btn-success">START QUIZ</button>
</div>
<div class="col-md-8 quiz-section">
<h5>Question <span id="questionCount">1</span> of 15</h5>
<p class="text-center" id="ques"></p>
<div id="choicesSection">
</div>
<input type="submit" id="submitanswer" value="Submit Answer" class="btn-small btn-success">
</div>
</div>

Looping javascript object to print data

I have a javascript object that I would like to traverse and print data based off 1 common category.
Javascript object:
var $states = {
"AL" : {
"longname": "Alabama",
"lawOne": "Alabama Law 1",
"lawTwo": "Alabama Law 2",
"lawThree": "Alabama Law 3",
"region" : "Southeast"
},
"AK" : {
"longname": "Alaska",
"lawOne": "Alaska Law 1",
"lawTwo": "Alaska Law 2",
"lawThree": "Alaska Law 3",
"region" : "Northwest"
},
"AZ" : {
"longname": "Arizona",
"lawOne": "Arizona Law 1",
"lawTwo": "Arizona Law 2",
"lawThree": "Arizona Law 3",
"region" : "Southwest"
},
etc...
}
I am able too loop the array and get as granular as getting the console to log all of the states that are in the same region:
for (var key in $states) {
if ($states.hasOwnProperty(key)) {
var $getStateRegion = $states[key].region
if ($getStateRegion === "Northeast") {
console.log ($states[key].longname);
}
}
}
Once I try to loop through those and print a table with that data is where I am running into an issue. I want to be able to have a withthe 's longname, lawOne, lawTwo, and lawThree values input in there. What gives? Once I try running a for loops through this is where I'm hitting a roadblock. Thanks in advance!
Try the working code below.
var $states = {
"AL" : {
"longname": "Alabama",
"lawOne": "Alabama Law 1",
"lawTwo": "Alabama Law 2",
"lawThree": "Alabama Law 3",
"region" : "Southeast"
},
"AK" : {
"longname": "Alaska",
"lawOne": "Alaska Law 1",
"lawTwo": "Alaska Law 2",
"lawThree": "Alaska Law 3",
"region" : "Northwest"
},
"AZ" : {
"longname": "Arizona",
"lawOne": "Arizona Law 1",
"lawTwo": "Arizona Law 2",
"lawThree": "Arizona Law 3",
"region" : "Southwest"
}
};
var result = {};
Object.keys($states).forEach(function(key) {
if ($states[key]["region"] === "Southwest") {
result[key] = $states[key];
}
});
console.log(result);
You are on the right track. Before I continue, I would like to point out that you are using a for..in loop, but newer versions of Javascript support the for..of loop also, so this is something you may want to consider. The difference is that the for..in loop gives you the keys of the object, and the for..of loop gives you the values, so it shortens the code by skipping the step where you write something to the effect of:
for( var index in array ){
var currentObject = array[ index ];
}
The secret to your solution is in how you handle the DOM, and there are many ways to do this. I will show you one, but it is not necessarily the fastest or the best. I recommend playing around with different DOM manipulations to find the one that works best for you.
First, we know how to get a record, so the javascript aspect of looping, you have that handled...
Next, we need to create the table.... I will assume that you want four columns based on your description, but you could easily adjust this to put the state name and one law on each line, which would probably be a better design allowing a variable number of laws.
The html would look something like this:
<table>
<tr><th>State</th><th>Law 1</th><th>Law 2</th><th>Law 3</th></tr>
<!-- Here is where we would create new html for each state -->
</table>
Your loop then would need to add to this html by creating several lines that appear as:
<tr><td>[State]</td><td>[Law1]</td><td>[Law2]</td><td>[Law3]</td><tr>
We will use string manipulation of the DOM, because it is a good place to start, because it is most similar to what you would write by hand.
We will break the table into three parts: the header, the body and the footer.
var header = "<table><tr><th>State</th><th>Law 1</th><th>Law 2</th><th>Law 3</th></tr>";
var body = ""; //this is where we add the data
var footer = "</table>";
Now, on the loop, we will create each line as needed and add it to the body:
for( var index in stateObj ){
...error checking occurs here...
var state = stateObj[ index ];
var stateColumn = "<td>" + state.longname + "</td>";
var law1Col = "<td>" + state.lawOne + "</td>";
var law2Col = "<td>" + state.lawTwo + "</td>";
var law3Col = "<td>" + state.lawThree + "</td>";
var row = "<tr>" + stateColumn + law1Col + law2Col + law3Col + "</tr>";
//now that we have a row, we add it to the body
body += row; //same as body = body + row;
}
After we have the body, we can make our table by combining the header, body and footer:
var tableHTML = header + body + footer;
And then we find a place to inject it into our document:
var outputDiv = document.getElementById( "stateTableData" );
outputDiv.innerHTML = tableHTML;
Here is a live example:
var states = {
PA: {
longname:"Pennsylvania",
lawOne:"It is illegal to sing in the shower in apartment buildings within the city limits of Philadelphia",
lawTwo:"All motorists are required to stop the vehicle for passing horsemen. The vehicle shall be covered with camoflage so as not to scare the horses.",
lawThree:"Any house having more than four women occupants shall be considered a brothel and shall be in violation of the law."
},
NJ: {
longname:"New Jersey",
lawOne:"There is no such thing as the Mafia",
lawTwo:"Any reference to the denizens of New Jersey shall be derogatory and degrading, think Jersey Shore",
lawThree:"There is no escape from New Jersey and we are not a suburb of NYC"
},
VA: {
longname:"Virginia",
lawOne: "Civil War re-enactments must have the North as the victor.",
lawTwo: "All roads shall end in Richmond, VA",
lawThree: "I have run out of silly ideas for this example."
}
};
function buildTableForState( stateNames ){
var stateList = stateNames.split(",");
//remove spaces
for( var i in stateList ){ stateList[i] = stateList[i].trim(); }
//initialize table parts
var header = "<table><tr><th>State</th><th>Law 1</th><th>Law 2</th><th>Law 3</th></tr>";
var footer = "</table>";
var body = "";
//build body
for( var index in states ){
if( stateList.indexOf( index ) !== -1 ){
var currentState = states[index];
body += buildRowForState( currentState );
}
}
//compose and inject table
var tableHTML = header + body + footer;
var documentOut = document.getElementById( "outputDiv" );
documentOut.innerHTML = tableHTML;
}
function submitTable(value){
buildTableForState( value );
}
function buildRowForState( currentState ){
var state = makeTableCol( currentState.longname );
var law1 = makeTableCol( currentState.lawOne );
var law2 = makeTableCol( currentState.lawTwo );
var law3 = makeTableCol( currentState.lawThree );
var row = makeTableRow( [state, law1, law2, law3] );
return row;
}
function makeTableCol( stringText ){
return "<td>" + stringText + "</td>";
}
function makeTableRow( arrayColumns ){
return "<tr>" + arrayColumns.join("") + "</tr>";
}
<h1>Table Loader</h1>
<form>
<p>Use the values "PA", "NJ", and "VA" to generate a table. You can use more than one value by separating them with a comma.</p>
<input type="text" id="stateNames" name="stateNames" /><br/>
<button onclick="submitTable(stateNames.value);">Build Table</button>
<p>Try:
</p>
<ul>
<li>PA</li>
<li>NJ,VA</li>
<li>VA,PA,NJ</li>
</ul>
</form>
<h1>Table Output appears here</h1>
<div id="outputDiv"></div>
NOTE: Regarding the live code, the HTML is bigger than the display box. In my browser I have to scroll down on the snippit HTML to view the generated table. Either that or expand the snippit window to a full tab to view it in a larger screen.
The above code is simplified, and most coders would tell you not to use HTMLElement.innerHTML, because it is slow, but it is a good place to start. Once you have this down, start practicing with document.create( tagName ), and then use more direct DOM manipulations.

Checking on which position is a variable in javascript array

So here is my JavaScript array:
var champions = {
"Aatrox":["Blood Well","Dark Flight", "No Q2", "Blood Thirst", "Blood Price", "Blades of Torment", "No E2", "Massacre"],
"Ahri":["Essence Theft","Orb of Deception", "Fox-Fire", "Charm", "Spirit Rush"],
"Akali":["Twin Disciplines", "Mark of the Assassin", "Twilight Shroud", "Crescent Slash", "Shadow Dance"],
"Alistar":["Trample","Pulverize","Headbutt","Triumphant Roar","Unbreakable Will"],
"Amumu":["Cursed Touch","Bandage Toss","Despair","Tantrum","Curse of the Sad Mummy"]
};
Now I get a variable from a PHP form with champion name so e.g. Akali and also with a spell name so e.g. Twin Disciplines now I want to check if that spell and champion exists in my array and if so on which position it is so:
var championName = echo $champion;
var Spell = echo $championSpells[1][$j];
if($.inArray(championName, champions)==-1){
var existsInArray = false;
} else{
var existsInArray = true;
}
And at this point im really confused Spell is = 'Twin Disciplnes' championName is = 'Akali' so with those examples I would want to retrive 1 if it was for example 'Mark of the Assassin' I would want to retrieve 2 because it is 2nd in order.
In Javascript you can use Array.prototype.indexOf() for the search of an item in an array. The result is the index starting with 0. If not found, the -1 is returned.
var champions = {
"Aatrox": ["Blood Well", "Dark Flight", "No Q2", "Blood Thirst", "Blood Price", "Blades of Torment", "No E2", "Massacre"],
"Ahri": ["Essence Theft", "Orb of Deception", "Fox-Fire", "Charm", "Spirit Rush"],
"Akali": ["Twin Disciplines", "Mark of the Assassin", "Twilight Shroud", "Crescent Slash", "Shadow Dance"],
"Alistar": ["Trample", "Pulverize", "Headbutt", "Triumphant Roar", "Unbreakable Will"],
"Amumu": ["Cursed Touch", "Bandage Toss", "Despair", "Tantrum", "Curse of the Sad Mummy"]
};
function getPos(o,n, s) {
return n in o && o[n].indexOf(s);
}
document.write(getPos(champions, 'Akali', 'Twin Disciplines') + '<br>');
document.write(getPos(champions, 'Akali', 'Mark of the Assassin') + '<br>');

Making a quiz with Javascript. Getting array values from and object.

Im trying to create a simple quiz with Javascript. I am struggling to grasp the concept of how to iterate over the values of an array from an object. I eventually want to display a radio button with its value as the choice of answers. If someone could point me in the right direction i would really appreciate it.
Fiddle: http://jsfiddle.net/Renay/eprxgxhu/
Here is my code:
HTML
<h1> General Knowledge Quiz </h1>
<h2 id='questionTitle'> </h2>
<ul id ='selectionList'> </ul>
<p> Click the next button to go to the next question! </p>
<button type="button" id = nextButton> Next </button>
</div>
Javascript
var allQuestions = [{
question: 'What is the capital city of Australia?',
choices: ['Sydney', 'Melbourne', 'Canberra', 'London'],
correctAnswer: 2
},
{
question: 'Who won the 2014 FIFA World Cup?',
choices: ['Brazil', 'England', 'Germany', 'Spain'],
correctAnswer: 2
},
{
question: 'What book series is authored by J.K Rowling?',
choices: ['Game of Thrones', 'Hunger Games', 'Twilight', 'Harry Potter'],
correctAnswer: 3
},
{
question: 'The Eiffel Tower is located in which following country?',
choices: ['Italy', 'France', 'Iceland', 'Mexico'],
correctAnswer: 1
}];
//Reference to tags
var questionTitle = document.getElementById('questionTitle');
var selectionList = document.getElementById('selectionList');
var nextButton = document.getElementById('nextButton');
//Initiating some variables
var i = 0;
var length1 = allQuestions.length;
var correctAnswer = 0;
function populateQuestion() {}
Firstly attach click event to next button and give call to populateQuestion() using counter to iterate through allQuestions array and use i as counter variable.
nextButton.onclick = function() {
/*itterate through questions*/
if(i>allQuestions.length -1){/*go to first when reached last*/
i=0;
}
populateQuestion(i);
i++;
};
Iterate through allQuestions array for question title and choices as:
function populateQuestion(qNum) {
var individualQuestion = allQuestions[i];
questionTitle.innerText = individualQuestion.question;
selectionList.innerHTML = ""; //reset choices list
for(key in individualQuestion.choices){
var radioBtnName = "question"+i+"_choice";
var choiceText = individualQuestion.choices[key];
selectionList.appendChild(createLi(radioBtnName,choiceText));
}
}
Write dynamic li and radio button creation function as:
function createLi(name, choiceText) {
var e = document.createElement('li');
var radioHtml = '<input type="radio" name="' + name + '"';
radioHtml += '/>';
radioHtml += choiceText;
e.innerHTML = radioHtml;
return e;
}
Please refer to this fiddle for same.
You need to associate an onClick event with your button to call the relevant part of the JavaScript. Go through the example here
On another note, using JavaScript for a quiz might not be a good idea as one can see the answers using view-source. I would suggest using PHP to fetch results from a database.

Categories