Jump to content

TheShadowGamer

Members
  • Content count

    28
  • Joined

  • Last visited

Community Reputation

0 Neutral

About TheShadowGamer

  • Rank
    Newbie
  1. Page by page quiz HELP

    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;}
  2. Page by page quiz HELP

    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.
  3. Page by page quiz HELP

    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;}
  4. Page by page quiz HELP

    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.
  5. Page by page quiz HELP

    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.
  6. Page by page quiz HELP

    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.
  7. Page by page quiz HELP

    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.
  8. Page by page quiz HELP

    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.
  9. Page by page quiz HELP

    I'll give it a shot, thanks!
  10. Page by page quiz HELP

    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?
  11. Is there any way to do this?

    I also tried creating a separate else if statement if the variable is null at the main menu and I still get an error from it.
  12. Is there any way to do this?

    I got it to work, I feel like an idiot because it was as simple as changing document.write(res[i]+"-blip "); to res[i] = (res[i]+"-blip "); It took me so long to figure out something so simple. For f**ks sake brain, work with me here! Okay so I have one last problem. How do I get cancel to work at the main menu without causing an error? I already tried doing || null at the beginning or end. But I need the "Thanks using the..." message and I can't get it to pop of if I don't include "null" in that statement. <!DOCTYPE html> <html> <head> <title>Project 1 – Michael Fiorello</title> <p id="demo"></p> <script> do { //MAIN MENU var input = prompt("Please enter 1, 2, 3, or exit."); { //PROGRAM 1-Enter the string to be converted to robot speak if (input === "1") do { var one = prompt ("Please enter a string."); { if (one === "") { console.warn("You need to enter something"); } } } while (one === "")//keep repeating program 1 until something is entered, aka cannot be blank. //PROGRAM 2-Convert the string into robot speak else if (input === "2") { if (one == null) { console.warn ("You need to first enter a String"); } else { console.log ("String Converted") var res = one.split(" "); for(i = 0; i<res.length; i++) if(res[i].length >= 5) { res[i] = (res[i]+"-blip "); } else { res[i] = (res[i]+"-clang "); } } } //Program 3 Robot Language version of the string will appear in the console else if (input === "3"){ if (res == null) { console.warn("You need to first convert your String"); } else{ var output = res.join(" "); alert ("AWESOME!"); console.log (output);{ var one = null; var res = null; } } } else if (input == null|| input.toLowerCase() == "exit") { alert ("Thanks for using the ROBOT Language Converter!"); } else { alert ("Nope"); console.warn("You need to enter something"); } } } while(input.toLowerCase() != "exit"); </script> </head> </html>
  13. Is there any way to do this?

    working on fixing the indentation, but what I'm trying to do is have it converted in PROGRAM 2: adding -blip to words 5 characters or more and adding clang to less than character words, but then I need to actually call upon the converted versions in PROGRAM 3, so what do I use to permanently change the strings within the array* for when I call on them? Better looking now? Maybe? <!DOCTYPE html> <html> <head> <title>Project 1 – Michael Fiorello</title> <p id="demo"></p> <script> do { //MAIN MENU var input = prompt("Please enter 1, 2, 3, or exit."); { //PROGRAM 1-Enter the string to be converted to robot speak if (input === "1") do { var one = prompt ("Please enter a string."); { if (one === "") { console.warn("You need to enter something"); } } } while (one === "")//keep repeating program 1 until something is entered, aka cannot be blank. //PROGRAM 2-Convert the string into robot speak else if (input === "2") { if (one == null) { console.warn ("You need to first enter a String"); } else { console.log ("String Converted") var res = one.split(" "); for(i = 0; i<res.length; i++) if(res[i].length >= 5) { document.write(res[i]+"-blip "); } else { document.write(res[i]+"-clang "); } } } //Program 3 Robot Language version of the string will appear in the console else if (input === "3") { var output = res.join(" "); alert ("AWESOME!"); console.log (output); } else if (input == null|| input.toLowerCase() == "exit") { alert ("Thanks for using the ROBOT Language Converter!"); } else { alert ("Nope"); console.warn("You need to enter something"); } } } while(input.toLowerCase() != "exit"); </script> </head> </html>
  14. Is there any way to do this?

    <!DOCTYPE html> <html> <head> <title>Project 1 – Michael Fiorello</title> <p id="demo"></p> <script> do { //MAIN MENU var input = prompt("Please enter 1, 2, 3, or exit."); { //PROGRAM 1-Enter the string to be converted to robot speak if (input === "1") do { var one = prompt ("Please enter a string.");{ if (one === "") { console.warn("You need to enter something");} } }while (one === "")//keep repeating program 1 until something is entered, aka cannot be blank. //PROGRAM 2-Convert the string into robot speak else if (input === "2") { if (one == null) {console.warn ("You need to first enter a String")} else {console.log ("String Converted") var res = one.split(" "); for(i = 0; i<res.length; i++) if(res[i].length >= 5) { document.write(res[i]+"-blip "); } else{ document.write(res[i]+"-clang "); } } } //Program 3 Robot Language version of the string will appear in the console else if (input === "3") {var output = res.join(" "); alert ("AWESOME!"); console.log (output) } else if (input == null|| input.toLowerCase() == "exit") { alert ("Thanks for using the ROBOT Language Converter!"); } else { alert ("Nope"); console.warn("You need to enter something"); } } }while(input.toLowerCase() != "exit"); </script> </head> </html> Okay, so I have everything technically working, but I don't want it to "write" out the string to the page, just in the console when called upon in PROGRAM 3. I don't think innerHTML would work for that one, but I'm giving it a shot now.
  15. Is there any way to do this?

    Just found the getElementById page a moment ago, was about to update I was going to attempt to implement. For for(i = 0; i<res.one; i++) i = 0 is stating to start with the first array. i++ is adding to the counter. Trying to remember what i<res.one is I think it makes it so it can go on forever as long as var one exists. Only learned it for the first time yesterday. I know that if I did i<10 it would stop after the tenth interval //Never mind that edit was stupid.
×