How to add open questions with textbox form Javascript - javascript

I am looking to change the following code that I have found and to add questions with textbook or box that the user can fill in the answer in stead of only multiple choice.
How ever, every time I am trying to add if or if else the code goes corrupt. I have copied the code and removed all but 3 questions. how can I modify this?
var quizzes = [
{
name: "test",
questions: [
{
text: "Test1?",
choices: [
{ text: "1", correct: false },
{ text: "2", correct: true },
{ text: "3", correct: false },
],
},
{
text: "test2",
choices: [
{ text: "4", correct: false },
{ text: "5", correct: false },
{ text: "6", correct: true },
],
},
{
text: "Test3",
choices: [
{ text: "7", correct: true },
{ text: "8", correct: false },
{ text: "9", correct: false },
],
},
{
]
// When the document is ready
window.addEventListener('DOMContentLoaded', function() {
var $container = document.getElementById('container');
// Initialize each quiz into the container
quizzes.forEach(function(quiz) { initQuiz(quiz, $container); });
});
function initQuiz(quiz, $container) {
// DOM elements
var $dom = initDOM(quiz, $container),
// Current question index (starts at 0)
num = 0,
score = 0;
nextScreen();
function nextScreen() {
if (num < quiz.questions.length) {
displayQuestion();
} else {
displayEndResult();
}
}
function displayQuestion() {
clearDisplayArea();
var question = quiz.questions[num];
// Display the image if there is one
if (question.image) {
$dom.display.innerHTML = '<img src="' + question.image + '" class="question-img"/>';
}
// Display the question
$dom.display.innerHTML +=
'<p>Q' + (num+1) + ': ' + question.text + '</p>'
+ question.choices.map(function(choice, i) {
return '<label>'
+ '<input type="radio" name="' + quiz.name + '" value="' + i + '"/>'
+ choice.text
+ '</label>';
return '<form>'
+ '<input type = "text" id="textbook" name="' + quiz.name + '" value="' + i + '"/>'
+ textbox.text
+ '</form>' ;
}).join('')
+ '<br>';
// Create Submit button
$submit = document.createElement('button');
$submit.addEventListener('click', onAnswerSubmit);
$submit.innerHTML = 'Submit';
// Add the submit button
$dom.display.appendChild($submit);
}
function onAnswerSubmit() {
// Get the checked radio button
var selectedChoice = $dom.display.querySelector('input:checked');
if (!selectedChoice) {
alert("You need to select an answer");
} else {
// If it's correct
if (quiz.questions[num].choices[selectedChoice.value].correct) {
score++; // Add 1 point to the score
}
num++;
nextScreen();
}
}
function displayEndResult() {
clearDisplayArea();
$dom.display.innerHTML = '<p>End of Quiz</p>'
+ '<p>Congratulations! Your score is: ' + score + '</p>'
+ '<p>If you scored lower than 2, please keep practicing</p>';
}
function clearDisplayArea() {
$dom.display.innerHTML = '';
}
// The "DOM" (Document Object Model) represents HTML elements
function initDOM(quiz, $container) {
// Create frame

So this is one solution, first make sure you have a input box in your html file.
Now with the input box you could give it a class of whatever you want as below
<input class="personAnswer"></input>
Now you could go back to your JS code and add the following
document.getElementById("personAnswer").(WHATEVER YOU WANT TO CHECK FOR)
And that's it!

Related

Add items to JSON object

I'm picking up a JSON object using a promise:
var x = get();
x.done(function(data) {
for(var i in data) {
}
});
which is returning this data when i do console.log(data);
[{…}]
0:
customer: "9028"
data:
active: "1"
customer: "9028"
description: ""
id: "13717"
inherited: "0"
name: "Out of Hours"
priority: "1"
shared: "0"
sound: ""
__proto__: Object
voip_seq: "4"
__proto__: Object
length: 1
__proto__: Array(0)
so that is working fine, but within my for loop, I want to add 2 items to data
I tried adding this into my .done
var obj = { name: "Light" };
data.push(obj);
But that didn't add to data
My for loop looks like this:
for(var i in data) {
var m = '<option value="' + data[i].data.id + '"'
if(data[i].data.id == selected_val) {
m += ' selected="selected"';
}
m += '>' + data[i].data.name + '</option>';
$('#' + value_element_id).append(m);
}
If you want to add two more items to your select, you simply need to push new objects into your data array before your loop starts. The objects must contain the structure and properties ("name" and "id" within a "data" sub-property) matching the JSON coming from the Promise, so that your loop code can process them.
In the simplest case, it could be as straightforward as
x.done(function(data) {
data.push({ "data": { "name": "light", "id": 1234 } });
data.push({ "data": { "name": "dark", "id": 5678 } });
for(var i in data) {
var m = '<option value="' + data[i].data.id + '"'
if (data[i].data.id == selected_val) {
m += ' selected="selected"';
}
m += '>' + data[i].data.name + '</option>';
$('#' + value_element_id).append(m);
}
});
Demo: https://jsfiddle.net/a286b7fw/1/
In this case I think data is not an array so it hasn't .push() method. You can add property to object like this:
for(var i in data) {
var m = '<option value="' + data[i].data.id + '"'
if(data[i].data.id == selected_val) {
m += ' selected="selected"';
}
m += '>' + data[i].data.name + '</option>';
$('#' + value_element_id).append(m);
// here it will add obj to data
var obj = {name: "Light"};
data = {
...data,
obj
}
}

toLocaleString() not working no errors showing up

I'm trying to add commas to the input to both the value integers and the summary number in the middle. I've added
$summaryNumber.toLocaleString();
but nothing works. I'm trying to understand what I'm doing wrong.
here's a fiddle with what I'm working with
https://jsfiddle.net/cmLkbq6e/2/
$(function(){
$("#doughnutChart").drawDoughnutChart([
{ title: "test", value : 150000000, color: "#e65c53" },
{ title: "test", value: 150000000, color: "#26a3b1" },
{ title: "test", value: 250000000, color: "#19818d" },
{ title: "test", value : 200000000, color: "#396b7e" },
{ title: "test", value : 100000000, color: "#a5a5a5" }
]);
});
those are the values I'm trying to target
and here's the summary number I'm trying to target
var $summaryTitle = $('<p class="' + settings.summaryTitleClass + '">' + settings.summaryTitle + '</p>').appendTo($summary);
var $summaryNumber = $('<p class="' + settings.summaryNumberClass + '"></p>').appendTo($summary).css({opacity: 0});
$summaryNumber.toLocaleString();
In the jsFiddle, find the below part of the code and change it,
Here is the updated JsFiddle : https://jsfiddle.net/cmLkbq6e/11/
Previously,
function drawDoughnutText(animationDecimal, segmentTotal) {
$summaryNumber
.css({opacity: animationDecimal})
.text((segmentTotal * animationDecimal).toFixed(1));
}
After Modification,
function drawDoughnutText(animationDecimal, segmentTotal) {
$summaryNumber
.css({opacity: animationDecimal})
.text((segmentTotal * animationDecimal).toLocaleString());
}
The problem is the$summaryNumber is object , it is not number
as I checked it in your code it be to
var $summaryNumber = $('<p class="' + settings.summaryNumberClass + '"></p>').appendTo($summary).css({opacity: 0});
which mean be an Object so your code is not working,
You should do something like:
afterDrawed : function() {
var number = parseFloat($('#doughnutChart .doughnutSummaryNumber').html());
$('#doughnutChart .doughnutSummaryNumber').html(number.toLocaleString());
},

How to read array from html to js

I declare an array with json data, then when I init the array should be read and display on the div.
But now show nothing, can anyone help me check my code, what mistake I have made. Thanks.
JS Fiddle
HTML
<script>
$(function() {
var array = [];
array[0] = {
"no": "1",
"name": "fruit",
"value": "mango",
"totalvote": "75"
};
array[1] = {
"no": "2",
"name": "fruit",
"value": "apple",
"totalvote": "10"
};
array[2] = {
"no": "3",
"name": "fruit",
"value": "orange",
"totalvote": "5"
};
array[3] = {
"no": "4",
"name": "fruit",
"value": "banana",
"totalvote": "45"
};
PG.init("popup_survey_whitebox_selection", "1", array);
PG.callpopup();
PG.render_1();
});
</script>
JS
var PG = {
divid: "",
multiselection: "",
optionitem: [],
/* type:"", */
init: function (divid, multiselection, optionitem) {
/* PG.type = type;*/
PG.divid = divid;
PG.multiselect = multiselection;
PG.optionitem = optionitem;
},
test: function () {
for (var i = 0; PG.optionitem.length > i; i++) {
alert(PG.optionitem[i].name);
}
},
callpopup: function () {
$("#popup_survey_whitebox_content").hide();
var orig = '', // create var to cache the original text
newText = ''; // create var to cache the new Text with "..."
$("label#popup_survey_label_title").text(function (index, currentText) {
orig = currentText;
newText = currentText.substr(0, 30);
if (currentText.length > 30) newText += "...";
return newText;
});
$("#popup_survey_whitebox").hover(function () {
$('#popup_survey_whitebox_content').stop().animate({
opacity: 1,
height: "toggle"
}, 500, function () {
$("label#popup_survey_label_title").text(orig); // Here put the original text.
}).css('position', 'relative');
}, function () {
$('#popup_survey_whitebox_content').stop().animate({
opacity: 1,
height: "toggle"
}, 500, function () {
$("label#popup_survey_label_title").text(newText); // Here put the new text with "..."
}).css('position', 'relative');
});
$("#popup_survey_end_whitebox").click(function () {
$("#popup_survey_whitebox").remove();
});
},
render_1: function () {
$.each(array, function (i, obj) {
if (PG.multiselect == 1) {
var selection = "<li class='popup_survey_whitebox_li'></li><input class='the_checkbox' type='radio' id=" + obj.value + " name=" + obj.name + " value=" + obj.value + ">" +
"<label class='popup_survey_whitebox_label' for=" + obj.value + ">" + obj.no + ". " + obj.value + "</label>" +
"<div class='popup_survey_whitebox_progressbar'><div class='popup_survey_whitebox_progressbar_inner' for=" + obj.value + " style='width:" + obj.totalvote + "%;'>" +
"</div></div>" +
"<div id='popup_survey_whitebox_percent' class='popup_survey_whitebox_percent'>" + obj.totalvote + "%</div>";
} else {
var selection = "<li class='popup_survey_whitebox_li'></li><input class='the_checkbox' type='checkbox' id=" + obj.value + " name=" + obj.name + " value=" + obj.value + ">" +
"<label class='popup_survey_whitebox_label' for=" + obj.value + ">" + obj.no + ". " + obj.value + "</label>" +
"<div class='popup_survey_whitebox_progressbar'><div class='popup_survey_whitebox_progressbar_inner' for=" + obj.value + " style='width:" + obj.totalvote + "%;'>" +
"</div></div>" +
"<div id='popup_survey_whitebox_percent' class='popup_survey_whitebox_percent'>" + obj.totalvote + "%</div>";
}
$("#" + PG.divid).append(selection);
});
var survey_button = "<br><input id='submit_btn' type='button' class='whiteboxbutton whiteboxbutton-small' value='Finish' style='width:100%;'>";
$("#popup_survey_label_title").append("What is your favorite fruit??What is your favorite fruit??");
/*$("#popup_survey_whitebox_title").append();*/
$("#popup_survey_whitebox_inner_title").append("Please select 1 fruit only:");
$('#popup_survey_whitebox_button').append(survey_button);
$('.the_checkbox').on('change', function (evt) {
$('.popup_survey_whitebox_percent').css('display', 'block');
$('.popup_survey_whitebox_progressbar').css('display', 'block');
$(".popup_survey_whitebox_button").show();
if ($(this).siblings(':checked').length >= PG.multiselect) {
this.checked = false;
}
});
},
save: function () {}
}
I console and get this error Uncaught ReferenceError: array is not defined but I must declare on html.
There is other way around as well to solve this error besides closure. Since, you already have optionitem present in PG and you already passed the optionitem to it, you can use it as well inside render_1 method.
Change
$.each(array, function (i, obj) {
to
$.each(PG.optionitem, function (i, obj) {
With that, you need not to define array as a global variable which might conflict with others.
http://jsfiddle.net/5qnhcudp/2/
Your array is in a closure. There is a couple of different things you could do but simply, you can just move your array declaration outside of the closure.
JSFiddle
<script>
var array = [];
$(function() {
...
});
</script>
Found another solution to your problem, your PG object is actually trying to reference the global scope where it doesn't need to. See, your inline script where you declare the array, you are passing that into the PG object.
You have this:
render_1: function () {
$.each(array, function (i, obj) {
...
});
}
Replace with this:
render_1: function () {
$.each(PG.optionitem, function (i, obj) {
...
});
}
This solution is actually independant from my first one. If you don't want the array in global scope, this solution will work.

Iterating through array and not all items are showing

See the example here - http://jsfiddle.net/jayblanchard/b2y1tagk/
With the following code I would think that I would get all three elements appended to result, but I don't. I get:
primary - bar
secondary - glorp
var elements = [{
type: 'secondary',
name: 'foo'
}, {
type: 'primary',
name: "bar"
}, {
type: 'secondary',
name: "glorp"
}];
var elementItem;
$(elements).each(function () {
if (this.type == 'primary') {
elementItem = this.type + ' - ' + this.name + '<br />';
} else {
elementItem += this.type + ' - ' + this.name + '<br />';
}
});
$('#results').append(elementItem);
So I'm thinking that I should add the += operator to the first portion of the if condition, but when I do I get this:
undefinedsecondary - foo
primary - bar
secondary - glorp
It doesn't matter what order these are in when they are generated, they just all have to be there when complete. I feel sure that I am missing something obvious, can someone tell me what that is?
elementItem = this.type + ' - ' + this.name + '<br />';
needs to be:
elementItem = this.type + ' - ' + this.name + '<br />' + elementItem;
Otherwise, you overwrite it if primary is not the first item.
Initialize it with var elementItem = ""; so it doesn't typecast elementItem to the string "undefined"
http://jsfiddle.net/b2y1tagk/3/
You are resetting your elementItem variable with = when you reach the primary type. Try appending every item in your list. Initialize the elementItem by var elementItem=''.
var elements = [{
type: 'secondary',
name: 'foo'
}, {
type: 'primary',
name: "bar"
}, {
type: 'secondary',
name: "glorp"
}];
var elementItem = '';
$(elements).each(function () {
if (this.type == 'primary') {
elementItem += this.type + ' - ' + this.name + '<br />';
} else {
elementItem += this.type + ' - ' + this.name + '<br />';
}
});
$('#results').append(elementItem);

Updating javascript array data via input field

I'm trying to create a shopping cart that builds an array to send to a server. The part I'm having trouble figuring out is allowing for the user to change the quantity via an input field that updates the 'quantity' value in the basketItems array.
I may be going about this wrong, but hopefully one of you geniuses could help me out.
var basketItems = [
{ itemName:"Item 1", price:1.00, quantity:0 },
{ itemName:"Item 2", price:2.00, quantity:0 },
{ itemName:"Item 3", price:3.00, quantity:0 }
];
var basketItemsTotal = 0.00;
function CalcBasketTotal() {
for (i=0;i<basketItems.length;i++) {
if (basketItems[i].quantity > 0) {
basketItemsTotal = basketItems[i].price * basketItems[i].quantity;
}
}
}
function PopulateBasketItems() {
for (i=0;i<basketItems.length;i++) {
basketTable.innerHTML +=
'<tr><td>' + basketItems[i].itemName + '</td>' +
'<td>$' + basketItems[i].price + '</td>' +
'<td><input value="' + basketItems[i].quantity + '"></td>' +
'<td>$' + basketItems[i].price * basketItems[i].quantity + '</td></tr>';
}
}
BONUS: Eventually, I'm trying to make this script send the server this array along with the total, but first thing's first!
your broblem is here :
function CalcBasketTotal() {
for (i=0;i<basketItems.length;i++) {
if (basketItems[i].quantity > 0) {
basketItemsTotal = basketItems[i].price * basketItems[i].quantity;
}
}
}
fix: (replace = by += to total)
function CalcBasketTotal() {
for (i=0;i<basketItems.length;i++) {
if (basketItems[i].quantity > 0) {
basketItemsTotal += basketItems[i].price * basketItems[i].quantity;
}
}
}

Categories