Jump to content

Ananemain

Members
  • Posts

    3
  • Joined

  • Last visited

Ananemain's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. Hey W3! I'm working on building an online quiz. The form is built using HTML (and looks pretty good), but all of the processing needs to be done with JS. I'm incredibly new to the coding game and need some serious help with this. The collection of tutorials, code snippets, and articles I've read haven't helped much, so now I'm here. Functionally, all the code needs to do is verify whether or not the person entered his/her name and if the answer to each question is correct. If correct, it adds one to the score. If not, it does nothing. I've included my existing, completely non-working code below as well as the HTML to give you a sense of what I'm working with. I need some direction and some sound advice on where to take my code from here. And how to get the whole thing to run properly. It needs to display the results somewhere on the page (or on a different page, whichever is easier) when the "Submit" button is clicked. (Sadly, I can't use an alert to show the results.) Just as a disclaimer, I DON'T want you to write the code for me. Just some general code bits or a push in the right direction would be immensely helpful. I'm sort of at the end of my rope here. Thanks! Javascript var totalquestions = 10var correctchoices = new Array[]correctchoices[0] ='c' correctchoices[1] ='b' correctchoices[2] ='d'correctchoices[3] ='c'correctchoices[4] ='d'correctchoices[5] ='d'correctchoices[6] ='a'correctchoices[7] ='d'correctchoices[8] ='a'correctchoices[9] ='a'function gradeit(){var incorrect=nullfor (q=1;q<=totalquestions;q++){ var thequestion=eval("document.myquiz.question"+q) for (c=0;c<thequestion.length;c++){ if (thequestion[c].checked==true) actualchoices[q]=thequestion[c].value } if (actualchoices[q]!=correctchoices[q]){ if (incorrect==null) incorrect=q else incorrect+="/"+q } }if (incorrect==null)incorrect="a/b"document.cookie='q='+incorrectif (document.cookie=='')alert("Your browser does not accept cookies. Please adjust your browser settings.")elsewindow.location="results.htm"}function showsolution(){var win2=window.open("","win2","width=200,height=350, scrollbars")win2.focus()win2.document.open()win2.document.write('<title>Solution</title>')win2.document.write('<body bgcolor="#FFFFFF">')win2.document.write('<center><h3>Solution to Quiz</h3></center>')win2.document.write('<center><font face="Arial">')for (i=1;i<=totalquestions;i++){for (temp=0;temp<incorrect.length;temp++){if (i==incorrect[temp])wrong=1}if (wrong==1){win2.document.write("Question "+i+"="+correctchoices[i].fontcolor("red")+"<br>")wrong=0}elsewin2.document.write("Question "+i+"="+correctchoices[i]+"<br>")}win2.document.write('</center></font>')win2.document.write("<h5>Note: The solutions in red are the ones to the questions you had incorrectly answered.</h5><p align='center'><small><a href='http://www.javascriptkit.com' target='_new'>JavaScript Kit quiz script</a></small>")win2.document.close()} HTML <!DOCTYPE html><html><head> <link rel="stylesheet" link href="Style.css" type="text/css"</> <script src="quizscript.js"></script> <script> var actualchoices=new Array() document.cookie="ready=yes" </script></head><body> <div id="container" style="width:1000px"> <div id="header"> <h1 style="margin-bottom:0;">ePortfolio for Designing Integrated Media Environments 2</h1> <h3>Sherry Walsh</h3> </div> <hr> <div id="menu"> <b>Menu</b> <ul class="a"> <li><a href="index.html">Home Page</a></l1> <l1><a href="Assign1index.html">About Me</a></l1> <li><a href="Assign2index.html">Greyhounds</a></li> <li>Assignment 3</li> <li>Assignment 4</li> <li>Assignment 5</li> <li>Assignment 6</li> <li>Assignment 7</li> </ul> </div> <div id="content"> <div id="text"> <br> <h2>Greyhounds</h2><br> <b>Please type in your name:</b><input type="text" id= "name" name="name"><br> <form method="POST" name="myquiz"> <p><B>Please fill in the blank with the best word choice, then answer the questions below.</B></p> <a href="http://greyhounddogsite.com" target="_blank"><img src="greyhound-and-cat.jpg" style="float:right; width:400px; padding-top:15px;padding-left:15px;" alt="Greyhound resting with cat."></a> <p>Greyhound racing is the sixth most <span id="GapSpan0" class="question1"> <select id="question1"> <option value="a">Please Answer</option> <option value="b">expensive</option> <option value="c">popular</option> <option value="d">daring</option> </select> </span> spectator sport in the United States. Over the last decade, a growing number of racers have been adopted to spend their retirement as household pets, once their racing careers are over. </p><br> <p>Many people <span id="GapSpan1" class="question2"> <select id="question2"> <option value="a">Please Answer</option> <option value="b">hesitate</option> <option value="c">are eager</option> <option value="d">wish</option> </select> </span> to adopt a retired racing greyhound because they think only very old dogs are available. Actually, even champion racers only work until they are about three-and-a-half years old. Because greyhounds usually live to be 12 to 15 years old, their retirement is much longer than their racing careers. </p><br> <p>People worry that a greyhound will be more nervous and active than other breeds and will need a large space to run. These are false impressions. Greyhounds have naturally sweet, mild dispositions, and while they love to run, they are <span id="GapSpan2" class="question3"> <select id="question3"> <option value="a">Please Answer</option> <option value="b">milers</option> <option value="c">marathoners</option> <option value="d">sprinters</option> </select> </span> rather than distance runners and are sufficiently exercised with a few daily laps around a fenced-in backyard.</p><br> <p>Greyhounds do not make good watchdogs, but they are very good with children, get along well with other dogs (and usually cats as well), and are <span id="GapSpan3" class="question4"> <select id="question4"> <option value="a">Please Answer</option> <option value="b">agressive</option> <option value="c">affectionate</option> <option value="d">disloyal</option> </select> </span> and loyal. They are intelligent, well-behaved dogs, usually housebroken in only a few days. A retired racing greyhound is a wonderful pet for almost anyone. </p><br> <p><b>Please select the best answer.</b></p> <p id="Q1">Based on the tone of the passage, the author's main purpose is to:</p> <input type="radio" name="question5" id="question5" value="a"/>teach prospective owners how to transform their racing greyhound into a good pet.<br> <input type="radio" name="question5" id="question5" value="b">show how the greyhound's nature makes it equally good as racer and pet.<br> <input type="radio" name="question5" id="question5" value="c">encourage people to adopt retired racing greyhounds.<br> <input type="radio" name="question5" id="question5" value="d">objectively present the pros and cons of adopting a racing greyhound.<br><br> <p id="Q2">According to the passage, adopting a greyhound is a good idea for people who</p> <input type="radio" name="question6"id="question6" value="a">do not have children.<br> <input type="radio" name="question6"id="question6" value="b">live in apartments.<br> <input type="radio" name="question6" id="question6" value="c">do not usually like dogs.<br> <input type="radio" name="question6" id="question6" value="d">already have another dog or a cat.<br> <p id="Q3">Which of the following is implied by the passage?</p> <input type="radio" name="question7" id="question7" value="a">The public is more aware of greyhounds than they used to be.<br> <input type="radio" name="question7" id="question7" value="b">Greyhounds are more competitive than other dogs.<br> <input type="radio" name="question7" id="question7" value="c">Greyhound racing should not be allowed.<br> <input type="radio" name="question7" id="question7" value="d">People who own pet rabbits should not adopt greyhounds.<br> <p id="Q4">One drawback of adopting a greyhound is that</p> <input type="radio" name="question8" id="question8" value="a">greyhounds are not good with children.<br> <input type="radio" name="question8" id="question8" value="b">greyhounds are old when they retire from racing.<br> <input type="radio" name="question8" id="question8" value="c">the greyhound's sensitivity makes it temperamental.<br> <input type="radio" name="question8" id="question8" value="d">greyhounds are not good watch dogs.<br> <p><b>Please check all of the correct answers.</b></p> <p id="Q5">This passage is most like an advertisement because it</p> <input type="checkbox" name="question9" id="question9" value="b">uses statistics to prove its point.<br> <input type="checkbox" name="question9" id="question9" value="a">presents information to substantiate its claims.<br> <input type="checkbox" name="question9" id="question9" value="b">says nothing negative about greyhounds.<br> <input type="checkbox" name="question9" id="question9" value="a">encourages people to do something.<br> <p id="Q6">According to the passage, a retired racing greyhound available for adoption will most likely be</p> <input type="checkbox" name="question10" id="question10" value="b">happy to be retiring.<br> <input type="checkbox" name="question10" id="question10" value="a">easily housebroken.<br> <input type="checkbox" name="question10" id="question10" value="b">less high-strung than those that are not available for adoption.<br> <input type="checkbox" name="question10" id="question10" value="a">a wonderful pet for almost anyone.<br> </p> </form> <form><div align="center"><input type="button" value="Grade Me!" name="B1" onClick="gradeit()"> <input type="button" value="Reset" name="B2" onClick="document.myquiz.reset()"> </div></form> <p>Name of first form: <script> document.write(document.forms[0].name); </script></p> <p>Passage and questions are from: <a href=http://www.education.com/study-help/article/passage-51/ target="_blank">education.com</a></p> </div> </div> </div> </div> </body></html>
  2. Solved! It turns out the problem was my organization. I had the right menu bar in the div containing all my main content. As I adjusted the menu to compensate for the content items, things got out of whack. I placed the whole menu in another, separate div, took out a whole lot of unnecessary coding, and fixed the problem. Now it all looks great! I'll leave my initial post for anyone who wants to read it. I'm about to pull my hair out over here. I'm working in Brackets on a new site and I can't for the life of me get one element to display the same over all browsers. I have a menu bar on the right that looks great in Firefox and Chrome but is wildly different, like 300px different, in Safari. For some reason, it displays way higher in Safari than any other browser. No other attribute is changed. Just the top. I'm sure you guys get tons of questions like this, but most fixes I've found so far don't help. I'm using normalize, which has helped immensely with other problems (literally everything else looks exactly the same), but not this one thing. And by all means, tell me if I'm doing this whole thing completely wrong. I'm self-taught, so any advice is greatly appreciated. HTML: <a href="index.html" class="homelink"><div class="Homebg"> <img src="Images/home.png"> </div></a> <a href="about.html" class="homelink"><div class="Aboutbg"> <img src="Images/about.png"> </div></a> <a href="hawthorne.html" class="homelink"><div class="Hawthornebg"> <img src="Images/glasses.png"> </div></a> <a href="chatter.html" class="homelink"><div class="Chatterbg"> <img src="Images/pizza.png"> </div></a> <a href="sakamoto.html" class="homelink"><div class="Sakabg"> <img src="Images/camera.png"> </div></a> <a href="other.html" class="homelink"><div class="Otherbg"> <img src="Images/pill.png"> </div></a> <a href="contact.html" class="homelink"><div class="Contactbg"> <img src="Images/mail.png"> </div></a> CSS: .RightBG { position:relative; display:inline-block; left: 0px; top: 0px; width: 960px; height: 600px;}.Contactbg { position:relative; border-style: solid; border-width: 2px; border-color: rgb( 215, 215, 215 ); background-color: rgb( 255, 255, 255 ); left: 854px; right:87px; top: -915px; width: 63px; height: 67px; line-height:67px; text-align:center; }.Contactbg:hover { background-color:#ad45ab;}.Contactbg img { vertical-align:middle;}.Otherbg { position:relative; border-style: solid; border-width: 2px; border-color: rgb( 215, 215, 215 ); background-color: rgb( 255, 255, 255 ); left: 854px; right:87px; top: -919px; width: 63px; height: 67px; line-height:67px; text-align:center;}.Otherbg:hover { background-color:#3ebd3e;}.Otherbg img { vertical-align:middle;}.Sakabg { border: 2px solid rgb( 215, 215, 215 ); background-color: white; position:relative; left:854px; top:-923px; width: 63px; height: 67px; line-height:67px; text-align:center;}.Sakabg:hover { background-color: #b1000b;}.Sakabg img { vertical-align:middle;}.Chatterbg { position:relative;border-style: solid; border-width: 2px; border-color: rgb( 215, 215, 215 ); background-color: rgb( 255, 255, 255 );left: 854px; right:87px; top: -927px; width: 63px; height: 67px; line-height:67px; text-align:center;}.Chatterbg:hover { background-color: #FF9A00;}.Chatterbg img { vertical-align:middle;}.Hawthornebg { position:relative; border-style: solid; border-width: 2px; border-color: rgb( 215, 215, 215 ); background-color: rgb( 255, 255, 255 );left: 854px; right:87px; top: -931px; width: 63px; height: 67px; line-height:67px; text-align:center;}.Hawthornebg:hover { background-color:#5555ce;}.Hawthornebg img { vertical-align:middle;}.Aboutbg { position:relative; border-style: solid; border-width: 2px; border-color: rgb( 215, 215, 215 ); background-color: rgb( 255, 255, 255 );left: 854px; right:87px; top: -935px; width: 63px; height: 67px; line-height:67px; text-align:center;}.Aboutbg:hover { background-color:#e9eb25;}.Aboutbg img { vertical-align:middle;}.Homebg { position:relative; border-style: solid; border-width: 2px; border-color: rgb( 215, 215, 215 ); background-color: rgb( 255, 255, 255 ); background-image: url("White.png"); left: 854px; right:87px; top: -939px; width: 63px; height: 67px; line-height:65px; }.homelink { display:block; height:67px; width:63px;}.Homebg:hover {/* height:74px;*/ background-color:rgb( 215, 215, 215 );}.Homebg img { vertical-align:middle; margin-left:11px;}
  3. I have three images (header and two bars to frame my nav bar) centered using this code: .main { display: block; margin-left: auto; margin-right: auto;} This looks fine, but when I center text using text-align, it's all slightly off center. I didn't notice until I fully set up my navbar and realized the text was farther to the right than "center." I fixed it by adjusting margin-right, but I want to know what caused the problem. (Especially since I'm having the same problem with the footer.) Nav Bar Code: #bar ul{ list-style: none; text-align: center; word-spacing: 150px; margin-right: 40px; }#bar li { font-family: Helvetica, "Helvetica Neue", Gotham, Arial, sans-serif; font-size: 20px; display:inline;}
×
×
  • Create New...