mirror of
https://github.com/ysoftdevs/cloud-workshop.git
synced 2026-01-11 22:40:51 +01:00
70 lines
3.0 KiB
HTML
70 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
|
|
<!-- Latest compiled and minified CSS -->
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
|
|
|
|
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
|
|
|
|
<script type="text/javascript">
|
|
/* global $ */
|
|
|
|
var czechWords = [ "dům", "auto", "slovo", "škola", "den", "strom", "sopka"];
|
|
var englishWords = [ "house", "car", "word", "school", "day", "tree", "vulcan"];
|
|
var primaryWordIndex = 0;
|
|
var secondaryWord = "";
|
|
|
|
function buttonClickHandler(event) {
|
|
var message;
|
|
if (event.target.textContent == secondaryWord) {
|
|
message = "Congratulation! Correct answer.";
|
|
$("#statusIcon").addClass("glyphicon-ok").removeClass("glyphicon-remove");
|
|
generateWord();
|
|
} else {
|
|
message = "Incorrect answer. Try again.";
|
|
$("#statusIcon").addClass("glyphicon-remove").removeClass("glyphicon-ok");
|
|
}
|
|
$("#status").text(message);
|
|
}
|
|
|
|
function generateWord() {
|
|
primaryWordIndex = Math.floor(Math.random() * englishWords.length);
|
|
$("#primaryWord").text(englishWords[primaryWordIndex]);
|
|
secondaryWord = czechWords[primaryWordIndex];
|
|
|
|
var wordIndex;
|
|
var index;
|
|
for (index = 0; index < 4; index++) {
|
|
wordIndex = Math.floor(Math.random() * englishWords.length);
|
|
$("#button" + index).text(czechWords[wordIndex]);
|
|
}
|
|
index = Math.floor(Math.random() * 4);
|
|
$("#button" + index).text(secondaryWord);
|
|
}
|
|
|
|
function documentReady() {
|
|
$(".btn").click(buttonClickHandler);
|
|
generateWord();
|
|
}
|
|
|
|
$( document ).ready(documentReady);
|
|
</script>
|
|
|
|
</head>
|
|
<body>
|
|
<h1>Word catcher</h1>
|
|
<div id="primaryWord">word</div>
|
|
<div>
|
|
<button id="button0" type="button" class="btn btn-default">dům</button>
|
|
<button id="button1" type="button" class="btn btn-default">auto</button>
|
|
<button id="button2" type="button" class="btn btn-default">slovo</button>
|
|
<button id="button3" type="button" class="btn btn-default">škola</button>
|
|
</div>
|
|
<div>
|
|
<span id="statusIcon" class="glyphicon" ></span>
|
|
<span id="status">...select word...</span>
|
|
</div>
|
|
</body>
|
|
</html> |