metaist/index.html

## index.html
<!doctype html>
<html>
 <head>

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
 </head>
 <body>
    <nav>
     <div class="nav-wrapper">
       <a href="#" class="brand-logo">Banapple</a>
     </div>
   </nav>

   <div class="center-align" style="font-size: 30px;">
    Points: <span id="points">0</span>
   </div>

   <div class="center-align">
      <button id="btn-banana" class="btn yellow darken-1">Banana</button>
      <button id="btn-not" class="btn">Not</button>

      <br />

     <div>
      <img src="" style="width: 50rem; height: auto" />
     </div>
   </div>


<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

<script>
var bananas = [
 'https://cdn1.medicalnewstoday.com/content/images/articles/271157-bananas.jpg',
 'https://c-6rtwjumjzx7877x24nrlx2euzwhmx2ehtr.g00.livescience.com/g00/3_c-6bbb.qnajx78hnjshj.htr_/c-6RTWJUMJZX77x24myyux78x3ax2fx2fnrl.uzwhm.htrx2fwhx2f855c755x2ffMW5hItaQ8i8id0x78fCEqh7SuEB0oEX0og75afB6mE7AeQ7paRIFbQeF7SX3cSIpag8OuE7qzDBbaDrKzDB0mhd0vhLhx3dx3fn65h.rfwpx3dnrflj_$/$/$/$',
 'https://www.organicfacts.net/wp-content/uploads/2013/05/Banana3.jpg'
];

var fruit = [
 'https://image.jimcdn.com/app/cms/image/transf/dimension=168x1024:format=png/path/s3418b375bcc09e2b/image/ice37d55a25fc540b/version/1519999469/image.png',
 'https://image.jimcdn.com/app/cms/image/transf/dimension=165x1024:format=jpg/path/s3418b375bcc09e2b/image/iacd3821a99027527/version/1488366929/image.jpg',
 'https://image.jimcdn.com/app/cms/image/transf/dimension=164x1024:format=jpg/path/s3418b375bcc09e2b/image/i215b50c3b068bfd4/version/1456774553/image.jpg'
];

$(() =>{
 /**
 * Shuffles array in place. ES6 version
 * @param {Array} a items An array containing the items.
 */
function shuffle(a) {
    for (let i = a.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [a[i], a[j]] = [a[j], a[i]];
    }
    return a;
}


 var correct =  null;
 var points = 0;
 var $img = $('img');
 var $points = $('#points');

 var changeImage = () => {
  bananas = shuffle(bananas);
  fruit = shuffle(fruit);
  var whichOne = Math.random();
  var url =  whichOne < 0.5 ? bananas[0] : fruit[0];
  correct = whichOne < 0.5 ? 'banana' : 'not';

  console.log(correct, points);
  $img.attr('src', url);
  $points.text(points);
 };


 changeImage();


 $('#btn-banana').click(function(e) {
  console.log('82', correct, points);
  if(correct === 'banana') { points++; } else {points = 0; }
  changeImage();
 });

 $('#btn-not').click(function (e) {
  if(correct === 'not') { points++; } else {points = 0; }
  changeImage();
 });
});
</script>

 </body>
</html>
	<!doctype html>
	<html>
	<head>

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
	</head>
	<body>
	<nav>
	<div class="nav-wrapper">
	<a href="#" class="brand-logo">Banapple</a>
	</div>
	</nav>

	<div class="center-align" style="font-size: 30px;">
	Points: <span id="points">0</span>
	</div>

	<div class="center-align">
	<button id="btn-banana" class="btn yellow darken-1">Banana</button>
	<button id="btn-not" class="btn">Not</button>

	<br />

	<div>
	<img src="" style="width: 50rem; height: auto" />
	</div>
	</div>


	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

	<script>
	var bananas = [
	'https://cdn1.medicalnewstoday.com/content/images/articles/271157-bananas.jpg',
	'https://c-6rtwjumjzx7877x24nrlx2euzwhmx2ehtr.g00.livescience.com/g00/3_c-6bbb.qnajx78hnjshj.htr_/c-6RTWJUMJZX77x24myyux78x3ax2fx2fnrl.uzwhm.htrx2fwhx2f855c755x2ffMW5hItaQ8i8id0x78fCEqh7SuEB0oEX0og75afB6mE7AeQ7paRIFbQeF7SX3cSIpag8OuE7qzDBbaDrKzDB0mhd0vhLhx3dx3fn65h.rfwpx3dnrflj_$/$/$/$',
	'https://www.organicfacts.net/wp-content/uploads/2013/05/Banana3.jpg'
	];

	var fruit = [
	'https://image.jimcdn.com/app/cms/image/transf/dimension=168x1024:format=png/path/s3418b375bcc09e2b/image/ice37d55a25fc540b/version/1519999469/image.png',
	'https://image.jimcdn.com/app/cms/image/transf/dimension=165x1024:format=jpg/path/s3418b375bcc09e2b/image/iacd3821a99027527/version/1488366929/image.jpg',
	'https://image.jimcdn.com/app/cms/image/transf/dimension=164x1024:format=jpg/path/s3418b375bcc09e2b/image/i215b50c3b068bfd4/version/1456774553/image.jpg'
	];

	$(() =>{
	/**
	* Shuffles array in place. ES6 version
	* @param {Array} a items An array containing the items.
	*/
	function shuffle(a) {
	for (let i = a.length - 1; i > 0; i--) {
	const j = Math.floor(Math.random() * (i + 1));
	[a[i], a[j]] = [a[j], a[i]];
	}
	return a;
	}


	var correct = null;
	var points = 0;
	var $img = $('img');
	var $points = $('#points');

	var changeImage = () => {
	bananas = shuffle(bananas);
	fruit = shuffle(fruit);
	var whichOne = Math.random();
	var url = whichOne < 0.5 ? bananas[0] : fruit[0];
	correct = whichOne < 0.5 ? 'banana' : 'not';

	console.log(correct, points);
	$img.attr('src', url);
	$points.text(points);
	};


	changeImage();


	$('#btn-banana').click(function(e) {
	console.log('82', correct, points);
	if(correct === 'banana') { points++; } else {points = 0; }
	changeImage();
	});

	$('#btn-not').click(function (e) {
	if(correct === 'not') { points++; } else {points = 0; }
	changeImage();
	});
	});
	</script>

	</body>
	</html>