Jump to content

Page by page quiz HELP


TheShadowGamer

Recommended Posts

So, I'm really stuck. I know how to make a quiz just fine, with radio buttons, go to the next page, etc., but for our project we have to make the quiz go from one page to the next and hold the answers provided, and then at the end we need to output the result by combining the answers. Essentially it's a personality quiz type thing, rather than a scoring one.

My idea is to add 1 each time an answer corresponding to that personality is given, but how to I transfer those values from one page to the next?

Edited by TheShadowGamer
Link to comment
Share on other sites

Okay, my professor told me to use JSON. But now I can't figure out how to make JSON take the users choice from a radio button. I've found how to do it for entered information, but can't figure out how to make it take a buttons input.

Basically how do I make it record the button press in JSON and add the value to the appropriate selection?

I do love how he wants me to use something we haven't used before on a project of all things.

        "question" : "How would you describe your skin?",
        "answer" : [
            {"id" : 0, "text" : "Rough"},
            {"id" : 1, "text" : "Smooth"},
            {"id" : 2, "text" : "Both"}
        ],
        "choice" : "" 

I mean I don't think it would be this simple, just leaving it as "". But however I take the value I then need to add a value to it.

Edited by TheShadowGamer
Link to comment
Share on other sites

JSON doesn't "do" anything, it's just a data structure.

You need to use Javascript to get the radio buttons (by ID if they have unique IDs, or another selector if they don't) and loop through them to figure out which one is checked, then you can get the value property of the one that was checked.

Link to comment
Share on other sites

What I currently have is the questions setup in JSON and then I'm calling them into the HTML. Would that work for recording the values or would I need to put them elsewhere in order to record the values in JSON?

Main reason I don't know if this would work is because the JSON tutorial I found showed doing this with answers already determined, don't know if me putting the questions in JSON would make it impossible to actually take the users answer as the value or not.

Edited by TheShadowGamer
clarification
Link to comment
Share on other sites

It sounds like you are talking about two different things. You could use a JSON string to dynamically create the form or you could read the submitted form and create a JSON string for AJAX, or you could do both. I don't think it would be efficient to use the same JSON structure to do both.

 

Link to comment
Share on other sites

Okay, here is what I have so far. First my HTML

<!DOCTYPE HTML>
<html>
	<head>
		<meta content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Find Out Your Spirit Animal</title>
		<link rel="stylesheet" type="text/css" href="quiz.css">
	</head>
	<body>
        <div id= "myQuiz">
            <h1>Spirit Animal Quiz</h1>
            <div class = "progress">
            <div class="on"></div>
            <div></div>
            <div></div>   
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            </div>
            <div class = "question">
                <p class = "text">How would you describe your skin?</p>
                <p class = "btn">Rough</p>
                <p class = "btn">Smooth</p>
                <p class = "btn">Both</p>
            <div class = done>
            <div class="btn">Next</div>
            </div>
        </div>
        </div>

	</body>
</html>

Next my CSS

@import url(http://fonts.googleapis.com/css?family=Titillium+Web:900|Roboto:400,100);
body { background-color: black; padding: 20px; }

#myQuiz {
   font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 400;
    width: 650px; 650px;
    position: relative
        overflow: hidden;
    color:white;
        background: black;
    
}
#myQuiz h1{
    font-weight: 100; font-size 2em; margin: 0px;
    position: absolute; top:25px; left:36px;
}
myQuiz h1 span {
    display: block; font-weight: 900; font-family: 'Titillium Web', sans-serif;
    font-size: 3.2 em; line-height: 65px;
}

#myQuiz h2 {font-size: 3em; margin: 0px; font-weight:100;}
#myQuiz h3 {font-size: 2em; margin: 0px; font-weight:100;}
#myQuiz p {margin: 0px 0px 14px 0px;}
#myQuiz .btn {
    display: inline-block;
    cursor: pointer;
    background-color: #7E3517;
    /*TEXT*/
        color: white; text-decoration: none; 
        padding: 5px 15px; border-radius: 6px;
}
#myQuiz .btn:hover {
    background-color: white;
    /*TEXT*/
        color: black; text-decoration: none; 
        padding: 5px 15px; border-radius: 6px;
}
#myQuiz .btn:active {
    background-color: red;
    /*TEXT*/
        color: black; text-decoration: none; 
        padding: 5px 15px; border-radius: 6px;
}
/*PROGRESS BAR*/
#myQuiz .progress{width: 550px; position: absolute; top: 160px; left: 40px;}
#myQuiz .progress div{
    position:relative; display: inline-block; width: 30px; height:30px; margin-right: 30px;
    border-radius: 50%; background-color: rgba(255,255,255,0.2); transition: background-color 1s;
}

#myQuiz .progress div.on,
#myQuiz .progress div.answered {background-color:#ef0101;}

/*INTRO*/
#myQuiz .intro{position: absolute; top: 225px; left:50px; width:550px;}
#myQuiz .intro p {margin: 0px 0px 40px 0px;}

/*QUIZ*/
#myQuiz .question {width: 550px; position: absolute; top: 225px; left: 50px;}
#myQuiz .question .text{font-size: 1.6em; margin: 0px, 0px, 20px, 0px;}
#myQuiz .question .ans {
    display:inline-block; font-size: 1.1em; width:225px; border: 2px solid red;
    border-radius: 6px; padding 10px; margin: 0px 15px 15px 0px;
}
#myQuiz .question .ans.selected {border-color: blue;}

#myQuiz .question.unanswered .ans{cursor: pointer;}
#myQuiz .question.unanswered .ans:hover {background-color: rgba(163,111,155,.2);}
#myQuiz .question.answered .ans{cursor: default;}

/* DONE*/
#myQuiz .done { color:yellow; margin-top: 50px; transition: opacity 1.5s, margin-top 1.5s; visibility: hidden; opacity: 0;}
#myQuiz .done .btn{margin-top: 5px;}

myQuiz .answered . feedback {visibility: visible; opacity: 1; margin-top: 10px;}

/*RESULTS*/

#myQuiz .results {position: absolute; top: 225px; left: 660px; width: 550px;}

I decided that pulling the questions from JSON would be too much of a hassle so I'm just going to have them on each HTML page. Okay so my current issue before I can even start my JavaScript is that I need to make my buttons stay clicked. I can't figure out how to do it. I don't want the radio style button attached to my buttons, and I'm not sure how to keep the buttons I have with that. If someone can tell me what script I need to add to my buttons to add a clicked state that acts like the answer has been selected while I work on adding the JavaScript variables, that would be awesome.

I have the button to submit the answer hidden, and it won't appear until an answer is selected, but because I can't figure out how to make the buttons stay selected, I can't even get it to take the variable.

Working on the JS I'm now under the assumption that to even make the variables work with the questions that I'm going to have to put them in the script as well. Let me know if that's true or not.

Edited by TheShadowGamer
Link to comment
Share on other sites

Try...

<script>
'use strict';

function init() {
var buttons = document.getElementsByClassName('btn');
for(var i=0 ; i<buttons.length ; i++){
   buttons[i].onclick = clkhandler;
}
}

function clkhandler(evt){
   var ans = evt.target.innerHTML;
   var ques = evt.target.parentNode.getElementsByClassName('text')[0].innerHTML;
   alert(ques + " = " + ans);
}

window.onload = init;
</script>

 

Link to comment
Share on other sites

This seems to be a homework assignment, I would suggest using the technologies that have been taught to you instead of trying anything new that we might have presented to you here.

I'm guessing that they want you to make a single-page application where the questions are given in an object (like JSON, but not necessarily a JSON string) and you go updating the page HTML generating form elements and reading them using Javascript.

Link to comment
Share on other sites

47 minutes ago, Ingolme said:

This seems to be a homework assignment, I would suggest using the technologies that have been taught to you instead of trying anything new that we might have presented to you here.

I'm guessing that they want you to make a single-page application where the questions are given in an object (like JSON, but not necessarily a JSON string) and you go updating the page HTML generating form elements and reading them using Javascript.

I wish it were that simple but our teacher wants it one question per page and we have to transfer the data page by page and then give the user a personality, or in my case spirit animal based on the answers they provided.

Another issue is he recommended using JSON, but we've never even used it before.

Edited by TheShadowGamer
Link to comment
Share on other sites

With pure Javascript there are two ways to transfer data from one page to the next: cookies and web storage. Cookies are an older technology so it's supported by older versions of Internet Explorer. Web storage is newer and easier to use and is supported by modern browsers. I would recommend using web storage.

MDN has a good tutorial explaining how to use web storage: https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API

For your situation, it's better to use sessionStorage rather than localStorage.

If you start off with a Javascript object, you can save it to your preferred storage method using JSON.stringify().  When retrieving the JSON string from storage you can turn it back into an object using JSON.parse().

As for how to get values from the radio buttons, give all the radio buttons the same name attribute and then use getElementsByName() to retreive the button elements, then loop through them to see which one of them has their checked property set to true.

Link to comment
Share on other sites

1 hour ago, TheShadowGamer said:

[...]...our teacher wants it one question per page and we have to transfer the data page by page and then give the user a personality, or in my case spirit animal based on the answers they provided.

 

What are the prerequisites for this class? What languages does s/he expect you to use?

Link to comment
Share on other sites

2 minutes ago, davej said:

 

What are the prerequisites for this class? What languages does he expect you to use?

He wants JavaScript, HTML, CSS and he recommended using JSON that does the following

"

  • Take in and store user input from at least 5 different questions answered by the user via HTML form elements (2 points)
  • Use an array of options to correlate user data to a matrix of potential results you've designed (2 points)
  • Dynamically display appropriate result images and text to the user after completing the questions (2 points)
  • Format appropriately for use on a mobile, tablet, or desktop screen using media queries (2 points)
  • Include original content that communicates an idea to the user through an engaging interaction (2 points)

"

The problem for me is this is essentially a beginners level class, but yet he wants this done in the hardest way possible, when I know I could do it fairly easily if it could all be on one page.

Link to comment
Share on other sites

Okay I'm currently working on setting up my "check" function in this to save the values but the issue I can't seem to fix at the moment is that I'm getting the error "Unexpected token else" on line 88* and I can't seem to find the problem. Maybe someone else can spot what I'm missing.

<!doctype html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Find Out Your Spirit Animal</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" type="text/css" href="quiz.css">
 
</head>
	<body>
        <div id= "myQuiz">
            <h1>Spirit Animal Quiz</h1>
            <div class = "progress">
            <div class="on"></div>
            <div></div>
            <div></div>   
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            </div>

<h1>Spirit Animal Quiz</h1>

<section class="main">

<form name="quiz" action="javascript:check();" class="quizform">

<div class="question">

	<h2>Question #1</h2>
    <h3>How would you describe your skin?</h3>
	
	<div class="answer">
		<input name="q1" value="value1" id="value1" type="radio" /> Rough
	</div>

	<div class="answer">
		<input name="q1" value="value2" id="value2" type="radio" /> Smooth
	</div>

	<div class="answer">
		<input name="q1" value="value3" id="value3" type="radio" /> Both
	</div>
</div>
<div class = "done">
<input value="Submit" type="submit" href="http://google.com"/>
</div>
</form>

</section>

<script type="text/javascript">

   var result;
   
   function check()

   {

      var question;
      var value1;
      var value2;
      var value3;
      var gator = 0;
      var wolf = 0;
      var deer = 0;
      var rabbit = 0;
      
      question = 1;
      value1 = 0;
      value2 = 0;
      value3 = 0;
      
      result = "";

      var choice;
      
      do {
      
         var q = document.forms['quiz'].elements['q'+question];


            if (choice == "value1") {
               gator == (gator +1) && wolf == (wolf +1);
            }

            if else (choice == "value2") {
                deer == (deer +1) && rabbit == (rabbit +1);
            }

            if else (choice == "value3") {
               gator == (gator +1) && wolf == (wolf +1) && deer == (deer +1) && rabbit == (rabbit +1);
            }
          
         }while ((deer = "0") || (rabbit = "0") || (gator = "0") || wolf == (wolf = "0"));

</script>
        </div>
</body>
</html>

Here is the updated CSS (not all currently applied since I basically restarted the HTML/JaveScript)

@import url(http://fonts.googleapis.com/css?family=Titillium+Web:900|Roboto:400,100);
body { background-color: black; padding: 20px; }

#myQuiz {
   font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 400;
    width: 650px; 650px;
    position: relative
        overflow: hidden;
    color:white;
        background: black;
    
}
#myQuiz h1{
    font-weight: 100; font-size 2em; margin: 0px;
    position: absolute; top:25px; left:36px;
}
myQuiz h1 span {
    display: block; font-weight: 900; font-family: 'Titillium Web', sans-serif;
    font-size: 3.2 em; line-height: 65px;
}

#myQuiz h2 {font-size: 3em; margin: 0px; font-weight:100;}
#myQuiz h3 {font-size: 2em; margin: 0px; font-weight:100;}
#myQuiz p {margin: 0px 0px 14px 0px;}
#myQuiz .btn {
    display: inline-block;
    cursor: pointer;
    background-color: #7E3517;
    /*TEXT*/
        color: white; text-decoration: none; 
        padding: 5px 15px; border-radius: 6px;
}
#myQuiz .btn:hover {
    background-color: white;
    /*TEXT*/
        color: black; text-decoration: none; 
        padding: 5px 15px; border-radius: 6px;
}
#myQuiz .btn:active {
    background-color: red;
    /*TEXT*/
        color: black; text-decoration: none; 
        padding: 5px 15px; border-radius: 6px;
}
/*PROGRESS BAR*/
#myQuiz .progress{width: 550px; position: absolute; top: 160px; left: 40px;}
#myQuiz .progress div{
    position:relative; display: inline-block; width: 30px; height:30px; margin-right: 30px;
    border-radius: 50%; background-color: rgba(255,255,255,0.2); transition: background-color 1s;
}

#myQuiz .progress div.on,
#myQuiz .progress div.answered {background-color:#ef0101;}

/*INTRO*/
#myQuiz .intro{position: absolute; top: 225px; left:50px; width:550px;}
#myQuiz .intro p {margin: 0px 0px 40px 0px;}

/*QUIZ*/
#myQuiz .question {width: 550px; position: absolute; top: 225px; left: 50px;}
#myQuiz .question .text{font-size: 1.6em; margin: 0px, 0px, 20px, 0px;}
#myQuiz .question .ans {
    display:inline-block; font-size: 1.1em; width:225px; border: 2px solid red;
    border-radius: 6px; padding 10px; margin: 0px 15px 15px 0px;
}
#myQuiz .question .ans.selected {border-color: blue;}

#myQuiz .question.unanswered .ans{cursor: pointer;}
#myQuiz .question.unanswered .ans:hover {background-color: rgba(163,111,155,.2);}
#myQuiz .question.answered .ans{cursor: default;}

/* DONE*/
#myQuiz .done { color:yellow; margin-top: 500px; transition: opacity 1.5s, margin-top 1.5s;}
#myQuiz .done .btn{margin-top: 5px;}

myQuiz .answered . done {visibility: visible; opacity: 1; margin-top: 10px;}

/*RESULTS*/

#myQuiz .results {position: absolute; top: 225px; left: 660px; width: 550px;}

 

Edited by TheShadowGamer
Link to comment
Share on other sites

On 4/13/2017 at 7:25 PM, davej said:

So then again I will tell you to go look at...

https://www.w3schools.com/html/html5_webstorage.asp

If this is a "beginner level" class then the instructor is being silly and unrealistic.

To be honest I can tell that he enjoys making us suffer, and my friends in the class agree with me. Before spring break he put 4 assignments due in one week, we only had 2 weeks to do them, one of which was a project that I basically spent most of those 2 weeks working on, while also having to work on a 3D model due the same week, and after we got back and he saw that half the class had dropped out he essentially said he purposely did that just to weed out the people without the willpower to do the work.

Link to comment
Share on other sites

Okay, if there is only one question per page then why do you need a submit button? The way you had it before you edited it was fine. If you only have one question per page then why does your code need a loop? Your else-if's are wrong and you are confusing = and ==.

If indeed you have only one question per page then you simply have the buttons store the answer and then jump to the next page. Only the final page will do any calculations.

I guess you can have a submit button if you want it, but that adds complexity because then you would probably want to change the style of the selected button. If you immediately jump to the next page then you don't need to consider styling that button.

Link to comment
Share on other sites

Okay so now I'm having issues making it so the buttons actually go somewhere. Where do I apply the link to the buttons so it doesn't

A. Create a button above my word as in this version.

B. put the href somewhere that it doesn't screw up my divs and form? 

Also if I do this        localStorage.setItem("gatorScore",gator); how do I actually store the value of var gator? Just add another comma?

<!doctype html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Find Out Your Spirit Animal</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" type="text/css" href="quiz.css">
 
</head>
	<body>
        <div id= "myQuiz">
            <h1>Spirit Animal Quiz</h1>
            <div class = "progress">
            <div class="on"></div>
            <div></div>
            <div></div>   
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            </div>

<h1>Spirit Animal Quiz</h1>

<section class="main">

<form name="quiz" action="javascript:check();" class="quizform">

<div class="question">

	<h2>Question #1</h2>
    <h3>How would you describe your skin?</h3>
	<a href = "https://www.bing.com/">
	<div class="answer">
		<input name="q1" id="value1"/> Rough
	</div>
    </a>

	<div class="answer">
		<input name="q1" value="value2" id="value2" type="radio" /> Smooth
	</div>

	<div class="answer">
		<input name="q1" value="value3" id="value3" type="radio" /> Both
	</div>
</div>
</form>

</section>

<script type="text/javascript">

   var result;
   
   function check()

   {

      var question;
      var value1;
      var value2;
      var value3;
      var gator = 0;
      var wolf = 0;
      var deer = 0;
      var rabbit = 0;
      
      question = 1;
      value1 = 0;
      value2 = 0;
      value3 = 0;
      
      result = "";

      var choice;
      
      
         var q = document.forms['quiz'].elements['q'+question];


            if (choice == "value1") {
               gator == (gator +1) && wolf == (wolf +1);
            }

            else if (choice == "value2") {
                deer == (deer +1) && rabbit == (rabbit +1);
            }

            else if (choice == "value3") {
               gator == (gator +1) && wolf == (wolf +1) && deer == (deer +1) && rabbit == (rabbit +1);
            }
            else (gator == 0) && (wolf == 0) && (deer == 0) && (rabbit == 0);
          
   }
</script>
        </div>
</body>
</html>

CSS

@import url(http://fonts.googleapis.com/css?family=Titillium+Web:900|Roboto:400,100);
body { background-color: black; padding: 20px; }

#myQuiz {
   font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 400;
    width: 650px; 650px;
    position: relative
        overflow: hidden;
    color:white;
        background: black;
    
}
#myQuiz h1{
    font-weight: 100; font-size 2em; margin: 0px;
    position: absolute; top:25px; left:36px;
}
myQuiz h1 span {
    display: block; font-weight: 900; font-family: 'Titillium Web', sans-serif;
    font-size: 3.2 em; line-height: 65px;
}

#myQuiz h2 {font-size: 3em; margin: 0px; font-weight:100;}
#myQuiz h3 {font-size: 2em; margin: 0px; font-weight:100;}
#myQuiz p {margin: 0px 0px 14px 0px;}
#myQuiz .btn {
    display: inline-block;
    cursor: pointer;
    background-color: #7E3517;
    /*TEXT*/
        color: white; text-decoration: none; 
        padding: 5px 15px; border-radius: 6px;
}
#myQuiz .btn:hover {
    background-color: white;
    /*TEXT*/
        color: black; text-decoration: none; 
        padding: 5px 15px; border-radius: 6px;
}
#myQuiz .btn:active {
    background-color: red;
    /*TEXT*/
        color: black; text-decoration: none; 
        padding: 5px 15px; border-radius: 6px;
}
/*PROGRESS BAR*/
#myQuiz .progress{width: 550px; position: absolute; top: 160px; left: 40px;}
#myQuiz .progress div{
    position:relative; display: inline-block; width: 30px; height:30px; margin-right: 30px;
    border-radius: 50%; background-color: rgba(255,255,255,0.2); transition: background-color 1s;
}

#myQuiz .progress div.on,
#myQuiz .progress div.answered {background-color:#ef0101;}

/*INTRO*/
#myQuiz .intro{position: absolute; top: 225px; left:50px; width:550px;}
#myQuiz .intro p {margin: 0px 0px 40px 0px;}

/*QUIZ*/
#myQuiz .question {width: 550px; position: absolute; top: 225px; left: 50px;}
#myQuiz .question .text{font-size: 1.6em; margin: 0px, 0px, 20px, 0px;}
#myQuiz .question .answer {
    display:inline-block; font-size: 1.1em; width:225px; border: 2px solid red;
    border-radius: 6px; padding 10px; margin: 0px 15px 15px 0px;
}


#myQuiz .question .answered.selected {border-color: blue;}

#myQuiz .question.unanswered .ans{cursor: pointer;}
#myQuiz .question.unanswered .ans:hover {background-color: rgba(163,111,155,.2);}
#myQuiz .question.answered .ans{cursor: default;}

/* DONE*/
#myQuiz .done { color:yellow; margin-top: 500px; transition: opacity 1.5s, margin-top 1.5s;}
#myQuiz .done .btn{margin-top: 5px;}

myQuiz .answered . done {visibility: visible; opacity: 1; margin-top: 10px;}

/*RESULTS*/

#myQuiz .results {position: absolute; top: 225px; left: 660px; width: 550px;}

 

Edited by TheShadowGamer
Was wrong still a problem
Link to comment
Share on other sites

Why not have all questions and optional answers on one page all within the same form, hide all but one of specific questions/answers at a time, using navigation next to progress through those questions, the last will cause all answers to be gathered from hidden inputs and return results.

Link to comment
Share on other sites

He told us this was a school assignment, so I don't want to simply post a solution. He also told us it must consist of multiple pages with one question per page. His instructor told him to use only HTML, CSS and Javascript. His Javascript code is filled with errors and does not display an understanding of what needs to be done. We told him to look at Local Storage several times.

Link to comment
Share on other sites

Again! not listed for requirements for multiple pages. IF the tutor asked for multiple pages for each question, he is not following the set requirements, he is adding his personal requirement, OR did the OP and other students assume they required multiple pages for the project? Anyway's, if you follow the listed set requirements where points are awarded you can't go wrong.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...