JSFiddle - React, Tailwind, and code Playground

by Jesse M

HTML

<form class="quiz-form">
	<div class="question-1">
		<p>What is your idea of a perfect Saturday night?</p>
		<label><input type="radio" name="q1" value="Mark" data-points="2" /> Staying in and level up in your favorite video game</label>
		<label><input type="radio" name="q1" value="Louise" data-points="2" /> Getting ahead in your work</label>
		<label><input type="radio" name="q1" value="Cathy" data-points="2" /> Going out on the town with your friends</label>
		<label><input type="radio" name="q1" value="Ryan" data-points="2" /> Shooting some hoops on the court</label>
		<label><input type="radio" name="q1" value="Ridel" data-points="2" /> Checking out the latest film at the cinema</label>
		<label><input type="radio" name="q1" value="Nicole" data-points="2" /> Working on your next masterpiece</label>
	</div>
	<div class="question-2">
		<p>What was your favorite subject in school?</p>
		<label><input type="radio" name="q2" value="Ryan" data-points="2" /> I prefer athletics! Give me b-ball over algebra any day.</label>
		<label><input type="radio" name="q2" value="Louise" data-points="2" /> So hard to pick a favorite. But probably science!</label>
		<label><input type="radio" name="q2" value="Cathy" data-points="2" /> Lunch! Sitting and chatting with my friends gets me through the day.</label>
		<label><input type="radio" name="q2" value="Nicole" data-points="2" /> Music and art are my passion.</label>
		<label><input type="radio" name="q2" value="Mark" data-points="2" /> Do I have to pick a favorite?</label>
		<label><input type="radio" name="q2" value="Ridel" data-points="2" /> School is beneath me. I focus my time on bigger projects outside of school.</label>
	</div>
	<div class="question-3">
		<p>What word pairings might people use to describe you?</p>
		<label><input type="radio" name="q3" value="Ridel" data-points="2" /> Creative & Distant</label>
		<label><input type="radio" name="q3" value="Cathy" data-points="2" /> Loyal & Clingy</label>
		<label><input...

CSS

body {
  font-family: "Verdana", sans-serif;
}

label {
  display: block;
}

JavaScript

let characters = {
	Nicole: 0,
	Louise: 0,
	Mark: 0,
	Ridel: 0,
	Cathy: 0,
	Ryan: 0
};

$('input[type="submit"]').click(function(e){
	e.preventDefault();

	var data = $.map($("input:radio:checked"), function(elem, idx){
		let points = $(elem).data('points');
		characters[$(elem).val()] = characters[$(elem).val()] + points;
		// return $(elem).attr("name")+"="+ $(elem).val();
	});
	console.log(characters);

	const result = Object.entries(characters).reduce((max, entry) => {
		return entry[1] > max[1] ? entry : max;
	}, [null, -Infinity]);

	console.log(result[0]);
	console.log(result[1]);

	$('.result').html('<h1>You are <strong>' + result[0] + '</strong>!</h1><p>Total points: ' + result[1] + '</p>');
});