SO - 21363636

by Arun P Johny

HTML

<form>
    <div style="margin:30px auto;">
        <label for="kc_1a" class="kc_item kcblock">
            <p>Answer One</p>
        </label>
        <input id="kc_1a" class="kc_answer" type="hidden" value="false" />
        <label for="kc_1b" class="kc_item kcblock">
            <p>Answer Two</p>
        </label>
        <input id="kc_1b" class="kc_answer" type="hidden" value="false" />
        <label for="kc_1c" class="kc_item kcblock">
            <p>Answer Three</p>
        </label>
        <input id="kc_1c" class="kc_answer" type="hidden" value="false" />
        <label for="kc_1d" class="kc_item kcblock">
            <p>Answer Four</p>
        </label>
        <input id="kc_1d" class="kc_answer" type="hidden" value="false" />
        <label for="kc_1e" class="kc_item kcblock">
            <p>Answer Five</p>
        </label>
        <input id="kc_1e" class="kc_answer" type="hidden" value="false" />
    </div>
    <button type="button" class="kc_submit_1">Submit</button>
</form>

CSS

.kcblock {
    display:inline-table;
    margin:8px;
    width:100px;
    height:100px;
    border-radius:100px;
    border:10px solid #555;
    background:#fff;
    cursor:pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.kcblock p {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    padding:10px;
    line-height:1.1em;
}
.kcblock:hover {
    border:10px solid #007ec6;
    border-color:#233f4f;
    color:#124664;
}
.kcblock.kc_selected {
    border-color:#233f4f;
    background:#007ec6;
    color:#fff;
}

JavaScript

(function ($) {

    //Knowledge Check

    var labelID;
    $(".kcblock").click(function () {
        $(this).toggleClass('kc_selected');
        labelID = $(this).attr('for');
        if ($(this).hasClass("kc_selected")) {
            $('#' + labelID).val('true');
        } else {
            $('#' + labelID).val('false');
        }
    });

    $(".kc_submit_1").click(function () {
        var correctAnswers = ['true', 'true', 'true', 'true', 'true'];
        var allAnswers = $('.kc_answer').map(function (i) {
            return correctAnswers[i] == this.value ? this.value : undefined;
        });
        //alert (correctAnswers);
        //alert (allAnswers);
        if (allAnswers.length == correctAnswers.length) {
            alert('Yahtzee');
        };

    })

})(jQuery);