ahaberman25 Posted November 29, 2012 Share Posted November 29, 2012 I am trying to build a jquery quiz using the numbers added in the text fields for each answer, then adding up the answers at the end once submitted and based on the answers like (answer < 6 output: something) and so forth. the code i have so far is : <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script src="js/jquery-1.8.2.js"></script> <script src="js/jquery.validate.js"></script> <script> $(document).ready(function() { function mySubmitHandler() { // the following are just examples of what you could do var q1val = $('#txt1').val(); var q2val = $('#txt2').val(); if(q1val + q2val > 5) $('#success').show(); else $('#fail').show(); // end example return false; // this keeps the form from doing a postback } }); // end ready </script> <title></title> <style> input { float:right; } </style> </head> <body id="main-content"> <div id="container"> <h1>Take the Sleep Disorder Self-Quiz -<br />Epworth Sleepiness Scale</h1> <p><span style="font-size: 10pt;">How likely are you to doze off or fall asleep in the following situations, in contrast to just feeling tired? This refers to your usual way of life in recent times. Even if you have not done some of these things recently, try to work out how they would have affected you. Use the following scale and enter the number for each situation.</span></p> <div> <p style="text-align: left; margin-left: 180px;"><strong>0</strong> = no chance of dozing<br /> <strong>1</strong> = slight chance of dozing<br /> <strong>2</strong> = moderate chance of dozing<br /> <strong>3</strong> = high chance of dozing</p> </div> <!-- start form --> <form id="myform" onsubmit="return mySubmitHandler()"> <fieldset> <legend>Quiz</legend> <h3><span style="text-decoration: underline;">SITUATION</span><span style="text-decoration: underline; float:right;">Chance of dozing</span></h3> <label for="txt1">Sitting and reading</label> <input type="text" class="qi" name="txt1" id="txt1" size="5" tabindex="1" value="0" /> <br /> <br /> <label for="txt2">Watching TV</label> <input type="text" class="qi" name="txt2" id="txt2" size="5" tabindex="2" value="0" /> <br /> <br /> <label for="txt3">Sitting inactive in a public place (Such as a theatre or a meeting)</label> <input type="text" class="qi" name="txt3" id="txt3" size="5" tabindex="4" value="0" /> <br /> <br /> <label for="txt4">As a passenger in a car for an hour without a break</label> <input type="text" class="qi" name="txt4" id="txt4" size="5" tabindex="5" value="0" /> <br /> <br /> <label for="txt5">Lying down to rest in the afternoon when time permits</label> <input type="text" class="qi" name="txt5" id="txt5" size="5" tabindex="6" value="0" /> <br /> <br /> <label for="txt6">Sitting and talking to someone</label> <input type="text" class="qi" name="txt6" id="txt6" size="5" tabindex="7" value="0" /> <br /> <br /> <label for="txt7">Sitting quietly after lunch without alcohol</label> <input type="text" class="qi" name="txt7" id="txt7" size="5" tabindex="8" value="0" /> <br /> <br /> <label for="txt8">In a car, while stopped for a few minutes in traffic</label> <input type="text" class="qi" name="txt8" id="txt8" size="5" tabindex="9" value="0" /> <br /> <br /> <div style="display: block clear:both;"> <div style="color: #00658f; font-size: 16px; float: left;"><strong>TOTAL SCORE</strong></div> </div> <div style="color: #00658f; font-size: 16px;"><strong><span id="total"> </span></strong></div> <input type="submit" value="submit"> </fieldset> </form> </div><!-- close container --> </body> </html> no matter what I have researched and tried its not working out for me. If anyone knows any links or any ideas please help me out. If its too much work I understand. p.s. will also be adding form validation for answers can only be 0-4 and only numeric. sleep.html Quote Link to comment Share on other sites More sharing options...
ahaberman25 Posted November 29, 2012 Author Share Posted November 29, 2012 was also thinking of taking "slick quiz" and converting it to accept text field numeric answers. cant upload them though Quote Link to comment Share on other sites More sharing options...
MDCode Posted November 30, 2012 Share Posted November 30, 2012 What exactly is "not working out for me." Quote Link to comment Share on other sites More sharing options...
ahaberman25 Posted November 30, 2012 Author Share Posted November 30, 2012 The things I have tried to do to code this out have not had the result I am wishing for this. I believe it goes a little past the knowledge that i know of js and jquery Quote Link to comment Share on other sites More sharing options...
ahaberman25 Posted November 30, 2012 Author Share Posted November 30, 2012 it is basically this test http://www.stanford.edu/~dement/epworth.html but i need to make it interactive where the person will input the number that corosponds with their answer and then at the end it will at it up and give the correct answer. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.