자바스크립트? 글자색 표시하기
본문
http://okyee.ohseon.com/hanja/hanja08_1.html
링크이 코드는 아래와 같습니다.
훈을 입력하고 Enter 키를 클릭하면 음을 입력할 수 있고 음을 입력하고 Enter 키를 클릭하면 정답 확인을 진행합니다. 정답이면 다음 문제로 넘어가고 정답이 아니면 틀린 훈 또는 음에 빨간색 글자로 정답을 보여줍니다
정답이 아니면 틀린 훈 또는 음에 빨간색 글자로 정답을 보여줍니다
이 부분이 안됩니다.
어디를 고쳐야 하는가요?
<!DOCTYPE html>
<html>
<head lang="ko">
<meta charset="UTF-8">
<title>8급 한자</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
let arrHanja = [];
let fileUrl = 'munje08.txt'; // 문제 파일의 경로
$(document).ready(function () {
$.ajax({
url: fileUrl,
dataType: 'text',
success: function(data) {
arrHanja = data.split('\n').map(function (line) {
let parts = line.split(',');
let meanings = parts[1].split('|');
let readings = parts.length > 2 ? parts[2].split('|') : [parts[1]];
return [parts[0], meanings, readings];
});
CreateExam();
Go();
},
error: function(xhr, status, error) {
console.error('Error reading file:', error);
}
});
});
let giType = 0;
let giIndex = 0;
let garrExam = [];
let giOk = 0;
let giError = 0;
function CreateExam() {
for (let i = 0; i < arrHanja.length; ++i) {
while (1) {
let bFound = false;
let iValue = parseInt(Math.random() * 100000);
let iIndex = iValue % arrHanja.length;
for (let j = 0; j < garrExam.length; ++j) {
if (garrExam[j] == iIndex) {
bFound = true;
break;
}
}
if (bFound == false) {
garrExam.push(iIndex);
break;
}
}
}
}
function Go() {
++giType;
if (giType == 1) {
$('#hanja').html(arrHanja[garrExam[giIndex]][0]);
$('#input_1').css('color', 'black');
$('#input_2').css('color', 'black');
$('#input_1').val('');
$('#input_2').val('');
$('#input_1').focus();
} else {
let strValue1 = $('#input_1').val();
let strValue2 = $('#input_2').val();
let iCount = 0;
let meanings = arrHanja[garrExam[giIndex]][1];
let readings = arrHanja[garrExam[giIndex]][2];
let correctMeaning = false;
let correctReading = false;
// 정답 여부를 체크합니다.
for (let i = 0; i < meanings.length; ++i) {
if (meanings[i] === strValue1 || meanings[i] === strValue2) {
correctMeaning = true;
break;
}
}
if (readings.length > 1) {
for (let i = 0; i < readings.length; ++i) {
if (readings[i] === strValue2) {
correctReading = true;
break;
}
}
} else {
if (readings[0] === strValue2) {
correctReading = true;
}
}
if (iCount == 0) {
// 정답이 아닌 경우에는 틀린 훈 또는 음을 표시하고 빨간색으로 변경합니다.
let correctMeaningText = arrHanja[garrExam[giIndex]][1].join('|');
let correctReadingText = arrHanja[garrExam[giIndex]][2].join('|');
if (!correctMeaning) {
$('#input_1').val(correctMeaningText);
$('#input_1').css('color', 'red');
}
if (!correctReading) {
$('#input_2').val(correctReadingText);
$('#input_2').css('color', 'red');
}
++giError;
} else {
++giOk;
}
$('#result').html('정답수: ' + giOk + ' / 오답수: ' + giError);
giType = 0;
++giIndex;
if (giIndex >= garrExam.length) {
alert('시험이 종료되었습니다. 다시 시작하고 싶으시면 refresh 해 주세요.');
return;
}
if (!correctMeaning || !correctReading) {
Go();
}
}
}
</script>
<style>
input {
font-size: 100px;
}
#fileInput {
font-size: 20px;
}
</style>
</head>
<body>
<div style="font-size: 300px;" id="hanja">
</div>
<div style="font-size: 100px;">
훈 : <input type="text" id="input_1" size="2" onkeypress="if(event.which==13){ $('#input_2').focus(); return false; }"> /
음 : <input type="text" id="input_2" size="1" onkeypress="if(event.which==13){ Go(); return false; }">
<input type="button" value="다음" onclick="Go()">
</div>
<div style="font-size: 50px; margin-top: 30px; color: darkblue" id="result">
</div>
<div>
<input type="file" id="fileInput">
</div>
</body>
</html>
답변 2
function Go() {
if (giType == 0) {
$('#hanja').html(arrHanja[garrExam[giIndex]][0]);
$('#input_1').css('color', 'black');
$('#input_2').css('color', 'black');
$('#input_1').val('');
$('#input_2').val('');
$('#input_1').focus();
giType = 1;
} else {
let strValue1 = $('#input_1').val();
let strValue2 = $('#input_2').val();
let correctMeaning = false;
let correctReading = false;
// 정답 여부를 체크합니다.
arrHanja[garrExam[giIndex]][1].forEach(function(meaning) {
if (meaning === strValue1){
correctMeaning = true;
}
});
arrHanja[garrExam[giIndex]][2].forEach(function(reading) {
if (reading === strValue2){
correctReading = true;
}
});
if (!correctMeaning || !correctReading) {
// 정답이 아닌 경우에는 틀린 훈 또는 음을 표시하고 빨간색으로 변경합니다.
let correctMeaningText = arrHanja[garrExam[giIndex]][1].join('|');
let correctReadingText = arrHanja[garrExam[giIndex]][2].join('|');
if (!correctMeaning) {
$('#input_1').css('color', 'red');
$('#input_1').val(correctMeaningText);
}
if (!correctReading) {
$('#input_2').css('color', 'red');
$('#input_2').val(correctReadingText);
}
giError++;
} else {
// 정답 처리
giOk++;
giIndex++;
giType = 0;
}
$('#result').html('정답수: ' + giOk + ' / 오답수: ' + giError);
if (giIndex >= garrExam.length) {
alert('시험이 종료되었습니다. 다시 시작하고 싶으시면 refresh 해 주세요.');
return;
}
if (correctMeaning && correctReading) {
Go();
}
}
}
Go함수를 위 함수처럼 수정해서 테스트해보세요.
iCount 변수는 위 함수에서 아무 역할을 하지않기때문에 제거했습니다.
감사합니다. 잘 되네요^^
다음을 참고하셔서 원하시는 형식으로 구현해 보세요
function Go() {
++giType;
if (giType == 1) {
$('#hanja').html(arrHanja[garrExam[giIndex]][0]);
$('#input_1').css('color', 'black');
$('#input_2').css('color', 'black');
$('#input_1').val('');
$('#input_2').val('');
$('#input_1').focus();
} else {
let strValue1 = $('#input_1').val();
let strValue2 = $('#input_2').val();
let meanings = arrHanja[garrExam[giIndex]][1];
let readings = arrHanja[garrExam[giIndex]][2];
let correctMeaning = false;
let correctReading = false;
// 정답 여부를 체크합니다.
for (let i = 0; i < meanings.length; ++i) {
if (meanings[i] === strValue1) {
correctMeaning = true;
break;
}
}
for (let i = 0; i < readings.length; ++i) {
if (readings[i] === strValue2) {
correctReading = true;
break;
}
}
if (!correctMeaning || !correctReading) {
// 정답이 아닌 경우에는 틀린 훈 또는 음을 표시하고 빨간색으로 변경합니다.
if (!correctMeaning) {
$('#input_1').val(meanings.join('|'));
$('#input_1').css('color', 'red');
}
if (!correctReading) {
$('#input_2').val(readings.join('|'));
$('#input_2').css('color', 'red');
}
++giError;
} else {
++giOk;
}
$('#result').html('정답수: ' + giOk + ' / 오답수: ' + giError);
giType = 0;
++giIndex;
if (giIndex >= garrExam.length) {
alert('시험이 종료되었습니다. 다시 시작하고 싶으시면 refresh 해 주세요.');
return;
}
if (!correctMeaning || !correctReading) {
Go();
}
}
}
답변을 작성하시기 전에 로그인 해주세요.
