<!DOCTYPE html>
<html>
<head>
<title>Infinitive Link - Conjugator</title>

<link href="style.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

<script src="jquery.js" type="text/javascript"></script>

</head>
<body>
<div id="wrapper">

<div class="title"><h2>Infinitive Link</h2></div>
<div class="flagbreak"></div>

<?php

$db = new mysqli('x', 'x', 'x', 'x');

if($db->connect_errno > 0){
    die('Unable to connect to database [' . $db->connect_error . ']');
}

$sql = <<<SQL
    SELECT *
    FROM `infinitives`
	ORDER BY RAND()
	LIMIT 3
SQL;

if(!$result = $db->query($sql)){
    die('There was an error running the query [' . $db->error . ']');
}

$answer = rand(0, 2);

$english = array();
$spanish = array();

while($row = $result->fetch_assoc()){
    array_push($english, $row['english']);
	array_push($spanish, $row['spanish']);
}
?>
<div id="questionwrapper">
<p>
	Select the infinitive that means
</p>
<h4 class="answer">
<?php
	echo $english[$answer];
?>
</h4>

<div class="buttons">
	<?php
		for ($i = 0; $i < 3; $i++) {
			echo "<div class='button answerbutton' id='button-" . $i . "'>" . $spanish[$i] . "</div>";
		}
	?>
</div>
</div>

<div id="correctwrapper">
<p>&nbsp;</p>
<h4>Correct!</h4>
<div class="buttons">
	<div class="button againbutton">again</div>
</div>
</div>

<div id="incorrectwrapper">
<p>&nbsp;</p>
<h4>Incorrect!</h4>
<p>The answer was: <?php echo $spanish[$answer]; ?></p>
<div class="buttons">
	<div class="button againbutton">again</div>
</div>
</div>

<p>Developed by <a href="http://jamesmonger.com">James Monger</a></p>

<script type="text/javascript">
<?php
echo "var answer = " . $answer . ";";
?>

$('div.answerbutton').click(function() {
	$('div#questionwrapper').hide();

	var id = ($( this ).attr('id')).replace("button-", "");
	if (id == answer) {
		$('div#correctwrapper').show();
	} else {
		$('div#incorrectwrapper').show();
	}
});

$('div.againbutton').click(function() {
	location.reload();
});

</script>

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-41920801-2', 'auto');
  ga('require', 'displayfeatures');
  ga('send', 'pageview');

</script>

</div>
</body>
</html>