Develop Reference

What would be the method to create a Dynamic Quiz with Logic hooks?

For a site that I'm working on we are wanting to take a specific design pattern that we've seen work well on other sites and replicate it.
Sample
The behaviour that we are after (in pseduo code)
Question 1
{
if yes go to Question2v1
if no go to question2v2
}
Question 2 version 1
{
if yes go to Question3
if no go to Message with try again button that loops to start
}
Question 2 version 2
{
yes message6
no message 7
}
Question 3
{
if yes go to Question4v1
if no go to question4v2
}
Question 4 version 1
{
if yes message2 with try again button
if no message3 with try again
}
Question 4 version 2
{
if yes message 4
if no message 5
}
But with each acting as the Question text simply getting replaced with a short animation as it does so, apart from in the case of message where the text and the responses change.
The content is static, so doesn't need to be obfuscated or anything, as the questions exist as a quick way for the client to self-assess which option fits. All answers are boolean, but have logic hooks depending on which answer.
I've seen some Dynamic Quizzes before, which run from either pure javascript or a jquery plugin (slickquiz) but I wasn't sure on whether they can easily do this behaviour?
Below is a non-functional mock-up. This is two restyled radio buttons split with col-xs-6 class
Message:
code for the style if you'd like:
<div class="well-inverse well-lg" >
<div class="text-center">
<h3>To help you decide which method applies to your company – answer the questions below</h3>
<hr>
<p>Question 1: Was the Company dissolved more than 6 years ago?</p>
<small style="font-variant:small-caps;">Placeholder: Real Content to come later </small>
</div>
<div class="col-sm-6">
<div class="funkyradio">
<div class="funkyradio-success">
<input type="radio" name="radio" id="radioY">
<label for="radioY">Yes</label>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="funkyradio">
<div class="funkyradio-danger">
<input type="radio" name="radio" id="radioN">
<label for="radioN">No</label>
</div>
</div>
</div>
</div>

I think I've solved this on own actually.
Simply a set of logic loops which detects the ID of the Yes No elements.
And upon the selection of a button, changes the ID of the button based upon response.
so it would be like
clicked yes first time
change question based on response
change id of yes/no to match this question
e.g from id="q1Yes" to "q2No"
continue loop until user hits an end of chain.
upon end of chain, restart loop if user presses "try again" button
I think my problem was that I wasn't breaking down the problem into small enough parts.

How to pass an a value from a page to another using javascript

How do you pass a value or an array from one page to another in html using javascript. I'm not allowed to use local storage or sessions only pass the variable from page to page. I'm sending values from a radio button. I intend to store the results in array as i am keeping track of the users answer to display the result at the end. How do i send an array to quiz_5.html? I intend to keep passing the array instead of using a cookie or local storage as i am not permitted to.
Below is My code:
<div>
<form>
<input type="radio" name="radio" value="correct" class="firstRow"> NASA.Gov
<input type="radio" name="radio" value="incorrect" class="secondRow"> Data.Gov <br>
<input type="radio" name="radio" value="incorrect" class="firstRow"> Facebook
<input type="radio" name="radio" value="incorrect" class="secondRow"> XYZ.net <br>
<input type="button" value="Submit & Next Question" onclick="getAnswer4(this.form)" class="firstRow">
<input type="button" value="Cancel & Clear Selection" onclick="clearOptions(this.form)" class="secondRow">
</form>
</div>
Javascript code:
function getAnswer4(form) {
var a[];
var value;
var checked = form.querySelector("input[type=radio]:checked");
if(!checked) {
alert('Please select an answer');
return;
}
else{
value = checked.value;
}
a.push(value);
location.href = "quiz_5.html";
}

You should just have one HTML button for the entire form. First, let's fix that form tag:
<form name='form' id='form' method='get' action='quiz_5.php'>
Now let's add a submit button to the bottom of the form:
<input type='submit' name='sub' id='sub' value='Submit' />
On quiz_5.html
var pre = onload;
onload = function(){
if(pre)pre();
var resultObject = {};
var fs = location.search.replace('?', '').split('&');
for(var i=0,l=fs.length; i<l; i++){
var z = fs[i].split('=');
resultObject[decodeURIComponent(z[0])] = decodeURIComponent(z[1]);
}
/* resultObject now has values based on name attibute
for instance resultObject.radio will hold value of name='radio' where it's checked */
}

Sorry if my comments seemed harsh, but I am all about new coders learning the basics themselves without relying on having the answers provided. Just to show it can be done - I just created three HTML pages. Created a form in the first two - each with your questions (questions 1 and 2 in the first page and question 3 in the second page), and passed the form values to the next one, using nothing more than html.
Then using only JavaScript on the second and third pages, I grabbed the values out of the URL and did stuff with them. On page two, I re-used the values from page 1 (think how that might have been done and why it is useful) so that all three values are passed to page 3 which then used JavaScript only to grab the 3 values, display them on the page (as shown in the code section below) and calculate the total and the percentage of answers that are correct. Note that I answered the questions so that I got question 2 incorrect.
Note that I am not giving the code used, but will give you the URL of the pages so that you can see the outcome of the previous two pages and can then start to think how I achieved this.
numbers1.html
numbers2.html?one=correct&two=incorrect
numbers3.html?one=correct&two=incorrect&three=correct
Question 1: correct
Question 2:incorrect
Question 3:correct
2/3
0.67% correct
Not a traditional answer I know, but it is not ideal for learners simply ask for the answer to be provided, especially when in 10 minutes I was able to put together the three pages that achieved the outcome. If you do not try then you will not learn for yourself.

show an dialog onclick with radiobuttons [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
I am creating an practice exam for some students in my school. I have a lot of multiple choice questions and i'm trying to get it to work bud got stuck here. I am new to javascript and have no clue on how to get this working. So every question has 4 choices that look like this:
<tr>
<td>
<figures1></figures1>
</td>
<td class="questiona">
<br>
<input type="radio" name="q1" value="a"/>a<br>
<input type="radio" name="q1" value="b"/>b<br>
<input type="radio" name="q1" value="c"/>c<br>
<input type="radio" name="q1" value="d"/>d<br>
</td>
</tr>
The question is just an image and they have to select either a, b, c or d.
I've managed to get it working this far, bud what i want to add is an dialog whenever they click on a, b, c or d to tell them if the answer is correct or not and if not add a feedback to tell them why the answer is wrong. The reason why i am not using alert to give them a feedback is because i can't add images to an alert box.
Thanks in advance

Give your input a class like "answer".
Then in your jquery code:
$(document).ready(function(){
$(".answer").click(function(){
ValidateAnswerFunction(this); //sends the input element to the validate answer function
$( "#dialog" ).css("display", "block"); // shows the dialog .hide(); to hide it!
});
$("#dialog").click(function(){
$(this).hide();
});
});
function ValidateAnswerFunction(input){
switch($(input).val()){
case "a":
$("#dialog").html("correct");
break;
case "b":
$("#dialog").html("close");
break;
case "c":
$("#dialog").html("not even close <img src='http://www.w3schools.com/html/pic_mountain.jpg' style='width:100px;height:100px'>");
break;
case "d":
$("#dialog").html("are you even trying m8?");
break;
}
}
Where #dialog is your dialog:
<div id="dialog"></div>
JS fiddle

You'd need to test the value of the clicked element and then give feedback from that answer. This can be done i varity of ways, but I'd say that using $("[name=q1]").click() would be the easiest, and then use $(this).val() to check the answer.
Please refer to this fiddle for an example.
http://jsfiddle.net/u3csoave/

you can use confirmation alert to achieve this.there are too many jquery demo's available.
for example see this link:how to show confirmation alert with three buttons 'Yes' 'No' and 'Cancel' as it shows in MS Word

i think you can use confirmation alert to show user correct answer and put a link in the alert box which allows them to change their answer.

JQueryUI dialog..
function foobar() {
$("#dialog").dialog();
}
<div id="dialog" title="Dialog title">
<img src="foo.bar"/>
</div>
Then open dialogs in radiobuttons' onlick method.
Maybe you should just make one generic dialog and pass all the information needed as parameters so you don't end up with a page containing multiple dialogs.

how to call multiple images for a checkbox

The following code was a reply to a question posted last year. It’s the best example I can find to want I am looking to do. I have HTML knowledge but my JS is limited – thanks for your patience. You can view the code here. The thread can be found here.
<script>
function toggleVisibility(id) {
var el = document.getElementById(id);
if (el.style.visibility=="visible") {
el.style.visibility="hidden";
}
else {
el.style.visibility="visible";
}
}
</script>
<label for="chkemployment">Employment</label>
<input type="checkbox" id="chkemployment" onChange="toggleVisibility('imgemployment');" /><br/>
<label for="chkpopulation">Population</label>
<input type="checkbox" id="chkpopulation" onChange="toggleVisibility('imgpopulation');" />
<hr />
<img id="imgemployment" src="http://www.gravatar.com/avatar/c0d7be6d99264316574791c1e4ee4cc4?s=32&d=identicon&r=PG" style="visibility:hidden"/>
How can I get multiple images to display when a checkbox has been clicked? The images would be the same, position different.
When the images are displayed I would like to have a onclick event or mouseover that would display additional info– what is the best option for this, JS or image map (hotspots)?both? I’ve used hotspots before but only by itself not with JS. Any advice on this would be appreciated.
The following link is an example of what I am trying to achieve but on a smaller scale. http://www.cozumel.travel/learn/map.cfm

If you want to use the same code but for multiple images, you can add a function that would toggle every image you defined for the onChange event.
here is a function that would do:
function toggleMultiVisibility (a){
for (var i = 0; i < a.length; i++){
toggleVisibility(a[i]);
}
}
and here is the change you should do on the HTML:
onChange="toggleMultiVisibility(['imgemployment','imgpopulation']);"
here is a working example from your code: http://jsfiddle.net/Pu2E7/

Removing an element from a jQuery Cycle plugin slideshow breaks it

I have a series of yes/no questions that I am displaying one at a time using the Cycle plugin.
The questions are in a <ul> element.
When a question is answered, an AJAX request displays the proportions of people who answered yes or no to that question using a php script, and the question is removed from the <ul>.
This is where the problem is.
The author of the cycle plugin himself says that it is necessary to stop and restart the slideshow to remove a slide.
When I try to do this by calling $element.cycle('destroy') or $element.cycle('stop'), remove the element, then restarting with $element.cycle(), the cycle does not continue as expected. Only one transition happens, and then the slideshow stops.
Here is my JS:
$j = jQuery.noConflict();
$j(document).ready(function() {
var $questions = $j('#questions');
$questions.cycle();
$j('#survey input').click(function(e) {
e.preventDefault();
question = parseInt($j(this).attr('name'));
answer = $j(this).attr('value');
$j.post( 'process.php', {
question: question,
answer: answer
}, function(data) {
$j('#result p').replaceWith('<p>' + data + '</p>');
});
$questions.cycle('destroy');
$j(this).closest('.question').remove();
$questions.cycle();
});
});
And this is my HTML:
<ul id="questions">
<li class="question">
<h3>do you like to stay at home?</h3>
<form id = "survey" action="process.php" method="post">
<input type="submit" name = "2" value = "yes" >
<input type="submit" name = "2" value = "no" >
</form>
</li>
<!-- four or five more questions here -->
</ul>
<div id="result"><p></p></div>
What is going on here?

After much fiddling (pun intended) around with this, it appears the $.('destroy') function is not properly clearing its internal state which is causing the issue; the problem persists with or without removing any slides.
I've created a workaround here: http://jsfiddle.net/eF72L/2/
I hope this helps!