Jump to content

TheShadowGamer

Members
  • Posts

    28
  • Joined

  • Last visited

Everything posted by TheShadowGamer

  1. 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. 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. 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. 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. 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. 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. 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. 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. I'll give it a shot, thanks!
  10. 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. 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. 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. 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. <!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. 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.
  16. So I got program 2 to function, but it's not adding blip and clang to the words as well as keeping them as an array. I also can't figure out where to implement "<p id="trythis"></p>" to actually use "document.getElementBtId('trythis').innerHTML ="whatever"" and definitely need it because document.write seems to do f**k all. //Removed code for updated version below.
  17. Or how do I declare that input as an array once it's split if that's the issue. That's the last thing I can think of.
  18. So what does the string default to if not arr? I tried one, Array, array, res, and i and still not working. So what do I use instead of document write? Thats what we were taught in our tutorial videos
  19. I think I've got it but I can't figure out how to fix line 24 so that it will actually do it. <!DOCTYPE html> <html> <head> <title>Project 1 – Michael Fiorello</title> <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(" ");{ //Line 24, well technically now the problem is on Line 25 for(i = 0, i<Arr.length, i++) if(res[i].length >= 5) { Document.write(Arr.[i]+"-blip"); } else{ Document.write(Arr.[i]+"-clang"); } } } } //Program 3 Robot Language version of the string will appear in the console else if (input == "3") { alert ("AWESOME!"); } else if (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> <body> <h1></h1> </body> </html>
  20. I think I understand what you mean, but what do I replace this "alert" message with alert("'"+res[0]+"'" + " length is: "+res[0].length); to just record them as an array?
  21. Currently what I can't figure out is how to record them rather than just saying the lengths. I need to be able to do this If a word is five or more letters long, add “-blip” to the end of the word If a word is less than five letters long, add “-clang” to the end of the word. It's the only part of the program that I'm completely dumbfounded on.
  22. Thank you, that seems like it will work perfectly.
  23. So what I want to do is make it so the user enters a string. For example a prompt comes up and the user enters "I want to do something" into the text box. Is there a way to make each word into its own variable so that they would become var I var want var to var do var something so that I can then check length and change each individually? Trying to find a way, but all I can find is checking length of an entered string, but not the ability to check each word individually.
  24. I got it to work by removing null and replacing it with ""
  25. I still have no clue what you mean or how to fix it. I tried changing it to == also.
×
×
  • Create New...