JSFiddle - React, Tailwind, and code Playground
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').each(function() {
allAnswers.push($(this).val());
});
//alert (correctAnswers);
//alert (allAnswers);
if (allAnswers==correctAnswers) {
alert ('Yahtzee');
};
})
})(jQuery);