arrays - Personality Quiz with Javascript -
i quite new javascript , have make personality quiz. need quiz javascript, no jquery. need make each answer option clickable, , show 1 question @ time. finding way store each answer display result. i'm not sure start , i've been having bit of trouble. may seem silly, i'd in seeing i've gone wrong , how can fix it. below i've done far html, css , javascript. in advance
var startbutton = document.getelementbyid("startbutton"); startbutton.addeventlistener("click", startclick); function startclick() { var intro = document.getelementbyid("intro"); intro.style.display = "none"; startbutton.style.display = "none"; var question1 = document.getelementbyid("question1"); question1.style.display = "block"; } var answerbutton = document.getelementsbytagname("li"); answerbutton[0].addeventlistener("click", answerclick); console.dir(answerbutton); function answerclick(eventobject) { var eventclick = eventobject.target; var question = document.getelementsbyclassname("question"); for(i= 0; < question.length; ++); { question[i].style.display = "block"; } }@charset"utf-8"; /* css document */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; } /* html5 display-role reset older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1.5; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /*above eric meyer css reset*/ #titleimage { width: 100%; padding-top: .5%; padding-bottom: .5%; } #titleimage img { max-width: 100%; } .question, #results { display: none; } p { font-family:'helvetica'; font-size: 1.7em; font-weight: 100; text-align:center; padding: 1em; } h3 { font-family:'helvetica'; font-size: 1.7em; font-weight: 150; text-align:center; } h2 { font-family:'helvetica'; font-size: 1.5em; font-weight:200; text-align:center; } .button { margin: 0.5em; padding: 0.5em; text-align:center; } .button:hover { text-decoration: underline; } .question li { border: 1px solid; margin: 0.5em; padding: 0.5em; font-family:'helvetica'; font-size: 1.5em; text-align:center; background-color: #addef4; } .question li:hover { text-decoration: underline; } #results img { padding-left: 30%; padding-right: 30%; }<body> <div id="titleimage"> <img src="parks-and-rec.jpg" alt="parks , rec banner"> </div> <div id="intro"> <h2>take quiz see parks , rec character you!</h2> </div> <div id="startbutton" class="button"> <h3>let's started!</h3> </div> <div id="question1" class="question"> <p>what favourite food?</p> <ul id="answers1"> <li>breakfast food</li> <li>waffles</li> <li>calzones</li> <li>vegan superfoods</li> </ul> </div> <div id="question2" class="question"> <p>what enjoy doing in spare time?</p> <ul id="answers2"> <li>woodwork in solitary</li> <li>work!</li> <li>make stop motion 'movies'</li> <li>run!</li> </ul> </div> <div id="question3" class="question"> <p>what on "treat yo'self" day?</p> <ul id="answers3"> <li>buy batman suit , batman</li> <li>go lakehouse myself</li> <li>treat myself waffles , friends</li> <li>run! or maybe yoga</li> </ul> </div> <div id="question4" class="question"> <p>what doing on friday night?</p> <ul id="answers4"> <li>cooking vegan hamburgers</li> <li>being alone, maybe scotch</li> <li>still working or hanging out bestie</li> <li>watching game of thrones</li> </ul> </div> <div id="question5" class ="question" > <p>what find funny?</p> <ul id="answers5"> <li>accounting puns</li> <li>the government</li> <li>myself</li> <li>you can laugh @ anything!</li> </ul> </div> <div id="results"> <div id="leslie" class="result"> <p>you leslie knope!</p> <img src="leslie.jpg" alt="leslie knope giving 2 thumbs up!"> </div> <div id="ron" class="result"> <p>you got ron swanson!</p> <img src="ron.png" alt="ron swanson smiling"> </div> <div id="ben" class="result"> <p>you got ben wyatt!</p> <img src="ben.png" alt="ben wyatt"> </div> <div id="chris" class="result"> <p>you got chirs traeger!</p> <img src="chris.png" alt="chris traeger saying job"> </div> </div> </body> <script type="application/javascript" src="quiz.js"></script> </html>
not sure have problem with, might help.
a possible route have questions , answers in object, kind of
var quizz = [ { question: 'what favourite foode?', answers : { 'breakfast': 'value helps calculate', 'calzone': 'value helps calculate' } }, { question: 'other question?', answers : { 'answer 1': 'value helps calculate', 'answer 2': 'value helps calculate' } } ]; then maybe have object handles answers. have function checks question, , updates result answer's value.
that should work , figure out.
as getting answers, make sure use html form elements properly, values , test against question. can change "page" changing question wrapper, or rendering object questions (rendering current+1 quizz array).
excuse formatting :p. best of luck!
Comments
Post a Comment