// categories is the main data structure for the app; it looks like this:
// [
// { title: "Math",
// clues: [
// {question: "2+2", answer: 4, showing: null},
// {question: "1+1", answer: 2, showing: null}
// ...
// ],
// },
// { title: "Literature",
// clues: [
// {question: "Hamlet Author", answer: "Shakespeare", showing: null},
// {question: "Bell Jar Author", answer: "Plath", showing: null},
// ...
// ],
// },
// ...
// ]
fillTable();
handleClick();
/** Get NUM_CATEGORIES random category from API.
*
* Returns array of category ids
*/
var NUM_CATEGORIES = [];
async function getCategoryId() {
//ADD if cat ID exists in array than run axios get again to randomize
let response = await axios.get('http://jservice.io/api/random?count=6');
NUM_CATEGORIES.push(response.data.map(result => ({
id: result.category.id,
})))
//console.log(NUM_CATEGORIES);//returns an array length 6 of id's
return NUM_CATEGORIES;
}
/** Return object with data about a category:
*
* Returns { title: "Math", clues: clue-array }
*
* Where clue-array is:
* [
* {question: "Hamlet Author", answer: "Shakespeare", showing: null},
* {question: "Bell Jar Author", answer: "Plath", showing: null},
* ...
* ]
*/
async function getCategory(catId) {
var catData = [];
catId = [];
await getCategoryId(); //returns an array of category id's
Object.values(NUM_CATEGORIES).forEach(val => {
val.forEach(id => {
catId.push(Object.values(id))
});
});
for (let i = 0; i < 6; i++) {
let result = await axios.get(`http://jservice.io/api/category?id=${catId[i]}`);
catData.push(result.data);
}
return catData;
}
/** Fill the HTML table#jeopardy with the categories & cells for questions.
*
* - The <thead> should be filled w/a <tr>, and a <td> for each category
* - The <tbody> should be filled w/NUM_QUESTIONS_PER_CAT (6) <tr>s,
* each with a question for each category in a <td>
* (initally, just show a "?" where the question/answer would go.)
*/
async function fillTable() {
getCategory().then(response => {
var wildCard = 0;
var $titleData = `<table border="1"> <thead>
<tr>`;
//generate category titles
for (let i = 0; i < 6; i++) {
$titleData += `<td class="header" > ${response[i].title} </td>`;
}
$titleData += `</tr>
</thead>
<tbody>`;
var $rowData = '';
for (let i = 0; i < response.length; i++) { //generate 5 rows down
$rowData += `<tr>`;
for (let j = 0; j < 6; j++) { //fill 6 cells across
// if($(rowData).is(':contains($(response[j].clues[i].question)')){//check if duplicate question
// wildCard= j
// }
$rowData += `<td><div class="container">
<div class="null"><p>?</p></div>
<div class="question"><p> ${response[j].clues[i].question} </p></div>
</div></td>`;
}
$rowData += `</tr>`;
}
$titleData += $rowData;
$titleData += `</tbody></table>`;
console.log(response);
$('body').append($titleData);
});
}
/** Handle clicking on a clue: show the question or answer.
*
* Uses .showing property on clue to determine what to show:
* - if currently null, show question & set .showing to "question"
* - if currently "question", show answer & set .showing to "answer"
* - if currently "answer", ignore click
* */
function handleClick(e) {
$("body").on("click", function(e) {
if ($(e.target).is(".null")) { //if null show question
console.log("You clicked on a data cell. Yay!")
$(e.target).css("visibility", "hidden");
$(e.target.parentNode.question).css("visibility", "visible")
//$(".container > .question").css("visibility", "visible");
}
})
}
/** Wipe the current Jeopardy board, show the loading spinner,
* and update the button used to fetch data.
*/
function showLoadingView() {
}
/** Remove the loading spinner and update the button used to fetch data. */
function hideLoadingView() {}
/** Start game:
*
* - get random category Ids
* - get data for each category
* - create HTML table
* */
async function setupAndStart() {}
/** On click of start / restart button, set up game. */
// TODO
/** On page load, add event handler for clicking clues */
// TODO
/* some colors you may find useful:
#115ff4
#060ce9
#28a200
#8d2ab5
#74119c
*/
tbody>tr>td {
padding: 0%;
background-color: #115ff4;
z-index: -3;
;
}
.container {
display: flex;
align-items: center;
justify-content: center;
z-index: -2;
}
.question,
.null {
margin: 0;
}
.question {
visibility: hidden;
z-index: 1;
color: aliceblue;
}
.null {
color: aliceblue;
position: absolute;
z-index: 2;
font-size: 200%;
padding: 1% 8%;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Jeopardy</title>
<link href="https://fonts.googleapis.com/css?family=Copse&display=swap" rel="stylesheet">
<link rel="stylesheet" href="jeopardy.css">
</head>
<body>
<script src="https://unpkg.com/jquery"></script>
<script src="https://unpkg.com/axios/dist/axios.js"></script>
<script src="https://unpkg.com/lodash"></script>
<script src="jeopardy.js"></script>
</body>
</html>
