javascript - 使用 API 在琐事应用程序中转换特殊字符以验证答案的问题

Question

问题是，我从 API 中引入了琐事应用程序的问题，但有些选项有特殊字符。当答案等于带有特殊字符的选项时，就会发生错误，即“'”；='。即使选择是正确的，它仍然被证明是错误的。

如果有帮助，这里是我的完整项目的回购链接： Github Repo

// ****************
// Evaluate Answer
// ****************
const evaluateAnswer = () => {
    checkAnswer.on('click', function () {
        // Correct Answer
        if (userChoice === undefined) {
            alert('You need to select an answer');
        } else if (userChoice == correctAnswer) {
            console.log('Correct Answer ');
            userLabel.addClass('correct');
            userLabel.append(
                '<svg class="bi check" width="32" height="32" fill="currentColor"><use xlink:href="img/bootstrap-icons.svg#check"/></svg>'
            );
            $('label').css('pointer-events', 'none');
            userScore++;
            showNextBtn();
            userChoice = undefined;
            // Wrong Answer
        } else if (userChoice !== correctAnswer) {
            console.log('Wrong Answer ');
            userLabel.addClass('wrong');
            userLabel.append(
                '<svg class="bi x" width="32" height="32" fill="currentColor"><use xlink:href="img/bootstrap-icons.svg#x"/></svg>'
            );
            $('label').css('pointer-events', 'none');
            showNextBtn();
            userChoice = undefined;
            // When user selects wrong answer, correct answer is also shown
            for (let i = 0; i < shuffledOptions.length; i++) {
                if ($('label').eq(i).children().text() == correctAnswer) {
                    $('label').eq(i).addClass('correct');
                    $('label')
                        .eq(i)
                        .append(
                            '<svg class="bi check" width="32" height="32" fill="currentColor"><use xlink:href="img/bootstrap-icons.svg#check"/></svg>'
                        );
                }
            }
        }

        showFinishBtn();
    });
};

示例数据（带有特殊字符问题的示例）

{
    "response_code": 0,
    "results": [
        {
            "category": "General Knowledge",
            "type": "multiple",
            "difficulty": "medium",
            "question": "What does the "G" mean in "G-Man"?",
            "correct_answer": "Government",
            "incorrect_answers": [
                "Going",
                "Ghost",
                "Geronimo"
            ]
        },
        {
            "category": "General Knowledge",
            "type": "multiple",
            "difficulty": "medium",
            "question": "What is the name of the very first video uploaded to YouTube?",
            "correct_answer": "Me at the zoo",
            "incorrect_answers": [
                "tribute",
                "carrie rides a truck",
                "Her new puppy from great grandpa vern."
            ]
        },
        {
            "category": "General Knowledge",
            "type": "multiple",
            "difficulty": "medium",
            "question": "Which of these companies does NOT manufacture automobiles?",
            "correct_answer": "Ducati",
            "incorrect_answers": [
                "Nissan",
                "GMC",
                "Fiat"
            ]
        },
        {
            "category": "General Knowledge",
            "type": "multiple",
            "difficulty": "medium",
            "question": "What is the German word for "spoon"?",
            "correct_answer": "Löffel",
            "incorrect_answers": [
                "Gabel",
                "Messer",
                "Essstäbchen"
            ]
        },
        {
            "category": "General Knowledge",
            "type": "multiple",
            "difficulty": "medium",
            "question": "What is the Swedish word for "window"?",
            "correct_answer": "Fönster",
            "incorrect_answers": [
                "Hål",
                "Skärm",
                "Ruta"
            ]
        }
    ]
}

如果您查看随附的屏幕截图，标签文本和正确答案是相同的，除了特殊字符，这是创建错误：https ://i.stack.imgur.com/gFbJW.png

标签： javascriptjquerycharacter-encoding

Answer 1

我找到了解决方案！在运行评估答案功能时，只需使用编码/解码库将正确的答案值放入其中。

如果有人遇到类似的情况，这里是该库的链接：JS Encoding/Decoding Library