I'm particularly concerned about where I have declared the functions, can I move them around to clean up the code without breaking anything? The "conjugate" function contains a lot of stuff that has nothing to do with actually conjugating verbs and rather handles output strings and html DOM objects. I really want to minimalize/optimize that function so it only does the essential and have the other DOM stuff handled by a more appropriate function but I'm scared to break anything lol
Also my use of multiple global variables, is there a better way to do that?
Sorry for the incredibly noobish question but I have kinda rushed through this to get my ideas down as quick as possible and it's suddenly become a bit overwhelming :/
Thanks in advance for any help!
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="./jquery.js"></script>
<style>
.answer {
list-style-type: none;
cursor: pointer;
font-family: fontin;
}
#base, .answer {
padding:10px 15px;
background-color: #B7BECC;
overflow: auto;
margin: 20px 1px;
border: 1px solid;
font-size: 18.7pt;
text-align: center;
display:inline;
}
#base {
border-radius: 10px;
}
.answers{
margin-top:30px;
}
#container{
margin: 21px auto;
position: relative;
width: 100%;
max-width: 1000px;
text-align: center;
min-width: 600px;
}
</style>
<script>
$(function () {
var video = $("#video").get(0);
var baseverbs = ["작다", "놀다", "닦다"];
var questionnum = 0;
var correct = "";
//set mouseover colors
$(".answer").each(function () {
$(this).mouseover(function () {
var bg = $(this).css("background-color");
if (bg == "rgb(183, 190, 204)" || bg == "#b7becc") {
$(this).css("background-color", "#E5E8EE")
}
}).mouseout(function () {
var bg = $(this).css("background-color");
if (bg == "rgb(229, 232, 238)" || bg == "#e5e8ee") {
$(this).css("background-color", "#B7BECC")
}
})
});
function seperate(x) {
x = x.charCodeAt();
var y = {};
var z = {};
y["tail"] = (x - 44032) % 28;
y["vowel"] = 1 + ((x - 44032 - y["tail"]) % 588 / 28);
y["lead"] = 1 + (parseInt((x - 44032) / 588));
z["vowel"] = vowels[y["vowel"]];
z["tail"] = tails[y["tail"]];
z["lead"] = leads[y["lead"]];
return z;
}
var vowels = "0ㅏㅐㅑㅒㅓㅔㅕㅖㅗㅘㅙㅚㅛㅜㅝㅞㅟㅠㅡㅢㅣ".split("");
var leads = "0ㄱㄲㄴㄷㄸㄹㅁㅂㅃㅅㅆㅇㅈㅉㅊㅋㅌㅍㅎ".split("");
var tails = "0ㄱㄲㄳㄴㄵㄶㄷㄹㄺㄻㄼㄽㄾㄿㅀㅁㅂㅄㅅㅆㅇㅈ".split("");
function buildhangeul(x) {
var tail = tails.indexOf(x["tail"]);
var vowel = vowels.indexOf(x["vowel"]);
var lead = leads.indexOf(x["lead"]);
var codepoint = tail + (vowel - 1) * 28 + (lead - 1) * 588 + 44032;
return String.fromCharCode(codepoint);
}
function pausehere(time) {
video.addEventListener('timeupdate', function (e) {
if (this.currentTime >= time && this.currentTime < (time + 0.3)) {
this.pause()
}
}, true);
};
function conjugate(baseverbs) {
var baseverb = baseverbs[questionnum];
$("#base").text(baseverb);
$(".answer").css("background-color", "#B7BECC");
var output = {};
output.incorrect = [];
var tstr = baseverb;
var each = tstr.split("");
if (each[each.length - 1] == "다") {
var stemlast = each[each.length - 2];
var lastjamo = seperate(stemlast);
//ㅂ irregular
if (lastjamo["tail"] == "ㅂ") {
lastjamo["tail"] = "0";
stemlast = buildhangeul(lastjamo);
output.correct = each.slice(0, -2).join("") + stemlast + "워";
output.incorrect[0] = each.slice(0, -1).join("") + buildhangeul({
"lead": "ㅇ",
"vowel": lastjamo["vowel"],
"tail": "0"
});
output.incorrect[1] = each.slice(0, -1).join("") + "워";
output.incorrect[2] = each.slice(0, -2).join("") + stemlast + "와";
} //ㅏ and ㅗ regular
else if (lastjamo["vowel"] == "ㅏ" && lastjamo["tail"] != "0" || lastjamo["vowel"] == "ㅗ" && lastjamo["tail"] != "0") {
output.correct = stemlast + "아";
output.incorrect[0] = buildhangeul({
"lead": lastjamo["lead"],
"vowel": lastjamo["vowel"],
"tail": "0"
}) + buildhangeul({
"lead": lastjamo["tail"],
"vowel": lastjamo["vowel"],
"tail": "0"
});
output.incorrect[1] = stemlast + "ㅏ";
output.incorrect[2] = stemlast;
}
//ㅓ, ㅜ, and ㅣ regular
else if (lastjamo["vowel"] == "ㅓ" && lastjamo["tail"] != "0" || lastjamo["vowel"] == "ㅜ" && lastjamo["tail"] != "0" || lastjamo["vowel"] == "ㅣ" && lastjamo["tail"] != "0") {
output.correct = stemlast + "어";
}
//ㅏ and ㅓ reductive
else if (lastjamo["vowel"] == "ㅏ" && lastjamo["tail"] == "0" || lastjamo["vowel"] == "ㅓ" && lastjamo["tail"] == "0") {
output.correct = stemlast;
output.incorrect[0] = stemlast + buildhangeul({
"lead": "ㅇ",
"vowel": lastjamo["vowel"],
"tail": "0"
});
output.incorrect[1] = buildhangeul({
"lead": lastjamo["lead"],
"vowel": "ㅐ",
"tail": "0"
});
output.incorrect[2] = baseverb;
}
//ㅗ and ㅜ reductive
else if (lastjamo["vowel"] == "ㅗ" && lastjamo["tail"] == "0") {
lastjamo["vowel"] = "ㅘ";
output.correct = buildhangeul(lastjamo);
output.incorrect[0] = stemlast + "와";
output.incorrect[1] = stemlast + "아";
output.incorrect[2] = buildhangeul({
"lead": lastjamo["lead"],
"vowel": "ㅝ",
"tail": "0"
});
} else if (lastjamo["vowel"] == "ㅜ" && lastjamo["tail"] == "0") {
lastjamo["vowel"] = "ㅝ";
output.correct = buildhangeul(lastjamo);
output.incorrect[0] = stemlast + buildhangeul({
"lead": "ㅇ",
"vowel": "ㅝ",
"tail": "0"
});
output.incorrect[1] = buildhangeul({
"lead": lastjamo["lead"],
"vowel": "ㅜ",
"tail": "0"
}) + buildhangeul({
"lead": "ㅇ",
"vowel": "ㅓ",
"tail": "0"
});
output.incorrect[2] = buildhangeul({
"lead": lastjamo["lead"],
"vowel": "ㅘ",
"tail": "0"
});
}
//ㅣreductive
else if (lastjamo["vowel"] == "ㅣ" && lastjamo["tail"] == "0") {
lastjamo["vowel"] = "ㅕ";
output.correct = each.slice(0, -2).join("") + buildhangeul(lastjamo);
}
//르 irregular
else if (stemlast == "르") {
var secondlastjamo = seperate(each[each.length - 3]);
secondlastjamo["tail"] = "ㄹ";
if (secondlastjamo["vowel"] == "ㅗ") {
stemlast = "라"
} else if (secondlastjamo["vowel"] == "ㅜ") {
stemlast = "러"
};
var secondlast = buildhangeul(secondlastjamo);
output.correct = each.slice(0, -3).join("") + secondlast + stemlast;
};
} else {
alert("Only Korean verbs in dictionary form please ;)")
}
$("#wrong0").text(output.incorrect[0]);
$("#wrong1").text(output.incorrect[1]);
$("#wrong2").text(output.incorrect[2]);
$("#correct").text(output.correct);
correct = output.correct;
random($(".answers"));
$(".answer").css("border-radius", "0px");
$('.answer').first().css('border-radius', '10px 0px 0px 10px');
$('.answer').last().css('border-radius', '0px 10px 10px 0px');
}
$('.answer').click(function () {
if (video.currentTime <= 160){$("#warning").text("Not yet!").fadeIn(300).delay(1400).fadeOut(300);return}
if ($(this).text() === correct) { //if correct
//skip to congratulations
$(this).css("background-color", "#62F05F");
questionnum++;
if (questionnum === 1) {
video.currentTime = 164.2;
video.play();
pausehere(166.8);
}else if(questionnum === 2){
video.currentTime = 167.1;
video.play();
pausehere(170);
}else if(questionnum === 3){
video.currentTime = 171.7;
video.play();
}
//if incorrect
} else {
//skip to try again msg
$(this).css("background-color", "red");
video.currentTime = 160.5;
video.play();
pausehere(164);
}
alert(questionnum);
if (questionnum >= 3){return;};
setTimeout(conjugate(baseverbs), 300);
});
$("#reset").click(function () {
video.currentTime = 0;
videostart()
});
function videostart() {
video.play();
//pause after tutorial
pausehere(159);
}
var random = function (r) {
r.children().sort(function (a, b) {
return Math.floor(Math.random() * 3) - 1;
}).appendTo(r);
};
videostart();
conjugate(baseverbs);
})
</script>
</head>
<body>
<div id="container">
<div id="videowrapper">
<video id="video" no-controls>
<source src="conjugation tut.mp4" type="video/mp4">
<source src="play.ogg" type='video/ogg'>
<source src="play.webm" type="video/webm">Your browser does not support the video tag.</video>
<br />
<button id="reset">Replay</button>
</div>
<br />
<div id="base"></div>
<ul class="answers">
<li class="answer" id="wrong0"></li>
<li class="answer" id="wrong1"></li>
<li class="answer" id="wrong2"></li>
<li class="answer" id="correct"></li>
</ul>
<br /><br /><br>
<div id="warning">
</div>
</div>
</body>
</html>
