无法使用javascript与按钮交互

我正在尝试调整一些js来构建一个交互式测验。测验应允许用户选择答案，如果用户单击“提交”，他们将进入下一个问题。如果他们答错了，就会出现一个反馈按钮，如果他们点击按钮，就会得到一些文本输出

页面底部还有一个提示按钮，如果用户单击该按钮，将弹出一个“提示”

如果不展示一些视觉效果，很难解释我的问题是什么

这是我想要的输出：

下面是：

这是我目前得到的：

提示气泡应该只在我手动单击它后显示，但是当前气泡在没有任何用户交互的情况下显示

这就是我的javascript的样子：

var star = '<svg id="star" x="0px" y="0px" viewBox="0 0 512.001 512.001"><path fill="#ffdc64" d="M499.92 188.26l-165.84-15.38L268.2 19.9c-4.6-10.71-19.8-10.71-24.4 0l-65.88 152.97-165.84 15.38c-11.61 1.08-16.3 15.52-7.54 23.22L129.66 321.4 93.04 483.87c-2.56 11.38 9.73 20.3 19.75 14.35L256 413.2l143.2 85.03c10.03 5.96 22.32-2.97 19.76-14.35L382.34 321.4l125.12-109.92c8.77-7.7 4.07-22.14-7.54-23.22z"/><path fill="#ffc850" d="M268.2 19.91c-4.6-10.71-19.8-10.71-24.4 0l-65.88 152.97-165.84 15.38c-11.61 1.08-16.3 15.52-7.54 23.22L129.66 321.4 93.04 483.87c-2.56 11.38 9.73 20.3 19.75 14.35l31.97-18.98c4.42-182.1 89.03-310.33 156.02-383.7L268.2 19.92z"/></svg>';

//Initialisation of variables
var currentQuestion = -1;
var tokens = 200;

var questions =[
    {
        "id":"q0",
        "topic":"Sciences",
        "weight":2,
        "questionTxt": "Who created the weightlessness theory (Gravity)?",
        "hint": "I was an English mathematician, physicist, astronomer, theologian.",
        "options":[
            {
                "optionTxt": "Galileo",
                "answer": false
            },
            {
                "optionTxt": "Newton",
                "answer": true
            },
            {
                "optionTxt": "Maxwell",
                "answer": false
            },
            {
                "optionTxt": "Euler",
                "answer": false
            }
        ],
        "feedback":"I was an English mathematician, physicist, astronomer, theologian. I was Isaac Newton. Legends said that I discovered it thanks to an apple falling on the floor."
    },
    {
        "id":"q1",
        "topic":"Geography",
        "weight":1,
        "questionTxt": "What is the capital city of Chile?",
        "hint": "It is begining with an 'S'.",
        "options":[
            {
                "optionTxt": "Santiago",
                "answer": true
            },
            {
                "optionTxt": "San José",
                "answer": false
            },
            {
                "optionTxt": "Buenos Aires",
                "answer": false
            },
            {
                "optionTxt": "San Diego",
                "answer": false
            }
        ],
        "feedback":"The capital city of Chile is Santiago."
    },
    {
        "id":"q2",
        "topic":"History",
        "weight":3,
        "questionTxt": "Who was able to write in reverse?",
        "hint": "I was very appreciated by Francois 1er.",
        "options":[
            {
                "optionTxt": "Archimedes",
                "answer": false
            },
            {
                "optionTxt": "Leonardo di Vinci",
                "answer": true
            },
            {
                "optionTxt": "Darwin",
                "answer": false
            },
            {
                "optionTxt": "Einstein",
                "answer": false
            }
        ],
        "feedback":"I was very appreciated by Francois 1er in France. I am Leonardo di Vinci. I did this system of writting in order to protect my ideas! We are able to read my notes only with a mirror."
    }
];

var skills = [];

for(var i = 0; i<questions.length; i++){
    var topic = questions[i].topic;
    if(skills.length===0){
        skills.push(questions[i].topic);
    }else{
        if(skills.findIndex(topics => topics === topic)<0){
            skills.push(questions[i].topic)
        }
    }
}
for(var i = 0; i<skills.length; i++){
    $('#skills').append('<div class="skill '+skills[i].toLowerCase()+'">'+skills[i]+'</div>')
}

$('#money').text(tokens);

if(currentQuestion==-1){
    questionInit();
}
//--------------------------------------------------------------------------------------
    //Logic for the options
$('.option').click(function(){
    //only one option can be checked
    $('.option').removeClass('checked');
    $(this).toggleClass('checked');
    var questionSelected = $('#question-options .checked').length;
    if(questionSelected===1){
        $('#question .submit').css('display','flex');
    }
});
//end logic for options
    //--------------------------------------------------------------------------------------
    //logic for end of test + animations
$('#question .submit').click(function(){
    $('.hint, #hint').hide();
    $('#question .submit').css('display','none');
     if(currentQuestion === questions.length-1){
            $('.nextQ').hide();
        }else{
            $('#question .nextQ').css('display','flex');
        }

    $('#question .feedback').css('display','flex');
    $('.option').addClass('disabled');
    $('.option').find('.textOpt').toggleClass('hide');

    //add for each options if this is or not the right answer - For only 4 options
//  for(var i=0; i<4; i++){
//      console.log($('#opt'+i).data("result"))

//  }

    if($('.checked').data("r")== true){
        var currentTopic = questions[currentQuestion].topic.toLowerCase();
        $('.'+currentTopic).append(star);
    }

});
//end of logic for end of test + animations

//logic for the feedback
$('.feedback').click(function(){
    $(this).addClass('disabled');
    var feedback = $('#feedback');
    var feedbackText = $('#feedback p');
    var feedbackTitle = $('#feedback h1');

$('#feedback').append('<h2>Feedback</h2><p>'+questions[currentQuestion].feedback+'</p>');
        TweenLite.to(feedback, 0.5, {opacity:"1"});
});

//Logic for the hint button
$('.hint').click(function(){
    // $(this).addClass('disabled');
    var hint = $('#hint');

    if(tokens!==0){
        if(hint.hasClass('hide')){
            tokens=tokens-100;
            $('#money').text(tokens);
        }
        hint.toggleClass('hide');
    }else if(tokens===0 && hint.hasClass('hide')==false){
        hint.toggleClass('hide');
    }

});

//Logic for the next button
$('.nextQ').click(function(){
        $('.feedback, .hint').removeClass('disabled');
        $('.hint, #hint').hide();
        $('.option').find('svg').remove();
        questionInit();
});

function questionInit(){
     //reinitialise for each questions the variables and the style + some info in the console
    $('.option').removeClass('checked');
    $('#question .btn').css('display','none');
    $('#feedback').empty();
    $('#hint').empty();
    $('#hint').addClass('hide');
    $('.feedback, .hint, .option').removeClass('disabled');
    $('.hint, #hint').show();

    max=0;
  currentQuestion++;

  console.warn("--------------------------------------------------------")
  console.warn("Question "+ (currentQuestion + 1));
  console.warn(questions[currentQuestion].questionTxt);
  console.warn("-  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  - ")
    //--------------------------------------------------------------------------------------
    //append the question from the array question
    $('#question-text h1').html("Question "+ (currentQuestion + 1) + " - "+questions[currentQuestion].topic);
    $('#question-text p').html(questions[currentQuestion].questionTxt);
    $('#hint').append('<h2>Hint</h2><p>'+questions[currentQuestion].hint+'</p>');
    var topic = questions[currentQuestion].topic;
    var topicItem = '.skill.'+topic.toLowerCase();

    for(var i=0; i<4; i++){
        var opt = '#opt'+i;
        var label = i+1;
        var text = questions[currentQuestion].options[i].optionTxt;
        var data = questions[currentQuestion].options[i].answer;

        $(opt).html('<div class="label" data-label="'+label+'"></div>'+'<div class="textOpt">'+text+'</div>');

        $(opt).data('r', data);
        if($(opt).data("r") === true){
            $(opt).find('.textOpt').addClass('right hide');
        }else{
            $(opt).find('.textOpt').addClass('wrong hide');
        }
    }

}

还有我的html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'second/css/app/quiz_control.css' %}">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="{% static 'second/js/app/quiz_control.js' %}" defer></script>
</head>
</head>
<div id='strand'>
    <div id='profile'>
        <div id='picture'></div>
        <div id='tokens'>Your hints: <span id='money'></span>/200</div>
        <p><i>Each hint is 100</i></p>
        <p>You are a star in:</p>
        <div id='skills'></div>
    </div>
    <div id='quiz'>
        <div id='question'>
        <div id='question-text'>
            <h1></h1>
            <p></p>
        </div>
        <div id='question-options'>
            <div class='option' id='opt0' data-r=''></div>
            <div class='option' id='opt1' data-r=''></div>
            <div class='option' id='opt2' data-r=''></div>
            <div class='option' id='opt3' data-r''></div>
        </div>
        <div class='btn-wrapper'>
            <div class='submit btn'>Submit</div>
            <div class='hint btn'></div>
            <div class='feedback btn'>Feedback</div>
            <div class='nextQ btn'>Next</div>
        </div>
        <div class='feedbackTxt'>
            <div id='hint' class='hide'></div>
            <div id='feedback'></div>
        </div>
    </div>
    </div>
</div>
</html>

---

这可能是一个新手问题，但我在javascript方面的经验非常有限。

当您的css有诸如&.hide之类的命令时，必须在将其提供给浏览器之前对其进行处理。要在codepen中执行此操作，请相应地更改设置：

在您的站点上，您必须在上传到服务器之前使用SCS进行编译，或者在主机允许的情况下使用管道自动进行编译

---

这是应用了预处理器的笔。请确保我没有接触您的代码，请查看我的代码片段，它应该可以工作：

$function{ var星=； //变量初始化 var currentQuestion=-1； var代币=200； 变量问题=[ { id:q0， 主题：科学， 体重：2， 问题TXT：谁创造了失重理论重力？， 提示：我是英国数学家、物理学家、天文学家、神学家。， 选项：[ { OptionText:Galileo， 回答：错 }, { OptionText:Newton， 答:对 }, { OptionText:Maxwell， 回答：错 }, { OptionText:Euler， 回答：错 } ], 反馈：我是英国数学家、物理学家、天文学家、神学家。我是艾萨克·牛顿。传说我发现它是因为一个苹果掉在地上。 }, { id:q1， 主题：地理， 体重：1， 问题TXT：智利的首都是什么？， 提示：它以“S”开头。， 选项：[ { 选项文字：圣地亚哥， 答:对 }, { OptionText:San Jose， 回答：错 }, { 选项文字：布宜诺斯艾利斯， 回答：错 }, { 选项文字：圣地亚哥， 回答：错 } ], 反馈：智利的首都是圣地亚哥。 }, { id:q2， 题目:历史,， 体重：3， 问题TXT：谁能反向书写？， 提示：弗朗索瓦·伊尔非常欣赏我。， 选项：[ { OptionText:阿基米德， 回答：错 }, { 选项文字：达芬奇， 答:对 }, { 选择文字：达尔文， 回答：错 }, { OptionText:爱因斯坦， 回答：错 } ], 反馈：法国的弗朗索瓦·伊尔非常欣赏我。我是莱昂纳多·迪芬奇。我采用这种写作方式是为了保护我的想法！我们只能用镜子来阅读我的笔记。 } ]; 风险值技能=[]；

---

forvar i=0；i topics===topic你能把你的代码上传到codepen吗？我会帮你的，但我需要看完整的图片，包括css、js和html@ElmanHuseynov谢谢。->问题陈述到底是什么？你在这里所做的只是描述你的项目。@tobbyioa我发布了我当前输出和所需输出的示例。不同的因为我不能与提示按钮交互，也看不到应该通过我的JS在我的页面上呈现的元素，特别是选择答案的选项卡和反馈按钮。希望这能更清楚地解释问题？@Emm请查看我的回答谢谢，似乎收到了错误消息：错误：{message:uncaughtreferenceerror:$未定义，文件名：，行号：260，colno:17}@Emm我没有在这里加载jquery，这就是它显示此错误的原因。请查看指向codepen的应答链接末尾的我的链接