Jump to content
  • Announcements

    • boen_robot

      Guidelines and Netiquette   03/28/2017

      Posting Problems:   Having problems posting your topic? Read through this: To join, you agree to our terms and conditions and fill out and submit a registration form. An activation email will be sent to your email adress, so you'll need to verify your account. After that the account has to be validated by one of the moderators. This will mean that it can take up to a day to be activated. A couple of things to remember to ensure approval: Don't use an email address in one of those $2 four character .com domains eg. xyds.com. These will be deleted and the domain added to the banned list. Don't use an email address that is within a domain with a bad reputation for spam. A Google search is run on every email address and email domain. Don't sign up with an email address that doesn't exist, doesn't work or requires the sender to answer a quiz before their email can get to you. Put your country and or state and city in the signup form. Blank forms will go to the botton of the "to do" list. And make sure that your email address and your country match, saying you're from Alabama and using a .ru email address is not going to get you activated. After a membership is activated the first few posts will be monitored. Posting spam or unapproved topics described in the agreement results in an immediate ban. The email provider and the IP addresses associated with the account will be banned and all posts will be deleted. These strict measures have been deemed necessary to hinder spam. Sorry for any inconvenience this causes, but it's not liable to change. If, after reading this, you still can't post and don't understand why, contact one of the Moderators listed here.   Topic Guidelines   Including the following information can expedite an accurate response from board members: Must be a Specific Problem or Question related to web design and development Include Code in Question (wrap with   for small blocks of code and for longer blocks   ) Include Code Author Include Extra Notes/Modifications/Attempts Include web link to page/file when possible Content Guidelines   You may not post, upload, link to, or email any Content that contains, promotes, gives instruction about, or provides prohibited Content. Prohibited Content includes any Content that breaks any local, state, county, national or international law. Prohibited Content also includes: No direct or indirect advertising or websites, forums, products, services No hijacking of posts (do not post your question in someone elses) Content that infringes upon any rights [ex. MP3s and ROMs] (including, but not limited to, copyrights and trademarks) Abusive, threatening, defamatory, racist, or obscene Viruses or any other harmful computer software False Information or libel Spam, chain letters, or Pyramid schemes Gambling or Illicit drugs Terrorism Hacking or cheating for internet/online games Warez, Roms, CD-Keys, Cracks, Passwords, or Serial Numbers Pornography, nudity, or sexual material of any kind Excessive profanity Invasive of privacy or impersonation of any person/entity Hacking materials or information Posting Tips   There are more BBcodes than there are buttons for on the reply menu. To get the full list, click "BB Code Help" underneath the clickable smilie face menu. Use   for small snippets of code Use   for lengthy snippets of code Use   if your snippet is HTML (optional) Use   if your snippet is SQL (optional) Rules of Conduct   Be nice. There's no need for calling someone stupid if they ask an 'easy' question. Keep your avatars and signatures absolutely child friendly. We have a younger audience on this forum. Keep your language appropriate for the same reason above. Do not PM moderators for help on the forum. Post on the topic, or create a new one.   Spam:   Recently, as you have all without doubt noticed, we have had lots of spam and advertisement on the forum. Therefore, we'd like to alert you as to what to do when you have found any of the aforementioned annoying messages: it. Immediately. Give a clear reason, please, if the advertising is not evident. DO NOT POST! Report, let the post stay as is, and we will get to it, meanwhile if you continue to post as normal in the other threads, it won't be on the top so long. Refrain from PMing the member. This won't help at all, as they are most likely spambots anyway. Thank you.       Images in signatures:   After thinking of users on dial-up, we have decided to enforce the following rules regarding signatures. Please pay heed to them. Respecting these rules is respecting the members on this forum with dial-up. Signature rules: No animated images AT ALL. No matter the amount of animation. Maximum image widthxheight: 300x150 Maximum image (file) size: 15kb Use calm colors. Do not use highly contrasting images in your signature, as this can get really annoying when seeing several posts from one member in the same thread. The same prohibited content goes for images as for posts. Lastly, use common sense. No lengthy signatures please. Save us some scrolling. Thank you.       Links in signatures:   Please understand that w3schools.com only exists because of voluntary work and is barely supported by the advertising littered throughout the tutorials and the forum. So, please, stop advertising other sites. DO not post links that drive traffic away from the w3schools domain - especially to a site that offers similar if not identical information. Please help support the site by keeping individuals on it. Thank you. Here are some guidelines as to what you can put in your signature: w3schools links --> allowed w3.org links --> allowed browser links --> allowed html editor links --> allowed personal sites --> allowed tutorial sites competing with w3schools --> NOT allowed sites completely irrelevant to webprogramming and this forum --> NOT allowed   Thanks for understanding, and for taking the time to read this. ~W3Schools Modstaff~
TheShadowGamer

Page by page quiz HELP

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
justsomeguy    941

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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
davej    244

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.

 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
davej    244

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>

 

Share this post


Link to post
Share on other sites
Ingolme    794

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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
Ingolme    794

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.

Share this post


Link to post
Share on other sites
davej    244
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?

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites
davej    244

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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
dsonesuk    702

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.

Share this post


Link to post
Share on other sites
Ingolme    794

Transferring data between separate pages is part of the requirements for the assignment.

Share this post


Link to post
Share on other sites
dsonesuk    702

That is not listed in the requirements the op listed, you could use json to transfer results to localstorage and show results on same or another page.

Share this post


Link to post
Share on other sites
davej    244

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.

Share this post


Link to post
Share on other sites
dsonesuk    702

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.

Share this post


Link to post
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

×