michelleroth/app.js

## app.js

//var questions = [
//   {
//     'question': 'What animal is fluffier?',
//     'option1': 'puppy',
//     'option2': 'elephant',
//     'answer': 'puppy'
//   },
//   {
//     'question': 'What animal is fluffier?',
//     'option1': 'puppy',
//     'option2': 'elephant',
//     'answer': 'puppy'
//   },
// ]

// var answers = [
//   1,
//   1,
//   2,
//   2
// ]

$(function(){

  $('.question').hide();

  var currentChild = 0
  //$('.question:nth-child('+currentChild+')').show();


  $('button').click(function(){
    //var answer = answers[currentChild]
    var test = $('.question:nth-child(' + currentChild + '):nth-child(1)')
    console.log(test)

    $('.question').hide();
    currentChild++;
    console.log(currentChild)
  $('.question:nth-child(' + currentChild + ')').show();
  })

})

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>my game</title>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

  <link rel="stylesheet" href="main.css">
</head>
<body>

  <div class="container">
    <h1>Animal Game</h1>

    <form id="js-game">
      <label for="play">Click to Play!</label>

      <button type="button">Get Started</button>
    </form>


<div class="question-list">
  <div class="question" id="first-question">
    <p>What animal is fluffier?<p>
    <input type="checkbox"> puppy </input>
    <input answer type="checkbox"> elephant </input>
    <button type="button"> Submit </button>
  </div>
  <div class="question">
    <p>What noise does a pig make?<p>
    <input type="checkbox"> oink </input>
    <input answer type="checkbox"> meow </input>
    <button type="button"> Submit </button>
  </div>
  <div class="question">
    <p>What color is a gold fish<p>
    <input type="checkbox"> purple </input>
    <input answer type="checkbox"> orange </input>
    <button type="button"> Submit </button>
  </div>
  <div class="question">
    <p>Which of the following animals flies<p>
    <input type="checkbox"> dolphin </input>
    <input answer type="checkbox"> eagle </input>
    <button type="button"> Submit </button>
  </div>
</div>
</div>

  <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
  <script type="text/javascript" src="app.js"></script>
</body>
</html>

## main.css
* {
  box-sizing: border-box;
}

.container {
  max-width: 600px;
  margin: 0 auto;
  background-color: #b3cbf2;
  margin-bottom: 20px;
  border: 1px solid grey;
  padding: 20px;
}

main {
  padding: 30px;
  background-color: white;
}

body {
    background-color: #4286f4;
}

h1, h2 {
  font-family: 'Lato';
}

p {
  font-family: 'Cabin';
}

hr {
  width: 50%;
  margin-left: 0;
}

	//var questions = [
	// {
	// 'question': 'What animal is fluffier?',
	// 'option1': 'puppy',
	// 'option2': 'elephant',
	// 'answer': 'puppy'
	// },
	// {
	// 'question': 'What animal is fluffier?',
	// 'option1': 'puppy',
	// 'option2': 'elephant',
	// 'answer': 'puppy'
	// },
	// ]

	// var answers = [
	// 1,
	// 1,
	// 2,
	// 2
	// ]

	$(function(){

	$('.question').hide();

	var currentChild = 0
	//$('.question:nth-child('+currentChild+')').show();


	$('button').click(function(){
	//var answer = answers[currentChild]
	var test = $('.question:nth-child(' + currentChild + '):nth-child(1)')
	console.log(test)

	$('.question').hide();
	currentChild++;
	console.log(currentChild)
	$('.question:nth-child(' + currentChild + ')').show();
	})

	})
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>my game</title>

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

	<link rel="stylesheet" href="main.css">
	</head>
	<body>

	<div class="container">
	<h1>Animal Game</h1>

	<form id="js-game">
	<label for="play">Click to Play!</label>

	<button type="button">Get Started</button>
	</form>


	<div class="question-list">
	<div class="question" id="first-question">
	<p>What animal is fluffier?<p>
	<input type="checkbox"> puppy </input>
	<input answer type="checkbox"> elephant </input>
	<button type="button"> Submit </button>
	</div>
	<div class="question">
	<p>What noise does a pig make?<p>
	<input type="checkbox"> oink </input>
	<input answer type="checkbox"> meow </input>
	<button type="button"> Submit </button>
	</div>
	<div class="question">
	<p>What color is a gold fish<p>
	<input type="checkbox"> purple </input>
	<input answer type="checkbox"> orange </input>
	<button type="button"> Submit </button>
	</div>
	<div class="question">
	<p>Which of the following animals flies<p>
	<input type="checkbox"> dolphin </input>
	<input answer type="checkbox"> eagle </input>
	<button type="button"> Submit </button>
	</div>
	</div>
	</div>

	<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
	<script type="text/javascript" src="app.js"></script>
	</body>
	</html>
	* {
	box-sizing: border-box;
	}

	.container {
	max-width: 600px;
	margin: 0 auto;
	background-color: #b3cbf2;
	margin-bottom: 20px;
	border: 1px solid grey;
	padding: 20px;
	}

	main {
	padding: 30px;
	background-color: white;
	}

	body {
	background-color: #4286f4;
	}

	h1, h2 {
	font-family: 'Lato';
	}

	p {
	font-family: 'Cabin';
	}

	hr {
	width: 50%;
	margin-left: 0;
	}