Skip to content
Advertisement

How I can show the correct and incorrect answer at the moment of selection and the number of correct answers a person selected in my mcq website?

I got the code for my MCQ website. But when the user selects an option, I want to shows the correct and incorrect answer at the moment of selection (That is when the user selects the correct option, then the option will be highlighted. but when the user selects an incorrect option, I want to show that it is incorrect and along with that correct answer also showed). And also there is no second chance is given to the user for selecting the option which already showed the correct answer. (In such case the user can select the correct answer shown and it will be also “counted as the correct answer”). The code is below.

<!DOCTYPE html>
<html>
  <head>
      <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">    
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
  
  </head>
  <body>
      <h3>1. how many charecters in the word "lion" </h3>
  <p>Choose 1 answer</p>
  <hr/>
  <div id='block-11' style='padding: 10px;'>
    <label for='option-11' style=' padding: 5px; font-size: 1.0rem;'>
      <input type='radio' name='option'  id='option-11' onclick='displayAnswer1()' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
      A)  4</label>
    <span id='result-11'></span>
  </div>
  <hr />
  
  <div id='block-12' style='padding: 10px;'>
    <label for='option-12' style=' padding: 5px; font-size: 1.0rem;'>
      <input type='radio' name='option'  id='option-12' onclick='displayAnswer1()' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
      B) 3</label>
    <span id='result-12'></span>
  </div>
  <hr />
  
  <div id='block-13' style='padding: 10px;'>
    <label for='option-13' style=' padding: 5px; font-size: 1.0rem;'>
      <input type='radio' name='option'  id='option-13' onclick='displayAnswer1()' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
     C) 1</label>
    <span id='result-13'></span>
  </div>
  <hr />
  
  <div id='block-14' style='padding: 10px;'>
    <label for='option-14' style=' padding: 5px; font-size: 1.0rem;'>
      <input type='radio' name='option'  id='option-14' onclick='displayAnswer1()' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
      D) 2</label>
    <span id='result-14'></span>
  </div>
  <hr />
  <script type="text/javascript">
      var correct_answers = 0;
    function displayAnswer1() {
    if (document.getElementById('option-11').checked) {
      displayAnswer11()
    }
    if (document.getElementById('option-12').checked) {
      document.getElementById('block-12').style.border = '3px solid red'
      document.getElementById('result-12').style.color = 'red'
      document.getElementById('result-12').innerHTML = 'Incorrect!'
    }
    if (document.getElementById('option-13').checked) {
      document.getElementById('block-13').style.border = '3px solid red'
      document.getElementById('result-13').style.color = 'red'
      document.getElementById('result-13').innerHTML = 'Incorrect!'
    }
    if (document.getElementById('option-14').checked) {
      document.getElementById('block-14').style.border = '3px solid red'
      document.getElementById('result-14').style.color = 'red'
      document.getElementById('result-14').innerHTML = 'Incorrect!'
    }
  }
  
  
  function displayAnswer11() {
      document.getElementById('block-11').style.border = '3px solid limegreen'
      document.getElementById('result-11').style.color = 'limegreen'
      document.getElementById('result-11').innerHTML = 'Correct!'
      document.getElementById('correct_answers').innerHTML = "";
      document.getElementById('correct_answers').innerHTML = correct_answers+=1;
    }
  
  
    
  </script>
  <br><br>
  
  <div style=' position: relative; '>
  <h3>2. how many letter inthe word "me"</h3>
  <p>Choose 1 answer</p>
  <hr />
  
  <div id='block-21' style='padding: 10px;'>
    <label for='option-21' style=' padding: 5px; font-size: 1.0rem;'>
      <input type='radio' name='option'  id='option-21' onclick='displayAnswer2()'  style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
      A) 1</label>
    <span id='result-21'></span>
  </div>
  <hr />
  
  <div id='block-22' style='padding: 10px;'>
    <label for='option-22' style=' padding: 5px; font-size: 1.0rem;'>
      <input type='radio' name='option'  id='option-22' onclick='displayAnswer2()' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
      B) 2</label>
    <span id='result-22'></span>
  </div>
  <hr />
  
  <div id='block-23' style='padding: 10px;'>
    <label for='option-23' style=' padding: 5px; font-size: 1.0rem;'>
      <input type='radio' name='option'  id='option-23' onclick='displayAnswer2()' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
      C) 3</label>
    <span id='result-23'></span>
  </div>
  <hr />
  
  <div id='block-24' style='padding: 10px;'>
    <label for='option-24' style=' padding: 5px; font-size: 1.0rem;'>
      <input type='radio' name='option'  id='option-24' onclick='displayAnswer2()' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
      D) 4</label>
    <span id='result-24'></span>
  </div>
  <hr />
  </div>
  <script>
  //    The function evaluates the answer and displays result
  function displayAnswer2() {
    
    if (document.getElementById('option-21').checked) {
      document.getElementById('block-21').style.border = '3px solid red'
      document.getElementById('result-21').style.color = 'red'
      document.getElementById('result-21').innerHTML = 'Incorrect!'
    }
    if (document.getElementById('option-22').checked) {
      displayAnswer22()
    }
    if (document.getElementById('option-23').checked) {
      document.getElementById('block-23').style.border = '3px solid red'
      document.getElementById('result-23').style.color = 'red'
      document.getElementById('result-23').innerHTML = 'Incorrect!'
    }
    if (document.getElementById('option-24').checked) {
      document.getElementById('block-24').style.border = '3px solid red'
      document.getElementById('result-24').style.color = 'red'
      document.getElementById('result-24').innerHTML = 'Incorrect!'
    }
  }
  function displayAnswer22() {
      document.getElementById('block-22').style.border = '3px solid limegreen'
      document.getElementById('result-22').style.color = 'limegreen'
      document.getElementById('result-22').innerHTML = 'Correct!'
      document.getElementById('correct_answers').innerHTML = "";
      document.getElementById('correct_answers').innerHTML += correct_answers+=1;
    }
  
  
  </script>
  
  
  
  <br><br>
  
  
  <div style=' position: relative; '>
  <h3>3. which is actually a name </h3>
  <p>Choose 1 answer</p>
  <hr />
  
  <div id='block-31' style='padding: 5px;'>
    <label for='option-31' style=' padding: 5px; font-size: 1.0rem;'>
      <input type='radio' name='option'  id='option-31' onclick='displayAnswer3()' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
      A) 3nh r</label>
    <span id='result-31'></span>
  </div>
  <hr />
  
  <div id='block-32' style='padding: 5px;'>
    <label for='option-32' style=' padding: 5px; font-size: 1.0rem;'>
      <input type='radio' name='option'  id='option-32' onclick='displayAnswer3()' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
      B) jack</label>
    <span id='result-32'></span>
  </div>
  <hr />
  
  <div id='block-33' style='padding: 5px;'>
    <label for='option-33' style=' padding: 5px; font-size: 1.0rem;'>
      <input type='radio' name='option'  id='option-33' onclick='displayAnswer3()' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
      C) kdikduf</label>
    <span id='result-33'></span>
  </div>
  <hr />
  
  <div id='block-34' style='padding: 5px;'>
    <label for='option-34' style=' padding: 5px; font-size: 1.0rem;'>
      <input type='radio' name='option' value='1/6' id='option-34' onclick='displayAnswer3()' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
      D) lkjhh</label>
    <span id='result-34'></span>
  </div>
  <hr />
  </div>
  <script>
  //    The function evaluates the answer and displays result
  function displayAnswer3() {
    
    if (document.getElementById('option-31').checked) {
      document.getElementById('block-31').style.border = '3px solid red'
      document.getElementById('result-31').style.color = 'red'
      document.getElementById('result-31').innerHTML = 'Incorrect!'
    }
    if (document.getElementById('option-32').checked) {
      displayAnswer33()
    }
    if (document.getElementById('option-33').checked) {
      document.getElementById('block-33').style.border = '3px solid red'
      document.getElementById('result-33').style.color = 'red'
      document.getElementById('result-33').innerHTML = 'Incorrect!'
    }
    if (document.getElementById('option-34').checked) {
      document.getElementById('block-34').style.border = '3px solid red'
      document.getElementById('result-34').style.color = 'red'
      document.getElementById('result-34').innerHTML = 'Incorrect!'
    }
  }
  
  function displayAnswer33() {
      document.getElementById('block-32').style.border = '3px solid limegreen'
      document.getElementById('result-32').style.color = 'limegreen'
      document.getElementById('result-32').innerHTML = 'Correct!'
      document.getElementById('correct_answers').innerHTML = "";
      document.getElementById('correct_answers').innerHTML += correct_answers+=1;
    }
  </script>
  <p id="correct_answers"></p>
  </body>
</html>

Advertisement

Answer

You are using 1 version of jQuery… update to 3.5.1

Replace this line:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>

with this one:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

“I want to show that it is incorrect and along with that correct answer also showed).”

For this it is necessary at the end of each function that is responsible for incorrect answers to call the function for correct answer.

We call the function with added argument. If the argument is “true” displayAnswer11(true), it add value to the result. If the argument is “false” displayAnswer11(false) it marks the correct answer but does not add value to the result.

Example:

<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
    <h3>1. how many charecters in the word "lion" </h3>
    <p>Choose 1 answer</p>
    <hr />
    <div id='block-11' style='padding: 10px;'>
        <label for='option-11' style=' padding: 5px; font-size: 1.0rem;'>
            <input type='radio' name='option' id='option-11' onclick='displayAnswer1()'
                style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
            A) 4</label>
        <span id='result-11'></span>
    </div>
    <hr />

    <div id='block-12' style='padding: 10px;'>
        <label for='option-12' style=' padding: 5px; font-size: 1.0rem;'>
            <input type='radio' name='option' id='option-12' onclick='displayAnswer1()'
                style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
            B) 3</label>
        <span id='result-12'></span>
    </div>
    <hr />

    <div id='block-13' style='padding: 10px;'>
        <label for='option-13' style=' padding: 5px; font-size: 1.0rem;'>
            <input type='radio' name='option' id='option-13' onclick='displayAnswer1()'
                style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
            C) 1</label>
        <span id='result-13'></span>
    </div>
    <hr />

    <div id='block-14' style='padding: 10px;'>
        <label for='option-14' style=' padding: 5px; font-size: 1.0rem;'>
            <input type='radio' name='option' id='option-14' onclick='displayAnswer1()'
                style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
            D) 2</label>
        <span id='result-14'></span>
    </div>
    <hr />

    <script type="text/javascript">
        var correct_answers = 0;
        function displayAnswer1() {
            if (document.getElementById('option-11').checked) {
                displayAnswer11(true)
            }
            if (document.getElementById('option-12').checked) {
                document.getElementById('block-12').style.border = '3px solid red'
                document.getElementById('result-12').style.color = 'red'
                document.getElementById('result-12').innerHTML = 'Incorrect!'
            }
            if (document.getElementById('option-13').checked) {
                document.getElementById('block-13').style.border = '3px solid red'
                document.getElementById('result-13').style.color = 'red'
                document.getElementById('result-13').innerHTML = 'Incorrect!'
            }
            if (document.getElementById('option-14').checked) {
                document.getElementById('block-14').style.border = '3px solid red'
                document.getElementById('result-14').style.color = 'red'
                document.getElementById('result-14').innerHTML = 'Incorrect!'
            }

            displayAnswer11(false);
        }


        function displayAnswer11(x) {
            document.getElementById('block-11').style.border = '3px solid limegreen'
            document.getElementById('result-11').style.color = 'limegreen'
            document.getElementById('result-11').innerHTML = 'Correct!'
            if (x) {
                document.getElementById('correct_answers').innerHTML = '';
                document.getElementById('correct_answers').innerHTML += correct_answers += 1;
            } else {
                document.getElementById('option-11').disabled = true;                
            }
        }



    </script>
    <br><br>

    <div style=' position: relative; '>
        <h3>2. how many letter inthe word "me"</h3>
        <p>Choose 1 answer</p>
        <hr />

        <div id='block-21' style='padding: 10px;'>
            <label for='option-21' style=' padding: 5px; font-size: 1.0rem;'>
                <input type='radio' name='option' id='option-21' onclick='displayAnswer2()'
                    style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
                A) 1</label>
            <span id='result-21'></span>
        </div>
        <hr />

        <div id='block-22' style='padding: 10px;'>
            <label for='option-22' style=' padding: 5px; font-size: 1.0rem;'>
                <input type='radio' name='option' id='option-22' onclick='displayAnswer2()'
                    style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
                B) 2</label>
            <span id='result-22'></span>
        </div>
        <hr />

        <div id='block-23' style='padding: 10px;'>
            <label for='option-23' style=' padding: 5px; font-size: 1.0rem;'>
                <input type='radio' name='option' id='option-23' onclick='displayAnswer2()'
                    style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
                C) 3</label>
            <span id='result-23'></span>
        </div>
        <hr />

        <div id='block-24' style='padding: 10px;'>
            <label for='option-24' style=' padding: 5px; font-size: 1.0rem;'>
                <input type='radio' name='option' id='option-24' onclick='displayAnswer2()'
                    style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
                D) 4</label>
            <span id='result-24'></span>
        </div>
        <hr />
    </div>
    <script>

        //    The function evaluates the answer and displays result
        function displayAnswer2() {

            if (document.getElementById('option-21').checked) {
                document.getElementById('block-21').style.border = '3px solid red'
                document.getElementById('result-21').style.color = 'red'
                document.getElementById('result-21').innerHTML = 'Incorrect!'
            }
            if (document.getElementById('option-22').checked) {
                displayAnswer22(true)
            }
            if (document.getElementById('option-23').checked) {
                document.getElementById('block-23').style.border = '3px solid red'
                document.getElementById('result-23').style.color = 'red'
                document.getElementById('result-23').innerHTML = 'Incorrect!'
            }
            if (document.getElementById('option-24').checked) {
                document.getElementById('block-24').style.border = '3px solid red'
                document.getElementById('result-24').style.color = 'red'
                document.getElementById('result-24').innerHTML = 'Incorrect!'
            }

            displayAnswer22(false);
        }
        function displayAnswer22(x) {
            document.getElementById('block-22').style.border = '3px solid limegreen'
            document.getElementById('result-22').style.color = 'limegreen'
            document.getElementById('result-22').innerHTML = 'Correct!'
            if (x) {
                document.getElementById('correct_answers').innerHTML = '';
                document.getElementById('correct_answers').innerHTML += correct_answers += 1;
            } else {
                document.getElementById('option-22').disabled = true;                
            }
        }


    </script>



    <br><br>


    <div style=' position: relative; '>
        <h3>3. which is actually a name </h3>
        <p>Choose 1 answer</p>
        <hr />

        <div id='block-31' style='padding: 5px;'>
            <label for='option-31' style=' padding: 5px; font-size: 1.0rem;'>
                <input type='radio' name='option' id='option-31' onclick='displayAnswer3()'
                    style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
                A) 3nh r</label>
            <span id='result-31'></span>
        </div>
        <hr />

        <div id='block-32' style='padding: 5px;'>
            <label for='option-32' style=' padding: 5px; font-size: 1.0rem;'>
                <input type='radio' name='option' id='option-32' onclick='displayAnswer3()'
                    style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
                B) jack</label>
            <span id='result-32'></span>
        </div>
        <hr />

        <div id='block-33' style='padding: 5px;'>
            <label for='option-33' style=' padding: 5px; font-size: 1.0rem;'>
                <input type='radio' name='option' id='option-33' onclick='displayAnswer3()'
                    style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
                C) kdikduf</label>
            <span id='result-33'></span>
        </div>
        <hr />

        <div id='block-34' style='padding: 5px;'>
            <label for='option-34' style=' padding: 5px; font-size: 1.0rem;'>
                <input type='radio' name='option' value='1/6' id='option-34' onclick='displayAnswer3()'
                    style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
                D) lkjhh</label>
            <span id='result-34'></span>
        </div>
        <hr />
    </div>
    <script>
        //    The function evaluates the answer and displays result
        function displayAnswer3() {

            if (document.getElementById('option-31').checked) {
                document.getElementById('block-31').style.border = '3px solid red'
                document.getElementById('result-31').style.color = 'red'
                document.getElementById('result-31').innerHTML = 'Incorrect!'
            }
            if (document.getElementById('option-32').checked) {
                displayAnswer33(true)
            }
            if (document.getElementById('option-33').checked) {
                document.getElementById('block-33').style.border = '3px solid red'
                document.getElementById('result-33').style.color = 'red'
                document.getElementById('result-33').innerHTML = 'Incorrect!'
            }
            if (document.getElementById('option-34').checked) {
                document.getElementById('block-34').style.border = '3px solid red'
                document.getElementById('result-34').style.color = 'red'
                document.getElementById('result-34').innerHTML = 'Incorrect!'
            }

            displayAnswer33(false);
        }

        function displayAnswer33(x) {
            document.getElementById('block-32').style.border = '3px solid limegreen'
            document.getElementById('result-32').style.color = 'limegreen'
            document.getElementById('result-32').innerHTML = 'Correct!'
            if (x) {
                document.getElementById('correct_answers').innerHTML = '';
                document.getElementById('correct_answers').innerHTML += correct_answers += 1;
            } else {
                document.getElementById('option-32').disabled = true;                
            }
        }
    </script>
    <p id="correct_answers"></p>
</body>
</html>
User contributions licensed under: CC BY-SA
10 People found this is helpful
Advertisement