brianmarete/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <form>
                    <div class="form-group">
                        <label>What is your Gender?</label>
                        <label><input type="radio" name="gender" value="Male"  required>Male</label>
                        <label><input type="radio" name="gender" value="Female" class="correct" required>Female</label>
                    </div>

                    <div class="form-group">
                        <label>The sky is blue:</label>
                        <label><input type="radio" name="sky" value="True" class="correct" required>True</label>
                        <label><input type="radio" name="sky" value="False" required>False</label>
                    </div>
                    <input type="submit" class="btn btn-primary" value="Submit">
                </form>
            </div>
            <div class="col-md-6">
                <h1 id="result"></h1>
            </div>
        </div>
    </div>

    <script
        src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
    <script src="js/scripts.js"></script>
</body>
</html>

## scripts.js
// FRONT-END LOGIC

$(document).ready(function() {
    $('form').submit(function(event) {
        event.preventDefault();

        var answers = [];

        $('.correct').each(function () {
            answers.push($(this).prop('checked'));
        })

        console.log(answers);


        $('#result').text("Your score is "+ getScore(answers));
    })
});

// BUSINESS LOGIC

function getScore(answers) {
    var score = 0;

    answers.forEach(function(answer) {
        if (answer === true) {
            score++;
        }
    });

    return score;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

	<title>Document</title>
	</head>
	<body>
	<div class="container">
	<div class="row">
	<div class="col-md-6">
	<form>
	<div class="form-group">
	<label>What is your Gender?</label>
	<label><input type="radio" name="gender" value="Male" required>Male</label>
	<label><input type="radio" name="gender" value="Female" class="correct" required>Female</label>
	</div>

	<div class="form-group">
	<label>The sky is blue:</label>
	<label><input type="radio" name="sky" value="True" class="correct" required>True</label>
	<label><input type="radio" name="sky" value="False" required>False</label>
	</div>
	<input type="submit" class="btn btn-primary" value="Submit">
	</form>
	</div>
	<div class="col-md-6">
	<h1 id="result"></h1>
	</div>
	</div>
	</div>

	<script
	src="https://code.jquery.com/jquery-3.3.1.min.js"
	integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
	crossorigin="anonymous"></script>
	<script src="js/scripts.js"></script>
	</body>
	</html>
	// FRONT-END LOGIC

	$(document).ready(function() {
	$('form').submit(function(event) {
	event.preventDefault();

	var answers = [];

	$('.correct').each(function () {
	answers.push($(this).prop('checked'));
	})

	console.log(answers);


	$('#result').text("Your score is "+ getScore(answers));
	})
	});

	// BUSINESS LOGIC

	function getScore(answers) {
	var score = 0;

	answers.forEach(function(answer) {
	if (answer === true) {
	score++;
	}
	});

	return score;
	}