228 lines
11 KiB
HTML
228 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Trivia</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600,700" rel="stylesheet">
|
|
<link rel="stylesheet" href="trivia.css?065">
|
|
</head>
|
|
<body>
|
|
<h1>Trivia</h1>
|
|
<input type="button" class="gray" id="begin" value="Let's get started!">
|
|
<input type="button" class="gray" id="end" value="Game Over">
|
|
<h3>Questions</h3>
|
|
<div class="dropdown">
|
|
<input type="button" id="selectedType" onclick="toggleMenu('typeDropdown')" class="gray" value="Any Type ▼">
|
|
<ul class="dropdown-type">
|
|
<div id="typeDropdown" class="dropdown-items">
|
|
<li>Any Type</li>
|
|
<li>Multiple Choice</li>
|
|
<li>True or False</li>
|
|
</div>
|
|
</ul>
|
|
<br>
|
|
<input type="button" id="selectedDifficulty" onclick="toggleMenu('difficultyDropdown')" class="gray" value="Any Difficulty ▼">
|
|
<ul class="dropdown-difficulty">
|
|
<div id="difficultyDropdown" class="dropdown-items">
|
|
<li>Any Difficulty</li>
|
|
<li>Easy</li>
|
|
<li>Medium</li>
|
|
<li>Hard</li>
|
|
</div>
|
|
</ul>
|
|
<br>
|
|
<input type="button" id="selectedCategory" onclick="toggleMenu('categoryDropdown')" class="gray" value="Any Category ▼">
|
|
<ul class="dropdown-category">
|
|
<div id="categoryDropdown" class="dropdown-items">
|
|
<li value="">Any Category</li>
|
|
<li value="9">General Knowledge</li>
|
|
<li value="10">Books</li>
|
|
<li value="11">Film</li>
|
|
<li value="12">Music</li>
|
|
<li value="13">Musicals and Theatres</li>
|
|
<li value="14">Television</li>
|
|
<li value="15">Video Games</li>
|
|
<li value="16">Board Games</li>
|
|
<li value="29">Comics</li>
|
|
<li value="31">Japanese Anime and Manga</li>
|
|
<li value="32">Cartoon and Animations</li>
|
|
<li value="18">Computers</li>
|
|
<li value="19">Mathematics</li>
|
|
<li value="30">Gadgets</li>
|
|
<li value="25">Art</li>
|
|
<li value="26">Celebrities</li>
|
|
<li value="27">Animals</li>
|
|
<li value="28">Vehicles</li>
|
|
<li value="20">Mythology</li>
|
|
<li value="21">Sports</li>
|
|
<li value="23">History</li>
|
|
<li value="22">Geography</li>
|
|
<li value="24">Politics</li>
|
|
</div>
|
|
</ul>
|
|
<br>
|
|
</div>
|
|
<p>
|
|
<input type="button" class="gray" id="newQuestion" value="New Question">
|
|
<p>
|
|
<input type="button" class="gray" id="showQuestion" value="Show This Question">
|
|
<input type="button" class="gray" id="showAnswers" value="Start The Clock!">
|
|
<div id="question">
|
|
Your question will show here for preview. Make sure the question and answers do not have special
|
|
characters and answers should not be longer than about 2/3 of this line.
|
|
</div>
|
|
<p>
|
|
<div id="answer">
|
|
Answer options will appear here.
|
|
</div>
|
|
<br>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
|
<script>
|
|
function toggleMenu(menu) {
|
|
document.getElementById(menu).classList.toggle("show");
|
|
}
|
|
window.onclick = function(event) {
|
|
if (!event.target.matches('#selectedType') && !event.target.matches('#selectedDifficulty')
|
|
&& !event.target.matches('#selectedCategory')) {
|
|
var dropdowns = document.getElementsByClassName("dropdown-items");
|
|
var i;
|
|
for (i = 0; i < dropdowns.length; i++) {
|
|
var openDropdown = dropdowns[i];
|
|
if (openDropdown.classList.contains('show')) {
|
|
openDropdown.classList.remove('show');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
function onScriptEventReceived(event) {
|
|
if (typeof event === "string") {
|
|
if (event["question"] !== "") {
|
|
triviaData = JSON.parse(event);
|
|
document.getElementById("question").innerHTML = triviaData.question;
|
|
if (triviaData.type === "multiple") {
|
|
document.getElementById("answer").innerHTML = "<p class=\"correct\">" +
|
|
triviaData.correct_answer + "<p>" +
|
|
triviaData.incorrect_answers[0] + "<p>" +
|
|
triviaData.incorrect_answers[1] + "<p>" +
|
|
triviaData.incorrect_answers[2];
|
|
} else {
|
|
document.getElementById("answer").innerHTML = triviaData.correct_answer;
|
|
}
|
|
} else if (event["response_code"] !== 0) {
|
|
document.getElementById("question").innerHTML = "Response: " + event["Response"] + " Check your trivia database or HiFi Admin, something is clearly wrong";
|
|
} else if (event === "disable buttons") {
|
|
//disable
|
|
} else {
|
|
document.getElementById("question").innerHTML = "Check your trivia database or HiFi Admin, something is clearly wrong";
|
|
}
|
|
}
|
|
}
|
|
|
|
$(document).ready(function () {
|
|
EventBridge.scriptEventReceived.connect(onScriptEventReceived);
|
|
});
|
|
$('#begin').click(function() {
|
|
var event = {
|
|
app: 'trivia',
|
|
type: "begin"
|
|
};
|
|
document.getElementById('question').innerHTML = "Your question will show here for preview. Make sure the question and answers do not have special \
|
|
characters and answers should not be longer than about 2/3 of this line.";
|
|
document.getElementById('answer').innerHTML = "Answer options will appear here."
|
|
EventBridge.emitWebEvent(JSON.stringify(event));
|
|
var buttons = document.getElementsByTagName("button");
|
|
buttons.foreach(function(item){
|
|
if (item === document.getElementsByID("selectedType") ||
|
|
item === document.getElementsByID("selectedDifficulty") ||
|
|
item === document.getElementsByID("selectedCategory") ||
|
|
item === document.getElementsByID("newQuestion")){
|
|
item.disabled = false;
|
|
}
|
|
});
|
|
});
|
|
$('#end').click(function() {
|
|
var event = {
|
|
app: 'trivia',
|
|
type: "end"
|
|
};
|
|
var buttons = document.getElementsByTagName("button");
|
|
buttons.foreach(function(item){
|
|
if (item !== document.getElementsByID("begin")){
|
|
item.disabled = true;
|
|
}
|
|
});
|
|
document.getElementById('question').innerHTML = "Your question will show here for preview. Make sure the question and answers do not have special \
|
|
characters and answers should not be longer than about 2/3 of this line.";
|
|
document.getElementById('answer').innerHTML = "Answer options will appear here."
|
|
EventBridge.emitWebEvent(JSON.stringify(event));
|
|
});
|
|
$('#typeDropdown li').click(function() {
|
|
document.getElementById('selectedType').value=$(this).text() + " \u25BC";
|
|
var event = {
|
|
app: 'trivia',
|
|
type: "type",
|
|
value: $(this).text()
|
|
};
|
|
EventBridge.emitWebEvent(JSON.stringify(event));
|
|
});
|
|
$('#difficultyDropdown li').click(function() {
|
|
document.getElementById('selectedDifficulty').value=$(this).text() + " \u25BC";
|
|
var event = {
|
|
app: 'trivia',
|
|
type: "difficulty",
|
|
value: $(this).text()
|
|
};
|
|
EventBridge.emitWebEvent(JSON.stringify(event));
|
|
});
|
|
$('#categoryDropdown li').click(function() {
|
|
document.getElementById('selectedCategory').value=$(this).text() + " \u25BC";
|
|
var event = {
|
|
app: 'trivia',
|
|
type: "category",
|
|
value: $(this).text()
|
|
};
|
|
EventBridge.emitWebEvent(JSON.stringify(event));
|
|
});
|
|
$('#newQuestion').click(function() {
|
|
var event = {
|
|
app: 'trivia',
|
|
type: "newQuestion"
|
|
};
|
|
var buttons = document.getElementsByTagName("button");
|
|
buttons.foreach(function(item){
|
|
if (item === document.getElementsByID("showQuestion")){
|
|
item.disabled = false;
|
|
}
|
|
});
|
|
EventBridge.emitWebEvent(JSON.stringify(event));
|
|
});
|
|
$('#showQuestion').click(function() {
|
|
var event = {
|
|
app: 'trivia',
|
|
type: "showQuestion"
|
|
};
|
|
var buttons = document.getElementsByTagName("button");
|
|
buttons.foreach(function(item){
|
|
if (item === document.getElementsByID("begin")){
|
|
item.disabled = true;
|
|
}
|
|
});
|
|
EventBridge.emitWebEvent(JSON.stringify(event));
|
|
});
|
|
$('#showAnswers').click(function() {
|
|
var event = {
|
|
app: 'trivia',
|
|
type: "showAnswers"
|
|
};
|
|
var buttons = document.getElementsByTagName("button");
|
|
buttons.foreach(function(item){
|
|
if (item !== document.getElementsByID("begin")){
|
|
item.disabled = true;
|
|
}
|
|
});
|
|
EventBridge.emitWebEvent(JSON.stringify(event));
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|