397 lines
20 KiB
HTML
397 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Last Avatar Standing</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link href="https://fonts.googleapis.com/css?family=Squada+One" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600,700" rel="stylesheet">
|
|
<link rel="stylesheet" href="trivia.css?065">
|
|
</head>
|
|
<body>
|
|
<div id="title">
|
|
<h1 class="size48">LAST<span> AVATAR </span>STANDING</h1>
|
|
</div>
|
|
<input type="button" class="green" id="begin" value="NEW GAME">
|
|
<input type="button" class="red" id="end" disabled=true value="END GAME">
|
|
<h4>Choose Question Details (Optional) <br>& Click 'New Question'</h4>
|
|
|
|
<div class="dropdown">
|
|
<input type="button" class="blue" id="catalog" onclick="toggleMenu('databasedropdown')" disabled = true value="Default Catalog ▼">
|
|
<ul class="dropdown-database">
|
|
<div id="databasedropdown" class="dropdown-items">
|
|
<li>Default Catalog</li>
|
|
<li>Custom Catalog</li>
|
|
<li>Misc. Catalog</li>
|
|
</div>
|
|
</ul>
|
|
<input type="button" id="selectedType" onclick="toggleMenu('typedropdown')" class="blue" disabled = true 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>
|
|
<br>
|
|
<input type="button" id="selectedDifficulty" onclick="toggleMenu('difficultydropdown')" class="blue" disabled = true value="Level ▼">
|
|
<ul class="dropdown-difficulty">
|
|
<div id="difficultydropdown" class="dropdown-items">
|
|
<li>Any</li>
|
|
<li>Easy</li>
|
|
<li>Medium</li>
|
|
<li>Hard</li>
|
|
</div>
|
|
</ul>
|
|
<input type="button" id="selectedCategory" onclick="toggleMenu('categorydropdown')" class="blue" disabled = true 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>
|
|
<br>
|
|
</div>
|
|
|
|
<input type="button" class="green" id="newQuestion" disabled = true value="New Question">
|
|
<p>
|
|
<div id="question">
|
|
The question will show here for preview. <br><br>
|
|
* Try to avoid showing questions if either the question or answers use special characters. <br><br>
|
|
** Each answer should fit on a single line, as shown below.
|
|
</div>
|
|
<p>
|
|
<input type="button" class="green" id="showQuestion" disabled = true value="Show This Question">
|
|
<input type="button" class="green" id="showAnswers" disabled = true value="Start The Clock!">
|
|
<p>
|
|
<div id="answer">
|
|
Answer text should be no longer than this sentence.
|
|
</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') && !event.target.matches('#catalog')) {
|
|
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 (event === "newGame") {
|
|
databaseButton.disabled = true;
|
|
typeButton.disabled = true;
|
|
diffButton.disabled = true;
|
|
catButton.disabled = true;
|
|
beginButton.disabled = false;
|
|
endButton.disabled = true;
|
|
newQButton.disabled = true;
|
|
showQButton.disabled = true;
|
|
answerButton.disabled = true;
|
|
}
|
|
else if (event === "re-enable") {
|
|
databaseButton.disabled = false;
|
|
typeButton.disabled = false;
|
|
diffButton.disabled = false;
|
|
catButton.disabled = false;
|
|
beginButton.disabled = true;
|
|
endButton.disabled = false;
|
|
newQButton.disabled = false;
|
|
showQButton.disabled = true;
|
|
answerButton.disabled = true;
|
|
}
|
|
else if (event === "gameInProgress") {
|
|
typeButton.disabled = false;
|
|
diffButton.disabled = false;
|
|
catButton.disabled = false;
|
|
databaseButton.disabled = false;
|
|
beginButton.disabled = true;
|
|
endButton.disabled = false;
|
|
newQButton.disabled = false;
|
|
showQButton.disabled = false;
|
|
answerButton.disabled = true;
|
|
}
|
|
else if (event === "noQuestionPosted") {
|
|
databaseButton.disabled = false;
|
|
typeButton.disabled = false;
|
|
diffButton.disabled = false;
|
|
catButton.disabled = false;
|
|
beginButton.disabled = true;
|
|
endButton.disabled = false;
|
|
newQButton.disabled = false;
|
|
showQButton.disabled = true;
|
|
answerButton.disabled = true;
|
|
}
|
|
else if (event === "re-enableCustom") {
|
|
databaseButton.value = "Custom Catalog" + " \u25BC";
|
|
databaseButton.disabled = false;
|
|
typeButton.disabled = true;
|
|
diffButton.disabled = true;
|
|
catButton.disabled = true;
|
|
beginButton.disabled = true;
|
|
endButton.disabled = false;
|
|
newQButton.disabled = false;
|
|
showQButton.disabled = true;
|
|
answerButton.disabled = true;
|
|
}
|
|
else if (event === "gameInProgressCustom") {
|
|
databaseButton.value = "Custom Catalog" + " \u25BC";
|
|
typeButton.disabled = true;
|
|
diffButton.disabled = true;
|
|
catButton.disabled = true;
|
|
databaseButton.disabled = false;
|
|
beginButton.disabled = true;
|
|
endButton.disabled = false;
|
|
newQButton.disabled = false;
|
|
showQButton.disabled = false;
|
|
answerButton.disabled = true;
|
|
}
|
|
else if (event === "noQuestionPostedCustom") {
|
|
databaseButton.value = "Custom Catalog" + " \u25BC";
|
|
databaseButton.disabled = false;
|
|
typeButton.disabled = true;
|
|
diffButton.disabled = true;
|
|
catButton.disabled = true;
|
|
beginButton.disabled = true;
|
|
endButton.disabled = false;
|
|
newQButton.disabled = false;
|
|
showQButton.disabled = true;
|
|
answerButton.disabled = true;
|
|
}
|
|
else {
|
|
try{
|
|
triviaData = JSON.parse(event);
|
|
console.log(event);
|
|
if(triviaData.application !== "trivia") {
|
|
return;
|
|
}
|
|
if ("question" in triviaData) {
|
|
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 ("response_code" in triviaData) {
|
|
document.getElementById("question").innerHTML = "Response: " + triviaData["response_code"] + " Check with your trivia database or HiFi Admin, something is clearly wrong";
|
|
databaseButton.disabled = true;
|
|
typeButton.disabled = true;
|
|
diffButton.disabled = true;
|
|
catButton.disabled = true;
|
|
beginButton.disabled = false;
|
|
endButton.disabled = true;
|
|
newQButton.disabled = true;
|
|
showQButton.disabled = true;
|
|
answerButton.disabled = true;
|
|
} else {
|
|
document.getElementById("question").innerHTML = "You entered an invalid URL, tab name, or have not properly setup your trivia database for access by this application. Try using the 'Default Catalog' instead.";
|
|
databaseButton.disabled = true;
|
|
typeButton.disabled = true;
|
|
diffButton.disabled = true;
|
|
catButton.disabled = true;
|
|
beginButton.disabled = false;
|
|
endButton.disabled = true;
|
|
newQButton.disabled = true;
|
|
showQButton.disabled = true;
|
|
answerButton.disabled = true;
|
|
}
|
|
} catch (e){
|
|
console.log(e, "error");
|
|
}
|
|
}
|
|
}
|
|
|
|
$(document).ready(function () {
|
|
EventBridge.scriptEventReceived.connect(onScriptEventReceived);
|
|
});
|
|
|
|
var databaseButton = document.getElementById("catalog");
|
|
var typeButton = document.getElementById("selectedType");
|
|
var diffButton = document.getElementById("selectedDifficulty");
|
|
var catButton = document.getElementById("selectedCategory");
|
|
var endButton = document.getElementById("end");
|
|
var beginButton = document.getElementById("begin");
|
|
var newQButton = document.getElementById("newQuestion");
|
|
var showQButton = document.getElementById("showQuestion");
|
|
var answerButton = document.getElementById("showAnswers");
|
|
$('#begin').click(function() {
|
|
var event = {
|
|
app: 'trivia',
|
|
type: "begin"
|
|
};
|
|
databaseButton.disabled = false;
|
|
typeButton.disabled = false;
|
|
diffButton.disabled = false;
|
|
catButton.disabled = false;
|
|
beginButton.disabled = true;
|
|
endButton.disabled = false;
|
|
newQButton.disabled = false;
|
|
document.getElementById('question').innerHTML = "The question will show here for preview. <br><br> \
|
|
* Try to avoid showing questions if either the question or answers use special characters. <br><br> \
|
|
** Each answer should fit on a single line, as shown below.";
|
|
document.getElementById('answer').innerHTML = "Answer text should be no longer than this sentence."
|
|
EventBridge.emitWebEvent(JSON.stringify(event));
|
|
});
|
|
$('#end').click(function() {
|
|
var event = {
|
|
app: 'trivia',
|
|
type: "end"
|
|
};
|
|
databaseButton.disabled = true;
|
|
typeButton.disabled = true;
|
|
diffButton.disabled = true;
|
|
catButton.disabled = true;
|
|
endButton.disabled = true;
|
|
beginButton.disabled = false;
|
|
newQButton.disabled = true;
|
|
showQButton.disabled = true;
|
|
answerButton.disabled = true;
|
|
document.getElementById('question').innerHTML = "The question will show here for preview. <br><br> \
|
|
* Try to avoid showing questions if either the question or answers use special characters. <br><br> \
|
|
** Each answer should fit on a single line, as shown below.";
|
|
document.getElementById('answer').innerHTML = "Answer text should be no longer than this sentence."
|
|
EventBridge.emitWebEvent(JSON.stringify(event));
|
|
});
|
|
$('#databasedropdown li').click(function() {
|
|
document.getElementById('catalog').value=$(this).text() + " \u25BC";
|
|
var event = {
|
|
app: 'trivia',
|
|
type: "catalog",
|
|
value: $(this).text()
|
|
};
|
|
if (document.getElementById('catalog').value === "Custom Catalog" + " \u25BC") {
|
|
typeButton.disabled = true;
|
|
diffButton.disabled = true;
|
|
catButton.disabled = true;
|
|
} else if (document.getElementById('catalog').value === "Misc. Catalog" + " \u25BC") {
|
|
typeButton.disabled = true;
|
|
diffButton.disabled = true;
|
|
catButton.disabled = true;
|
|
} else {
|
|
typeButton.disabled = false;
|
|
diffButton.disabled = false;
|
|
catButton.disabled = false;
|
|
}
|
|
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() {
|
|
databaseButton.disabled = false;
|
|
if (document.getElementById('catalog').value !== "Default Catalog" + " \u25BC") {
|
|
typeButton.disabled = true;
|
|
diffButton.disabled = true;
|
|
catButton.disabled = true;
|
|
} else {
|
|
typeButton.disabled = false;
|
|
diffButton.disabled = false;
|
|
catButton.disabled = false;
|
|
}
|
|
beginButton.disabled = true;
|
|
endButton.disabled = false;
|
|
newQButton.disabled = false;
|
|
showQButton.disabled = false;
|
|
answerButton.disabled = true;
|
|
var event = {
|
|
app: 'trivia',
|
|
type: "newQuestion"
|
|
};
|
|
EventBridge.emitWebEvent(JSON.stringify(event));
|
|
});
|
|
$('#showQuestion').click(function() {
|
|
var event = {
|
|
app: 'trivia',
|
|
type: "showQuestion"
|
|
};
|
|
databaseButton.disabled = true;
|
|
typeButton.disabled = true;
|
|
diffButton.disabled = true;
|
|
catButton.disabled = true;
|
|
beginButton.disabled = true;
|
|
endButton.disabled = false;
|
|
newQButton.disabled = true;
|
|
showQButton.disabled = true;
|
|
answerButton.disabled = false;
|
|
EventBridge.emitWebEvent(JSON.stringify(event));
|
|
});
|
|
$('#showAnswers').click(function() {
|
|
var event = {
|
|
app: 'trivia',
|
|
type: "showAnswers"
|
|
};
|
|
databaseButton.disabled = true;
|
|
typeButton.disabled = true;
|
|
diffButton.disabled = true;
|
|
catButton.disabled = true;
|
|
beginButton.disabled = true;
|
|
endButton.disabled = false;
|
|
newQButton.disabled = true;
|
|
showQButton.disabled = true;
|
|
answerButton.disabled = true;
|
|
EventBridge.emitWebEvent(JSON.stringify(event));
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|