Fix: apply bootstrap - mouse, typing app

This commit is contained in:
2018-07-29 19:07:58 +09:00
parent d0be19ef0a
commit cc4adc2bb2
7 changed files with 95 additions and 71 deletions
+49 -29
View File
@@ -17,10 +17,7 @@ function loadTypingApp() {
},
(errorMessage, errorCode) => {
console.log(errorMessage);
if($("#error_message").length) {
$("#error_message").text(errorMessage);
}
showErrorMessage(errorMessage, "error");
}
);
@@ -49,14 +46,18 @@ function makeTypingAppList(appList) {
divTag = $("#typing_test_eng");
else
divTag = $("#typing_app");
divTag.append(
"<span>"
+ "<input type='checkbox' id='checkbox" + appData.appID + "' data-app-id='" + appData.appID + "' />"
+ "<label for='checkbox" + appData.appID + "'>" + appData.koreanName + "</label>"
+ "</span>"
);
$("#checkbox" + appData.appID).change(function() {
divTag.append('\
<div class="form-check col col-sm-2">\
<input class="form-check-input" type="checkbox" id="' + appData.appID + '" data-app-id="' + appData.appID + '" value="">\
<label class="form-check-label" for="' + appData.appID + '">\
' + appData.koreanName + '\
</label>\
</div>\
\
');
$("#" + appData.appID).change(function() {
if($(this).is(":checked")) {
activateApp($(this).data("appId"));
} else {
@@ -70,7 +71,7 @@ function activateTypingApp(activatedList) {
for(let i = 0; i < activatedList.length; i++) {
let activatedAppID = activatedList[i].appID;
let input = $("#checkbox" + activatedAppID);
let input = $("#" + activatedAppID);
input.prop("checked", true);
}
}
@@ -79,23 +80,42 @@ function activateTypingApp(activatedList) {
<div id="typing_app_content">
<div class="row mx-1">
<div class="col">
<h5 class="mt-2 mb-2">자리 연습</h5>
<form class="mx-4">
<p class="lead mb-0">한글</p>
<hr class="my-1"/>
<div class="form-row" id="typing_practice_kor">
</div>
<p class="lead mt-3 mb-0">English</p>
<hr class="my-1"/>
<div class="form-row" id="typing_practice_eng">
</div>
</form>
<h5 class="mt-4 mb-2">타자 시험</h5>
<form class="mx-4">
<p class="lead mb-0">한글</p>
<hr class="my-1"/>
<div class="form-row" id="typing_test_kor">
</div>
<p class="lead mt-3 mb-0">English</p>
<hr class="my-1"/>
<div class="form-row" id="typing_test_eng">
</div>
</form>
<h5 class="mt-4 mb-2">타자 앱</h5>
<form class="mx-4">
<div class="form-row" id="typing_app">
</div>
</form>
<div>
<h1>자리 연습</h1>
<div id="typing_practice_kor"></div>
<div id="typing_practice_eng"></div>
</div>
<div>
<h1>타자 시험</h1>
<div id="typing_test_kor"></div>
<div id="typing_test_eng"></div>
</div>
<div>
<h1>타자 앱</h1>
<div id="typing_app"></div>
</div>
</div>