lisajamhoury/answers.json

## answers.json
 {
  "answers" : [
		{"type": "positive", "value": "It is certain"},
		{"type": "positive", "value": "It is decidedly so"},
		{"type": "positive", "value": "Without a doubt"},
		{"type": "positive", "value": "Yes definitely"},
		{"type": "positive", "value": "You may rely on it"},
		{"type": "positive", "value": "As I see it, yes"},
		{"type": "positive", "value": "Most likely"},
		{"type": "positive", "value": "Outlook good"},
		{"type": "positive", "value": "Mos def"},
		{"type": "positive", "value": "Signs point to yes"},

		{"type": "neutral", "value": "Reply hazy try again"},
		{"type": "neutral", "value": "Ask again later"},
		{"type": "neutral", "value": "Better not tell you now"},
		{"type": "neutral", "value": "Cannot predict now"},
		{"type": "neutral", "value": "Concentrate and ask again"},

		{"type": "nagative", "value": "Don't count on it"},
		{"type": "nagative", "value": "My reply is no"},
		{"type": "nagative", "value": "My sources say no"},
		{"type": "nagative", "value": "Outlook not so good"},
		{"type": "nagative", "value": "Very doubtful"}
	]
}

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>8ball</title>
    <script src="libraries/p5.js" type="text/javascript"></script>

    <script src="libraries/p5.dom.js" type="text/javascript"></script>
    <script src="libraries/p5.sound.js" type="text/javascript"></script>
    <script src="libraries/p5.serialport.js" type="text/javascript"></script>

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

    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div id='myContainer'></div>

  </body>
</html>

## sketch.js
var data;
var options = [];
var input;
var question;
var button;
var welcome;
var ballResponse;

var questions = [];
var mouseClicks = 0;


function preload() {
  data = loadJSON("answers.json");
}

function setup() {

    for (i = 0; i < data.answers.length; i++) {
    var tempOption = data.answers[i];
    var o = new Option(tempOption.value);
    options[i] = o;
  }

  background(255);

  welcome = createP("Hello, enter a yes or no question.");
  welcome.parent('myContainer');
  welcome.class("welcome");

  input = createInput();
  input.parent('myContainer');
  input.size(250, 40);

  button = createButton("Submit");
  button.parent('myContainer');
  button.size(256, 25);

  ballResponse = createP("");
  ballResponse.parent('myContainer');
  ballResponse.class('response');

  button.mousePressed(checkAnswer);
}


// constructor function
function Option(tempValue) {
  this.value = tempValue;

  this.getValue = function() {
    return this.value;
  }
}

//check for answer
function checkAnswer() {
  mouseClicks++;
  questions[mouseClicks] = input.value();

  if (questions[mouseClicks] === "") {
    alert("Ask a yes or no question!");
  } else if (questions[mouseClicks] === questions[mouseClicks-1]) {
    alert("Enter a new question.")
  } else {
    giveAnswer();
  }
}


// give an answer
function giveAnswer() {

  //pick an answer randomly from the options
  var i = Math.round(random(options.length));
  var response = options[i].getValue();

  ballResponse.html(response);
}


## style.css
body {
  text-align: center;
  font-family: 'serif';
  background-color: #222;
  font-size: 14px;
}

#myContainer {
  display: block;
  /*min-height: 300px;*/
  width:500px;
  margin: 50px auto;
  background-color: #fff;
  padding: 75px 0;
}

.welcome {
  font-size: 18px;
  margin-bottom: 35px;
}

.response {
  text-transform: uppercase;
  font-size: 16px;
}

input, button {
  text-align: center;
  border-color: #222;
}

input {
  margin-bottom: 5px;
}

button {
  text-transform: uppercase;
  margin-bottom: 30px;
}


#defaultCanvas {
  display: none;
}
	{
	"answers" : [
	{"type": "positive", "value": "It is certain"},
	{"type": "positive", "value": "It is decidedly so"},
	{"type": "positive", "value": "Without a doubt"},
	{"type": "positive", "value": "Yes definitely"},
	{"type": "positive", "value": "You may rely on it"},
	{"type": "positive", "value": "As I see it, yes"},
	{"type": "positive", "value": "Most likely"},
	{"type": "positive", "value": "Outlook good"},
	{"type": "positive", "value": "Mos def"},
	{"type": "positive", "value": "Signs point to yes"},

	{"type": "neutral", "value": "Reply hazy try again"},
	{"type": "neutral", "value": "Ask again later"},
	{"type": "neutral", "value": "Better not tell you now"},
	{"type": "neutral", "value": "Cannot predict now"},
	{"type": "neutral", "value": "Concentrate and ask again"},

	{"type": "nagative", "value": "Don't count on it"},
	{"type": "nagative", "value": "My reply is no"},
	{"type": "nagative", "value": "My sources say no"},
	{"type": "nagative", "value": "Outlook not so good"},
	{"type": "nagative", "value": "Very doubtful"}
	]
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>8ball</title>
	<script src="libraries/p5.js" type="text/javascript"></script>

	<script src="libraries/p5.dom.js" type="text/javascript"></script>
	<script src="libraries/p5.sound.js" type="text/javascript"></script>
	<script src="libraries/p5.serialport.js" type="text/javascript"></script>

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

	<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
	<div id='myContainer'></div>

	</body>
	</html>
	var data;
	var options = [];
	var input;
	var question;
	var button;
	var welcome;
	var ballResponse;

	var questions = [];
	var mouseClicks = 0;


	function preload() {
	data = loadJSON("answers.json");
	}

	function setup() {

	for (i = 0; i < data.answers.length; i++) {
	var tempOption = data.answers[i];
	var o = new Option(tempOption.value);
	options[i] = o;
	}

	background(255);

	welcome = createP("Hello, enter a yes or no question.");
	welcome.parent('myContainer');
	welcome.class("welcome");

	input = createInput();
	input.parent('myContainer');
	input.size(250, 40);

	button = createButton("Submit");
	button.parent('myContainer');
	button.size(256, 25);

	ballResponse = createP("");
	ballResponse.parent('myContainer');
	ballResponse.class('response');

	button.mousePressed(checkAnswer);
	}


	// constructor function
	function Option(tempValue) {
	this.value = tempValue;

	this.getValue = function() {
	return this.value;
	}
	}

	//check for answer
	function checkAnswer() {
	mouseClicks++;
	questions[mouseClicks] = input.value();

	if (questions[mouseClicks] === "") {
	alert("Ask a yes or no question!");
	} else if (questions[mouseClicks] === questions[mouseClicks-1]) {
	alert("Enter a new question.")
	} else {
	giveAnswer();
	}
	}


	// give an answer
	function giveAnswer() {

	//pick an answer randomly from the options
	var i = Math.round(random(options.length));
	var response = options[i].getValue();

	ballResponse.html(response);
	}
	body {
	text-align: center;
	font-family: 'serif';
	background-color: #222;
	font-size: 14px;
	}

	#myContainer {
	display: block;
	/min-height: 300px;/
	width:500px;
	margin: 50px auto;
	background-color: #fff;
	padding: 75px 0;
	}

	.welcome {
	font-size: 18px;
	margin-bottom: 35px;
	}

	.response {
	text-transform: uppercase;
	font-size: 16px;
	}

	input, button {
	text-align: center;
	border-color: #222;
	}

	input {
	margin-bottom: 5px;
	}

	button {
	text-transform: uppercase;
	margin-bottom: 30px;
	}



	#defaultCanvas {
	display: none;
	}