자바스크립트? 글자색 표시하기

자바스크립트? 글자색 표시하기

QA

자바스크립트? 글자색 표시하기

본문

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();
        }
    }
}
답변을 작성하시기 전에 로그인 해주세요.
전체 10
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT