Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation [CODE] I'm trying to make a quiz, but my code didn't work?

    Hello there.
    So here, I'm trying to make a quiz and it works. The problem is that, every time I click on answer , nothing happens. This is the example.
    [IMG]cats.jpg[/IMG]

    This is my codes

    <center><p class="question">1. "Dear Diary, I don't feel like going to the party because I'm<br>
    not beautiful like the other girls." <br>
    Based on the writing, the person is ________.<br>
    </p>

    <ul class="answers">
    <input type="radio" name="q1" value="a" id="q1a"><label for="q1a">Confident</label><br/>
    <input type="radio" name="q1" value="b" id="q1b"><label for="q1b">Insecure</label><br/>
    <input type="radio" name="q1" value="c" id="q1c"><label for="q1c">Comfortable</label><br/>
    <input type="radio" name="q1" value="d" id="q1d"><label for="q1d">Happy</label><br/>
    </ul></center>

    <center> <div id="results">
    Click for the answer!
    </div></center>

    <div id="category1">
    <p>
    <strong>Question 1:</strong> The correct answer is the <strong>Insecure</strong>.</p>
    </div>
    This is my CSS just in case you wanna see it

    .answers li {
    list-style: upper-alpha;
    }

    label {
    margin-left: 0.5em;
    cursor: pointer;
    }

    #results {
    background: #dddada;
    color: 000000;
    padding: 3px;
    text-align: center;
    width: 200px;
    cursor: pointer;
    border: 1px solid gray;
    }

    #results:hover {
    background: #3d91b8;
    color: #ffffff;
    padding: 3px;
    text-align: center;
    width: 200px;
    cursor: pointer;
    border: 1px solid gray;
    }

    #categorylist {
    margin-top: 6px;
    display: none;
    }

    #category1, #category2, #category3, #category4, #category5, #category6, #category7, #category8, #category9, #category10, #category11 {
    display: none;
    }

    #closing {
    display: none;
    font-style: italic;
    }

    p{
    color:#000080;
    font-size:25px;
    font-family:gabriola;
    }

    h1{
    color:#1E90FF;
    font-size:39px;
    font-family:freestyle script;
    }

    ul{
    color:#4169E1;
    font-size:22px;
    font-family:gabriola;
    }
    div{
    color:blue;
    font-size:15px;
    font-family:segoe print;
    }
    And my Javascript
    $(document).ready(function()
    { $("#results").click(function() {

    if (!$("input[@name=q1]:checked").val() ||
    !$("input[@name=q2]:checked").val() ||
    !$("input[@name=q3]:checked").val() ||
    !$("input[@name=q4]:checked").val() ||
    !$("input[@name=q5]:checked").val() ||
    !$("input[@name=q6]:checked").val() ||
    !$("input[@name=q7]:checked").val() ||
    !$("input[@name=q8]:checked").val() ||
    !$("input[@name=q9]:checked").val() ||
    !$("input[@name=q10]:checked").val()
    ) {
    alert("You're not done yet!");
    }

    else {
    var cat1name = "1";
    var cat2name = "2";
    var cat3name = "3";
    var cat4name = "4";
    var cat5name = "5";
    var cat6name = "6";
    var cat7name = "7";
    var cat8name = "8";
    var cat9name = "9";
    var cat10name = "10";
    var cat11name = "None";


    var cat1 = ($("input[@name=q1]:checked").val() != "a");

    var cat2 = ($("input[@name=q2]:checked").val() != "b");

    var cat3 = ($("input[@name=q3]:checked").val() != "c");

    var cat4 = ($("input[@name=q4]:checked").val() != "d");

    var cat5 = ($("input[@name=q5]:checked").val() != "a");

    var cat6 = ($("input[@name=q6]:checked").val() != "b");

    var cat7 = ($("input[@name=q7]:checked").val() != "c");

    var cat8 = ($("input[@name=q8]:checked").val() != "d");

    var cat9 = ($("input[@name=q9]:checked").val() != "a");

    var cat10 = ($("input[@name=q10]:checked").val() != "b");

    var cat11 = (!cat1 && !cat2 && !cat3 && !cat4 && !cat5 && !cat6 && !cat7 && !cat8 && !cat9 && !cat10); var categories = [];

    if (cat1) { categories.push(cat1name) };
    if (cat2) { categories.push(cat2name) };
    if (cat3) { categories.push(cat3name) };
    if (cat4) { categories.push(cat4name) };
    if (cat5) { categories.push(cat5name) };
    if (cat6) { categories.push(cat6name) };
    if (cat7) { categories.push(cat7name) };
    if (cat8) { categories.push(cat8name) };
    if (cat9) { categories.push(cat9name) };
    if (cat10) { categories.push(cat10name) };
    if (cat11) { categories.push(cat11name) };

    var catStr = 'You answered the following questions incorrectly: ' + categories.join(', ') + '';
    $("#categorylist").text(catStr);
    $("#categorylist").show("slow");

    if (cat1) { $("#category1").show("slow"); };
    if (cat2) { $("#category2").show("slow"); };
    if (cat3) { $("#category3").show("slow"); };
    if (cat4) { $("#category4").show("slow"); };
    if (cat5) { $("#category5").show("slow"); };
    if (cat6) { $("#category6").show("slow"); };
    if (cat7) { $("#category7").show("slow"); };
    if (cat8) { $("#category8").show("slow"); };
    if (cat9) { $("#category9").show("slow"); };
    if (cat10) { $("#category10").show("slow"); };
    if (cat11) { $("#category11").show("slow"); };
    { $("#closing").show("slow"); };
    }
    });});
    I hope you guys can help me! thankksss

  • #2
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh sorry! The picture didn't come out. What I'm trying to show is that when I already choose my answer and then I clicked the "Click for the answer!" nothing comes out to show me whether the answer is wrong or right

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,038
    Thanks
    23
    Thanked 589 Times in 588 Posts
    I would not use javascript for this, anyone can right click on page and see the code and get 100%. Use a server side language such as php and submit quesionare as a form, or use ajax to do the questions one at a time.

    If this is for practice or an assignment, let us know and someone will give you an easier way of doing this in js.
    Evolution - The non-random survival of random variants.

  • #4
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    I would not use javascript for this, anyone can right click on page and see the code and get 100%. Use a server side language such as php and submit quesionare as a form, or use ajax to do the questions one at a time.

    If this is for practice or an assignment, let us know and someone will give you an easier way of doing this in js.
    Thanks for answering and yes, this is actually our school project and I'm new to coding, just started last month

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,038
    Thanks
    23
    Thanked 589 Times in 588 Posts
    This may be convoluted. If so see if you understand it and make your own with this example.
    I used a function so I would not re-write the (almost) same thing over and over again.
    Also to make the response messages in one place.
    I put the 'results' type button at the bottom.
    If you have questions, ask.

    Code:
    <DOCTYPE html>
    <html>
    <head>
    <title>Title of the document</title>
    <style type="text/css">
    .answers li {
    list-style: upper-alpha;
    }
    
    label {
    margin-left: 0.5em;
    cursor: pointer;
    }
    
    #results {
    background: #dddada;
    color: 000000;
    padding: 3px;
    text-align: center;
    width: 200px;
    cursor: pointer;
    border: 1px solid gray;
    }
    
    #results:hover {
    background: #3d91b8;
    color: #ffffff;
    padding: 3px;
    text-align: center;
    width: 200px;
    cursor: pointer;
    border: 1px solid gray;
    }
    
    #categorylist {
    margin-top: 6px;
    display: none;
    }
    
    #category1, #category2, #category3, #category4, #category5, #category6, #category7, #category8, #category9, #category10, #category11 {
    display: none;
    }
    
    #closing {
    display: none;
    font-style: italic;
    }
    
    p{
    color:#000080;
    font-size:25px;
    font-family:gabriola;
    }
    
    h1{
    color:#1E90FF;
    font-size:39px;
    font-family:freestyle script;
    }
    
    ul{
    color:#4169E1;
    font-size:22px;
    font-family:gabriola;
    }
    div{
    color:blue;
    font-size:15px;
    font-family:segoe print;
    }</style>
    </head>
    
    <body>
    <p class="question">1. "Dear Diary, I don't feel like going to the party because I'm<br>
    not beautiful like the other girls." <br>
    Based on the writing, the person is ________.<br>
    </p>
    
    <ul class="answers">
    <input type="radio" name="q1" value="a"><label id="q1a">Confident</label><br/>
    <input type="radio" name="q1" value="b"><label id="q1b">Insecure</label><br/>
    <input type="radio" name="q1" value="c"><label id="q1c">Comfortable</label><br/>
    <input type="radio" name="q1" value="d"><label id="q1d">Happy</label><br/>
    </ul>
    
    <div id="category1"></div>
    
    <p class="question">2. "We have air (oxygen) because?" <br></p>
    <ul class="answers">
    <input type="radio" name="q2" value="a"><label id="q2a">Oxygen is the most common element</label><br/>
    <input type="radio" name="q2" value="b"><label id="q2b">To blow up basketballs</label><br/>
    <input type="radio" name="q2" value="c"><label id="q2c">It is produced by plants and trees</label><br/>
    <input type="radio" name="q2" value="d"><label id="q2d">It is a buffer between earth and empty space</label><br/>
    </ul>
    
    <div id="category2"></div>
    
    <div id="results">Click for the answer</div>
    <script type='text/javascript' src='javascript/jquery.js'></script>
    <script type="text/javascript">
    $(document).ready(function(){
    	var answers = ["fake","b","c"];  // THIS IS AN ARRAY TO HOLD THE ANSWERS. BECAUSE IT STARTS WITH 0 I USED "FAKE".
    	$("#results").click(function() {
    	if (!$("input[name=q1]:checked").val() ||
    	!$("input[name=q2]:checked").val()) // || LEFT ALL THIS HERE SO EASY TO ADD QUESTIONS TO YOUR CODE
    /*	!$("input[name=q3]:checked").val() ||
    	!$("input[name=q4]:checked").val() ||
    	!$("input[name=q5]:checked").val() ||
    	!$("input[name=q6]:checked").val() ||
    	!$("input[name=q7]:checked").val() ||
    	!$("input[name=q8]:checked").val() ||
    	!$("input[name=q9]:checked").val() ||
    	!$("input[name=q10]:checked").val())*/
    	{
    		alert("You're not done yet!");
    		die;                                 // THIS IS NEEDED TO KEEP THE SCRIPT FROM CONTINUING.
    	}
    	for(y=1; y<3; y++){
    		if ($("input[name=q"+y+"]:checked").val() == answers[y]){  // COMPARE CORRECT ANSWER IN ARRAY TO WHAT IS CHECKED
    			var sam = document.getElementById('q'+y+answers[y]).innerHTML;
    			response(y, answers[y], sam, "right");
    		}else{
    			var sam = document.getElementById('q'+y+answers[y]).innerHTML;
    			response(y, answers[y], sam, "wrong");
    		}
    	}
    	});
    
    	function response(x, num, ans, section){
    	var start = "<p style='color:green;'><strong>Correct</strong></p><p><strong>Question "+x+":</strong> The correct answer is <strong>";
    	var loser = "<p style='color:red;'><strong>Wrong</strong></p><p><strong>Question "+x+":</strong> The correct answer is <strong>";
    	var end = "</strong>.</p>";
    	if(section == "right")
    		$("#category"+x).html(start+ans+end);
    	if(section == "wrong")
    		$("#category"+x).html(loser+ans+end);
    	$("#category"+x).css("display", "block");
    	}
    });
    </script>
    </body>
    </html>
    Evolution - The non-random survival of random variants.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •