Quiz App

by Taqi_Shah

HTML

<div>
    <h1>What Type of Date Are You? (Dude Edition)</h1>
</div>
<div class="questions">
    <p>1. You see a girl waiting at the bus stop. She is exactly your type. How do you get her number?</p>
    <form class="options">
        <input class="option" type="radio" name="question1" value=4>You walk right up to her, strike up a conversation, and ask for her number<br>
        <input class="option" type="radio" name="question1" value=3>You wait a few days until you get the courage to go and talk to her<br>
        <input class="option" type="radio" name="question1" value=2>You tell one of your mutual friends that you like her<br>
        <input class="option" type="radio" name="question1" value=1>You wait for her to come to you</br>
    </form>
</div>
<div class="questions">
    <p>2. You guys decide to go out on a date. Where do you decide to take her?</p>
    <form class="options">
        <input class="option" type="radio" name="question2" value=4>You take her out for a short coffee and talk about life and relationships<br>
        <input class="option" type="radio" name="question2" value=3>You take her out on a creative date and ask her questions about her life and you respond in kind, tried-and-true interview-style<br>
        <input class="option" type="radio" name="question2" value=2>You take her out to a nice restaurant and dress in your best clothes. You ask the same questions as above<br>
        <input class="option" type="radio" name="question2" value=1>You take her to the best restaurant and hope that your clothes does most of the talking. If not, you've got great stories to tell up your sleeves<br>
    </form>
</div>
<div class="questions">
    <p>3. You think you had a great first date. What do you do between now and your second date?</p>
    <form class="options">
        <input class="option" type="radio" name="question3" value=4>You send her a text telling her you'll have out again soon. No big deal. Another date with another girl, coming...

JavaScript

$(document).ready(function () {
    var    answers = new Object();
    $('.option').change(function () {
        var answer = ($(this).attr('value'))
        var question = ($(this).attr('name'))
        answers[question] = answer
    })
    var item1 = document.getElementById('questions');
    var totalQuestions = $('.questions').size();
    var currentQuestion = 0;
    $questions = $('.questions');
    $questions.hide();
    $($questions.get(currentQuestion)).fadeIn();
    $('#next').click(function () {
        if ($('.option',$questions.get(currentQuestion)).is(':checked')) {
        $($questions.get(currentQuestion)).fadeOut(function () {
            currentQuestion = currentQuestion + 1;
            if (currentQuestion == totalQuestions) {
                var result = sum_values()
                //do stuff with the result
                $('#next').value='Finish';
                //alert(result);
            } else {
                $($questions.get(currentQuestion)).fadeIn();
            }
        });
            } else {
        alert('no selection made');
      }
        
});   
    
    function sum_values() {
        var the_sum = 0, max = 0, ans, tmp = {};
        for (question in answers) {
            the_sum = the_sum + parseInt(answers[question])
            if(!tmp[answers[question]]){
                tmp[answers[question]] = 0;
            }
            tmp[answers[question]]++;
            if(max < tmp[answers[question]]){
                max = tmp[answers[question]];
                ans = answers[question];
            }
        }
        
        if(ans==1 && ans!=2 && ans!=3 && ans!=4){
        alert('Think Tank');
        $('#ThinkTank').modal('show'); 
        }
        else if(ans==2 && ans!=1 && ans!=3 && ans!=4){
        alert("People's Favorite")
        $('#PeopleFavorite').modal('show'); 
        }
        else if(ans==3 && ans!=1 && ans!=2 && ans!=4){
        alert("Go Getter")
        $('#GoGetter').modal('show'); 
        }
      ...