Best way to build a quiz

Hey all! I am trying to make a quiz with JS. The idea is that each answer gives certain amount of points to preset variables. In the end, result is the variable with most points. So I was thinking about going in this kind of style:

Code:


   var L=0,
      K=0,
      A=0,
      G=0,
      B=0,
      
      /* All answers to questions */
      a1="Answer1",
      a2="Answer2",
      a3="Answer3",
      
      b1="Answer1",
      b2="Answer2",
      b3="Answer3";
      
   var a = document.getElementById("question1answer").innerHTML;
      if (a == a1) { L+=4; K+=1; A+=2; G+=5; B+=3; }
      else if (a == a2) { L+=4; K+=5; A+=3; G+=1; B+=2; }
      else if (a == a3) { L+=4; K+=3; A+=1; G+=2; B+=5; }
      
   var b = document.getElementById("question2answer").innerHTML;
      if (b == b1) { L+=1; K+=2; A+=4; G+=5; B+=3; }
      else if (b == b2) { L+=1; K+=3; A+=5; G+=4; B+=2; }
      else if (b == b3) { L+=3; K+=1; A+=2; G+=4; B+=5; }


What would be the best way to set this up on front side? (CSS/HTML)
There are so many options I am not sure what could be the best for this case.

up

What do you mean? Do you want a quiz template in HTML&CSS?

Ritsu wrote:What do you mean? Do you want a quiz template in HTML&CSS?

Kinda yes, exactly.
Not sure what is the best way of making quizzes.

There isn't the "best way". HTML&CSS are easy to learn, why wouldn't you write it on your own?

I would write it myself if I knew how, but I do not. That is why I am asking here for suggestions how this could be done with the style of test I am thinking of

Would this questionnaire be to create a new topic or send a private message to the administrator?

Daemon wrote:Would this questionnaire be to create a new topic or send a private message to the administrator?

You can think of it as test in a separate HTML page. Just listed questions with possible answer options.

Yes I understood! But when it is answered should it create a new topic or something like that?

Daemon wrote:Yes I understood! But when it is answered should it create a new topic or something like that?

I know what you are talking about, but no, that is not it
Results will be either displayed on screen or just sent to my server
That's not really important part

In this simple example, the questionnaire sends the answer to the general administrator:

Code:

<div id="questionContainer">
  <div id="header">
      <h1>Questions</h1>
  </div>
  <ol id="left">
      <li>
        How much is 2+2?
        <div class="tab">
            <input type="radio" value="A" name="question1" />3<br />
            <input type="radio" value="B" name="question1" />1<br />
            <input type="radio" value="C" name="question1" />5<br />
            <input type="radio" value="D" name="question1" />4<br />
        </div>
      </li>
      <li>
        How much is 3x2?
        <div class="tab">
            <input type="radio" value="A" name="question2" />5<br />
            <input type="radio" value="B" name="question2" />6<br />
            <input type="radio" value="C" name="question2" />7<br />
            <input type="radio" value="D" name="question2" />8<br />
        </div>
      </li>
  </ol>
  <div id="buttonDiv">
      <input type="button" id="button" value="Send" />
  </div>
</div>
<style type="text/css">
#header {margin: 18px;}
#questionContainer li {margin-bottom: 20px;}
ol#left {margin-left: 20px;}
.tab {margin-top: 5px;}
</style>
<script type="text/javascript">
$(function() {
    var answers = [
        "4", "D",
        "6", "B"
    ];

    function calcScore() {
        var results = {
            right: 0,
            wrong: 0,
            answered: [],
            unanswered: [],
            missed: []
        };
        $("#questionContainer .tab").each(function(index) {
            var chosen = $(this).find("input:checked");
            if (chosen.length) {
                results.answered.push(index);
                if (chosen.val() == answers[(index * 2) + 1]) {
                    results.right++;
                    results.answered.push(index);
                } else {
                    results.wrong++;
                    results.missed.push(index);
                }
            } else {
                results.unanswered.push(index);
            }
        });
        return (results);
    }

    $(document).on("click", "#button", function() {
        var results = calcScore();
        var str = "Correct: " + results.right + ", Wrong: " + results.wrong + ", Unanswered: " + results.unanswered.length;
        $.post('/privmsg', {
            folder: 'inbox',
            mode: 'post',
            post: '1',
            usergroup: '1',
            subject: 'Quiz - Answers',
            message: '[b]Result:[/b] ' + str
        }).done(function() {
            alert("Replies sent");
        }).fail(function() {
            alert("Error! No replies were sent");
        });
    });
});
</script>

hiphopza wrote:Love this forum

Please do not post in support topics unless you are offering a solution or asking for help.