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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Dec 2016
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How practical is this code, and how can I condense it to where it does the same thing

    but with less lines and not so much repetition?


    Here is the HTML part

    Code:
                <div class="answerContainer">    
    
                    <p class="question"></p>
                
            <p class="answerOption" onclick="quizFunction()"></p>
            <p class="answerOption" onclick="quizFunction()"></p>
            <p class="answerOption" onclick="quizFunction()"></p>
            <p class="answerOption" onclick="quizFunction()"></p>
            <p class="answerOption" onclick="quizFunction1()"></p>
            
                <p class="question"></p>
    
            <p class="answerOption" onclick="quizFunction2()"></p>
            <p class="answerOption" onclick="quizFunction3()"></p>        
            <p class="answerOption" onclick="quizFunction2()"></p>
            <p class="answerOption" onclick="quizFunction2()"></p>
            <p class="answerOption" onclick="quizFunction2()"></p>
        
            
            
                <p class="question"></p>
            
            <p class="answerOption" onclick="quizFunction4()"></p>
            <p class="answerOption" onclick="quizFunction4()"></p>
            <p class="answerOption" onclick="quizFunction4()"></p>
            <p class="answerOption" onclick="quizFunction4()"></p>
            <p class="answerOption" onclick="quizFunction5()"></p><br><br>
            
            <button class="clickMe" onclick="results()">Click to Submit Answers</button>
            
            
        
        
                 <p class="winnerResult"></p>
                 <p class="loserResult"></p>
                    
    
            </div>
        
            <p class="displayArray"></p>
    Last edited by VIPStephan; Jan 17th, 2017 at 10:35 PM. Reason: added code BB tags

  2. #2
    New to the CF scene
    Join Date
    Dec 2016
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is the CSS part.

    Code:
    div.questionContainer{
        height:500px;
        width:50%;
        background-color:green;
        border-style:solid;
        margin-left:50px;
        margin-bottom: 50px;
        font-size:14px;
        
    }
    
    p.question{
    
    border-style:solid;
    background-color:skyblue;
    padding: 5px;
    
    border-width:2px;
    border-right:none;
    border-left:none;
    }
    
    p.answerOption{
        border-style:solid;
        background-color:white;
        border-radius: 5px;
        border-width:2px;
        display: inline;
        padding: 5px;
    
        
        
    }
    
    p.answerOption:hover{
        background-color: red;
        
    }
    
    p.answerOption:active{
        border-width:1px;
        
    }
    
    
    div.answerContainer{
        background-color:green;
        border-style:solid;
    width:80%;
    text-align:center;
    margin-left: 40px;
    margin-bottom:50px;
    height:600px;
    
    
        
    }
    
    p.winnerResult{
        border-style:solid;
        height: 100px;
        width:80%;
        background-color: yellow;
        margin-left:auto;
        margin-right:auto;
        margin-top: 20px;
        visibility: hidden;
        font-size: 40px;
        
        
    }
    
    p.loserResult{
        border-style:solid;
        height: 100px;
        width:80%;
        background-color: red;
        margin-left:auto;
        margin-right:auto;
        visibility: hidden;
        font-size: 40px;
    }
    
    p.displayArray{
        
        height: 300px;
        width:80%;
        background-color:pink;
        margin-left: auto;
        margin-right: auto;
        
    }
    
    button.clickMe{
        
        
    }
    Last edited by VIPStephan; Jan 17th, 2017 at 10:36 PM. Reason: added code BB tags

  3. #3
    New to the CF scene
    Join Date
    Dec 2016
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is the JavaScript section.

    It's supposed to be a 3 question quiz with multiple choice answers. I want the user to read the question, then choose his answer. Once all questions are answered, he clicks the submit button. If he gets them all right, a yellow block comes up with text letting him know that he got them all right. If he gets any incorrect at all, then a red block comes up letting him know he failed.

    The way I did it is I created two functions for each question. One function runs only if an incorrect answer is clicked, and the other runs only if the correct answer is clicked. If an incorrect answer is clicked, the function uses .push to push the value 'Wrong!' into an array. If the correct answer is clicked, the function uses .push to push the value 'Correct!' into the same array.

    Once the 'Click here to submit answers' button is clicked, it checks the array to see if the 'Correct!' or 'Wrong!' values are in the 0 index place or in the 0 and 1 index place. It also checks if the 1 and 2 index places exist at all. If any of these things are true, then it comes up with an alert telling the user the he can't submit it without answering all three questions.

    It does a bunch of checks testing a bunch of different combinations. If the 'Correct!' value is in the 0, 1 and 2 index places, then the yellow Winner block comes up. If the same is true for the 'Wrong' value, then the Loser block comes up. Any combination that has a mix of 'Wrong!' and 'Correct!' brings up the Loser block.

    I'm a noob so this took me all day and I can't help but think that there's a simpler way to do it all with less lines of code. How should it be done?


    PHP Code:
    //NEW QUIZ SECTION


    //Elements Stored in Variables

    var quizContainer document.getElementsByClassName('questionContainer');
    var 
    question document.getElementsByClassName('question');
    var 
    answerCont document.getElementsByClassName('answerOption');

    var 
    resultsArray = [];
    var 
    result1 document.getElementsByClassName('winnerResult');
    var 
    result2 document.getElementsByClassName('loserResult');


    //Below code are the answer options to appear on the web page

    question[0].textContent 'What is the background color of the box this question is in?'//First Question
    var wrongAnswer = ['Black''Yellow''Green''Purple'];
    var 
    correctAnswer "White"

    answerCont[0].textContent wrongAnswer[0];
    answerCont[1].textContent wrongAnswer[1];
    answerCont[2].textContent wrongAnswer[2];
    answerCont[3].textContent wrongAnswer[3];    
    answerCont[4].textContent correctAnswer;



    function 
    quizFunction(){
        
            
    question[0].textContent 'Wrong!'//wrong
            
    resultsArray.push('Wrong!');
            
    quizFunction undefined;
        };

    function 
    quizFunction1(){
        
        if(
    quizFunction){
            
        
    question[0].textContent 'Correct!';//correct
            
    resultsArray.push('Correct!');
        
    //results();
        
    }
        
    }

    //QUESTION 2

    question[1].textContent 'Who directed the sequel to Alien?'//Second Question
    var wrongAnswer2 = ['Ridley Scott''Clint Eastwood''Hideo Kojima''Christopher Nolan'];
    var 
    correctAnswer2 'James Cameron';
    answerCont[5].textContent wrongAnswer2[0];
    answerCont[6].textContent correctAnswer2;
    answerCont[7].textContent wrongAnswer2[1];
    answerCont[8].textContent wrongAnswer2[2];
    answerCont[9].textContent wrongAnswer2[3];

    function 
    quizFunction2(){
        
            
    question[1].textContent 'Wrong!'//wrong
            
    resultsArray.push('Wrong!');
            
    quizFunction2 undefined;
        
        };

    function 
    quizFunction3(){
        
        if(
    quizFunction2){
            
        
    question[1].textContent 'Correct!'//correct
        
    resultsArray.push('Correct!');
            
    //results();
        
    }
        
    }


    //QUESTION 3
    question[2].textContent 'Who was the founder of Microsoft?'//Second Question
    var wrongAnswer3 = ['Dev Patel''Steve Jobs''Donald Trump''Satya Nadella'];
    var 
    correctAnswer3 'Bill Gates';
    answerCont[10].textContent wrongAnswer3[0];
    answerCont[11].textContent wrongAnswer3[3];
    answerCont[12].textContent wrongAnswer3[1];
    answerCont[13].textContent wrongAnswer3[2];
    answerCont[14].textContent correctAnswer3;

    function 
    quizFunction4(){
        
            
    question[2].textContent 'Wrong!'//wrong
            
    resultsArray.push('Wrong!');
            
    quizFunction4 undefined;
        
            
        };

    function 
    quizFunction5(){
        
        if(
    quizFunction4){
            
        
    question[2].textContent 'Correct!'//correct

            
    resultsArray.push('Correct!');

        }


        
    }



    //WINNER CODE
    //check if all three have run.
    //check if all three are correctAnswer
    //check if some are correct and others not.
    //var displayArra = document.getElementsByClassName('displayArray');
    //displayArra[0].textContent = resultsArray;

    //var testArray = ['Correct!', 'Correct!', 'Correct!'];

        //check if one or more of them array values are empty

    function results(){
            if(
    resultsArray[0] == 'Correct!' && resultsArray[1] == null || resultsArray[0] == 'Wrong!' && resultsArray[1] == null ||
            
    resultsArray[0] == 'Correct!' && resultsArray[1] == 'Correct!' && resultsArray[2] == null){
                
                
    alert('You must complete the entire questionnaire');
            }
            
            else if(
            
    resultsArray[0] == 'Correct!' && resultsArray[1] == 'Wrong!' && resultsArray[2] == 'Wrong!' || 
            
    resultsArray[0] == 'Wrong!' && resultsArray[1] == 'Correct!' && resultsArray[2] == 'Wrong!' || 
            
    resultsArray[0] == 'Wrong!' && resultsArray[1] == 'Wrong!' && resultsArray[2] == 'Correct!' ||
            
    resultsArray[0] == 'Correct!' && resultsArray[1] == 'Wrong!' && resultsArray[2] == 'Wrong!'||
            
    resultsArray[0] == 'Correct!' && resultsArray[1] == 'Correct!' && resultsArray[2] == 'Wrong!' || 
            
    resultsArray[0] == 'Wrong!' && resultsArray[1] == 'Wrong!' && resultsArray[2] == 'Correct!' ||
            
    resultsArray[0] == 'Wrong!' && resultsArray[1] == 'Correct!' && resultsArray[2] == 'Correct!' ||
            
    resultsArray[0] == 'Correct!' && resultsArray[1] == 'Wrong!' && resultsArray[2] == 'Correct!' 
                   
    &nbsp;){
                        
                        
                
    result2[0].style.visibility 'visible';
                
    result2[0].textContent 'You failed! Try again loser.';
            }
            
            
            
        
        else if(
    resultsArray[0] == 'Correct!' && resultsArray[1] == 'Correct!' && resultsArray[2] == 'Correct!'){
                    
    result1[0].style.visibility 'visible';
                    
    result1[0].textContent 'Congratulations. You got them all right!';
                    
    //alert(resultsArray);
        
    }
        
        
    //check if any of the array values are incorrect
        

        
    else if(resultsArray[0] == 'Wrong!' && resultsArray[1] == 'Wrong!' && resultsArray[2] == 'Wrong!'){
                
    result2[0].style.visibility 'visible';
                
    result2[0].textContent 'You failed! Try again loser.';
            
        }
        
            
            
        
        
            else if(
    resultsArray[0] == 'Wrong!' || resultsArray[1] == 'Wrong!' || resultsArray[2] == 'Wrong!'){
                
    //result2[0].style.visibility = 'visible';
                //result2[0].textContent = '';
                
    alert('You must complete the entire questionnaire');
        }

        
    //else if(resultsArray[0] == 'Wrong'){
            //    results[0].style.visibility = 'hidden';
        
        //}

    Last edited by VIPStephan; Jan 17th, 2017 at 10:36 PM. Reason: added code BB tags

  4. #4
    New to the CF scene
    Join Date
    Dec 2016
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is the quiz...

    https://plnkr.co/WBnJwmKIlGbdUIdIW5jd

    The javascript seems to have gotten messed up when I posted it here. I think the HTML, CSS and Javascript can be accessed by others by launching the editor in that plunker link.

  5. #5
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,505
    Thanks
    4
    Thanked 503 Times in 491 Posts
    1) if you have a bunch of tags in a row that would all get the same style, give it ONE wrapping DIV with a class and lose the classes on the individual items.

    2) since the questions would/should be headings for the answers, a numbered heading might be more appropriate if not for the fact that...

    3) If this is supposed to be something the user can actively fill out, why are you using paragraphs and scripting to do a FORM's job. Specifically, FIELDSET, LEGEND, LABEL and INPUT's job?!?

    4) Good scripting should hook the markup, not be slopped into it with endless pointless "onevent" attributes.

    5) there are other ways to submit, which is why you should have a FORM that submits and trap the submit event, not click on a button tag.

    The appropriate HTML for a questionnaire like that would be:

    Code:
    <form action="#" method="post" id="questionnaire">	
    	<fieldset>
    		<legend>First Question</legend>
    		<input type="radio" name="question1" id="q1a1">
    		<label for="q1a1">Answer 1</label>
    		<br>
    		<input type="radio" name="question1" id="q1a2">
    		<label for="q1a2">Answer 2</label>
    		<br>
    		<input type="radio" name="question1" id="q1a4">
    		<label for="q1a3">Answer 3</label>
    		<br>
    		<input type="radio" name="question1" id="q1a4">
    		<label for="q1a4">Answer 4</label>
    		<br>
    		<input type="radio" name="question1" id="q1a5">
    		<label for="q1a5">Answer 5</label>
    	</fieldset>
    	<fieldset>
    		<legend>Second Question</legend>
    		<input type="radio" name="question2" id="q2a1">
    		<label for="q2a1">Answer 1</label>
    		<br>
    		<input type="radio" name="question2" id="q2a2">
    		<label for="q2a2">Answer 2</label>
    		<br>
    		<input type="radio" name="question2" id="q2a4">
    		<label for="q2a3">Answer 3</label>
    		<br>
    		<input type="radio" name="question2" id="q2a4">
    		<label for="q2a4">Answer 4</label>
    		<br>
    		<input type="radio" name="question2" id="q2a5">
    		<label for="q2a5">Answer 5</label>
    	</fieldset>
    	<fieldset>
    		<legend>Third Question</legend>
    		<input type="radio" name="question3" id="q3a1">
    		<label for="q3a1">Answer 1</label>
    		<br>
    		<input type="radio" name="question3" id="q3a2">
    		<label for="q3a2">Answer 2</label>
    		<br>
    		<input type="radio" name="question3" id="q3a4">
    		<label for="q3a3">Answer 3</label>
    		<br>
    		<input type="radio" name="question3" id="q3a4">
    		<label for="q3a4">Answer 4</label>
    		<br>
    		<input type="radio" name="question3" id="q3a5">
    		<label for="q3a5">Answer 5</label>
    	</fieldset>
    	<div class="submitsAndHiddens">
    		<button>Submit Answers</button>
    	</div>
    </form>
    No scripttardery needed, but if you want to enhance it with scripting, do it off the parent ID on the form. If you have trouble styling the <legend> tags, it's somewhat acceptable practice to use the appropriate depth numbered heading instead.

    Semantic functional markup with working submit and server side handling BEFORE you dive for the scripting! Otherwise you're blocking users, using techniques that can easily be slapped aside/bypassed/hacked client side, etc, etc...

    ... and really populating the quiz client side from JavaScript? Way to let script kiddies get a 100% perfect score every time... and even if you WERE to do that, you should be generating the elements on the DOM not manipulating existing ones in the markup.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  6. #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    19,571
    Thanks
    221
    Thanked 2,715 Times in 2,689 Posts
    deathshadow is trying to say that any quiz using solely Javascript is pretty useless, as the user can read the correct answers simply with "View Source". A quiz should employ server-side coding.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  7. #7
    New to the CF scene
    Join Date
    Dec 2016
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Lol, yeah I got that. I'm only focusing on JavaScript right now and I don't want to try to learn 2 programming languages at once. I'm just trying to learn how JavaScript works and get a usable understanding of it before I move onto PHP.

    Those were some good tips up there, regarding classes... Wrapping them all in one div and giving that a class is much more convenient then writing classes for each and every single item.

    as for why I populated the quiz with Javascript, well I don't know PHP right now otherwise I would have done it using that language because it does make more sense to do that with a server side language, but I also know very little Javascript, and populating HTML elements using something other than HTML was something I hadn't done before so I thought that'd be cool to try.


 

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
  •