Невозможно взаимодействовать с кнопкой, используя javascript

Question

Я пытаюсь адаптировать некоторые 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>

Это, вероятно, вопрос ладьи ie, но у меня есть крайне ограниченный опыт с javascript.

Answer 1

Если в вашем css есть такие команды, как &.hide, они должны быть обработаны перед отправкой в ​​браузер. Для этого в codepen измените настройки соответствующим образом:

На вашем сайте вы должны скомпилировать с помощью S CSS перед загрузкой на сервер, или используйте конвейер, чтобы сделать это автоматически, если ваш хост разрешает это.

Вот ручка с примененным препроцессором. Смотри, что я не трогал твой код https://codepen.io/bortao/pen/eYNqdWr

Answer 2

Проверьте мой фрагмент, пожалуйста, он должен работать:

        $(function(){

        	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"}); 
});


$('.hint').click(function(){
  $("#hint").toggleClass('hintTrigger');
})

//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.btn').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');
    }
  }
  
}


        });

#strand{
  display:flex;
  flex-direction:row;
  width:80%;
  height: 600px;
  background:#e6dedd;
  -webkit-box-shadow: 3px 3px 15px 0px rgba(34,40,49,1);
  -moz-box-shadow: 3px 3px 15px 0px rgba(34,40,49,1);
  box-shadow: 3px 3px 15px 0px rgba(34,40,49,0.7);
  margin:8% auto 0 auto;
}
#profile{
  width: 40%;
  height: 100%;
  background:#9fa6a0;
  display:flex;
  flex-direction:column;
  padding:0 20px;
  color:white;
  justify-content: flex-start;
  align-items: center;
  #picture{
    width: 70%;
    margin-top:20px;
    height: 165px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='girl' x='0px' y='0px' viewBox='0 0 464 464'%3E%3Cpath fill='%23e69f5f' d='M400 400s-58.9 24-168 24-168-24-168-24l21.16-264.46C91.28 58.99 155.18 0 231.96 0h.07c76.79 0 140.69 59 146.81 135.53L400 400z'/%3E%3Cpath fill='%23e09156' d='M274.81 6.38A147.06 147.06 0 0 0 232.03 0h-.06C155.18 0 91.27 59 85.16 135.53L64 400s28.88 11.71 83.47 18.77L274.8 6.37z'/%3E%3Cpath fill='%23ffd7a3' d='M383.39 414l-1.53-5.24a5.27 5.27 0 0 0-5.73-3.75l-5.33-40a40 40 0 0 0-21.76-30.49l-17.23-8.61a5.05 5.05 0 0 0-6.77 2.29l-34.1-12.55A16 16 0 0 1 280 300.47v-25.8l34.46-14.36A48 48 0 0 0 344 216v-8a24 24 0 1 0 0-48v-16c0-22.1-17.9-56-40-56H160c-22.1 0-40 33.9-40 56v16a24 24 0 1 0 0 48v8a48 48 0 0 0 29.54 44.3L184 274.68v25.8a16 16 0 0 1-10.94 15.18l-34.1 12.54a5.03 5.03 0 0 0-6.74-2.3l-15.72 7.86c-13.4 6.7-21.55 18.12-23.3 31.26l-5.33 40a5.28 5.28 0 0 0-5.73 3.76l-1.53 5.22a5.28 5.28 0 0 0 3.59 6.55l11.8 3.44V448a16 16 0 0 0 16 16h240a16 16 0 0 0 16-16v-24.02l11.8-3.44a5.28 5.28 0 0 0 3.59-6.55z'/%3E%3Cpath fill='%23fdc88e' d='M280 274.67h-96v25.8a16 16 0 0 1-7.75 13.7c66.92 11.56 103.75-39.5 103.75-39.5z'/%3E%3Cpath fill='%23ffe1b2' d='M344 160v-16c0-22.1-17.9-56-40-56H160c-22.1 0-40 33.9-40 56v16a24 24 0 1 0 0 48v8a48 48 0 0 0 29.54 44.3l51.69 21.55a80 80 0 0 0 61.54 0l51.7-21.54A48 48 0 0 0 344 216v-8a24 24 0 1 0 0-48z'/%3E%3Cpath fill='%23623f33' d='M288 192c-4.4 0-8-3.6-8-8v-8c0-4.4 3.6-8 8-8s8 3.6 8 8v8c0 4.4-3.6 8-8 8z'/%3E%3Cpath fill='%23e4b07b' d='M232 248.22c-14.22 0-27.53-3.5-36.5-9.6a8 8 0 1 1 9-13.23c6.29 4.28 16.57 6.83 27.5 6.83s21.21-2.56 27.5-6.83a8 8 0 1 1 9 13.22c-8.97 6.1-22.28 9.6-36.5 9.6z'/%3E%3Cpath fill='%23ffd7a3' d='M162 243.72a37.5 37.5 0 0 1-10-25.62v-34.42c43.63-3.3 102.53-32.2 137.82-59.86L280 114s-71 46-160 46a24 24 0 1 0 0 48v8a48 48 0 0 0 29.54 44.3l51.69 21.55a80.12 80.12 0 0 0 7.73 2.74c-22.85-16.7-38.06-31.31-46.97-40.87z'/%3E%3Cpath fill='%23ff6473' d='M377.2 412.94L370.8 365a40 40 0 0 0-21.76-30.49l-17.23-8.62a5.1 5.1 0 0 0-7.19 3.37C313.53 370.03 276.27 400 232 400c-44.29 0-81.56-29.99-92.64-70.76a5.07 5.07 0 0 0-7.14-3.35l-15.72 7.86c-13.4 6.7-21.55 18.12-23.3 31.26l-6.51 48.84c21.13 7.27 57.3 18.15 57.3 18.15v32h176v-32l57.2-19.06z'/%3E%3Cpath fill='%23f05467' d='M143.8 429.56a47.91 47.91 0 0 0-9.4-26.36l-37.56-50.08a38.98 38.98 0 0 0-3.64 11.9l-6.34 47.55 56.94 16.99z'/%3E%3Cpath fill='%23d4445a' d='M80.61 414a5.28 5.28 0 0 0 3.59 6.54l59.8 17.44V432c0-3.78-.6-7.48-1.46-11.11l-53.86-15.71a5.28 5.28 0 0 0-6.54 3.59l-1.53 5.22z'/%3E%3Cpath fill='%23f05467' d='M320.2 429.56a47.91 47.91 0 0 1 9.4-26.36l37.56-50.08a38.98 38.98 0 0 1 3.64 11.9l6.34 47.55-56.94 16.99z'/%3E%3Cpath fill='%23d4445a' d='M383.39 414a5.28 5.28 0 0 1-3.59 6.54L320 437.98V432c0-3.78.6-7.48 1.46-11.11l53.86-15.71c2.8-.82 5.73.79 6.54 3.59l1.53 5.22z'/%3E%3Cpath fill='%23623f33' d='M176 192c-4.4 0-8-3.6-8-8v-8c0-4.4 3.6-8 8-8s8 3.6 8 8v8c0 4.4-3.6 8-8 8z'/%3E%3Cpath fill='%23e69f5f' d='M103.73 112.98l.27 53.07c75.5 0 138.1-23.59 179.17-44.83C270.4 135.06 251.2 153.91 224 176c0 0 71.23-28.32 111.13-63.5a94.5 94.5 0 0 0-94.5-94.5h-42.4c-52.38 0-94.77 42.6-94.5 94.98z'/%3E%3Cpath fill='%23e09156' d='M269.79 22.59a94.4 94.4 0 0 0-29.16-4.6h-42.4a94.5 94.5 0 0 0-94.5 94.99l.27 53.08c22.02 0 42.93-2.02 62.53-5.39C238.81 105.33 269.67 22.9 269.8 22.6z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-origin: content-box;
    background-position:center;
  }
  #tokens{
    font-weight:bold;
    font-size:26px;
  }
  #skills{
    width: 100%;
    margin-top:20px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    text-align:left;
    .skill{
      margin: 10px 0;
      svg{
        height:20px;
      }
    }
  }
}
#quiz{
  width: 60%;
  height: 100%;
  padding:0 20px;
  position:relative;
  background: white;
  .option{
    cursor:pointer;
    height:30px;
    position:relative;
    margin-bottom:10px;
    background-image:none;
    display:flex;
    flex-direction:row;
    font-weight:bold;
    transition: 300ms all ease-in;
    &.checked, &:hover{
      color: #e61c5d;
      font-weight: bold;
      .label{
        &:after{
          background:#e61c5d;
        }
        &:before{
          color:white;
        }
      }
    }
    .textOpt{
      line-height:30px;
      
      &.right{
        &:after{
          content:''; 
          position:absolute;
          top:2px;
          right: 15%;
          width:10px;
          height:10px;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='tick'%3E%3Cpath d='M504.502 75.496c-9.997-9.998-26.205-9.998-36.204 0L161.594 382.203 43.702 264.311c-9.997-9.998-26.205-9.997-36.204 0-9.998 9.997-9.998 26.205 0 36.203l135.994 135.992c9.994 9.997 26.214 9.99 36.204 0L504.502 111.7c9.998-9.997 9.997-26.206 0-36.204z'/%3E%3C/svg%3E");
          background-size: 10px 10px;
        }
        &.hide{
          &:after{
              background-image:none;
          } 
        }
      }
      &.wrong{
        &:after{
        content:''; 
        position:absolute;
        top:2px;
        right: 15%; 
        width:10px;
        height:10px;  
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='cross'%3E%3Cpath d='M505.943 6.058c-8.077-8.077-21.172-8.077-29.249 0L6.058 476.693c-8.077 8.077-8.077 21.172 0 29.249 4.038 4.04 9.332 6.058 14.625 6.058 5.293 0 10.586-2.019 14.625-6.059L505.943 35.306c8.076-8.076 8.076-21.171 0-29.248z'/%3E%3Cpath d='M505.942 476.694L35.306 6.059c-8.076-8.077-21.172-8.077-29.248 0-8.077 8.076-8.077 21.171 0 29.248l470.636 470.636c4.038 4.039 9.332 6.058 14.625 6.058 5.293 0 10.587-2.019 14.624-6.057 8.075-8.078 8.075-21.173-.001-29.25z'/%3E%3C/svg%3E");
          background-size: 10px 10px;
        }
        &.hide{
          &:after{
              background-image:none;
          } 
        }
      }
    }
    .label{
      position:relative;
      height:30px;
      width:30px;
      margin-right:15px;
      &:before{
        content:attr(data-label);
        position:absolute;
        top: 5px;
        left: 9px;
        height: 15px;
        z-index:100;  
        font-weight:bold;
      }
      &:after{
      content:'';
      z-index:10; 
      position:absolute;
      background:#ff9280;
      top:0;
      left:0;
      width:100%;
      height:30px;
      -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
      clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
        transition: 300ms all ease-in;
    }
    }
    
  }

}
.disabled{pointer-events:none;}

.btn-wrapper{
  display:flex;
  flex-direction:row;
  width:100%;
  justify-content:center;
  align-items:space-between;
}
.btn{
  cursor:pointer;
  width:90px;
  height:20px;
  background:#e61c5d;
  color:white;
  margin: 10px 5px;
  padding:10px;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:10000;
  transition:all 500ms ease-in;
  font-weight:bold;
  &:hover{
    background:#930077;
  }
  &.feedback, &.submit{
    margin-left:0;
  }
}   
#hint{
  position: absolute;
  width: 50%;
  text-align: center;
  bottom: 100px;
  right: 58px;
  padding: 10px;
  border-radius: 20px;
  background: #e61c5d;
  color: white;
  transition:700ms ease all;
  display: none;
  &.hide{
    opacity:0;
  }
}
#hint.hintTrigger{
  display: block;
}
.hint{
  position:absolute;
  bottom:10px;
  right:10px;
  height:45px;
  width:45px;
  border-radius:20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='bulb' fill='%23ffffff' viewBox='0 0 792 792'%3E%3Cpath d='M324.08 693.8a12.38 12.38 0 0 1 0-24.75h143.86a12.38 12.38 0 0 1 0 24.75H324.08zM340.07 742.91a12.38 12.38 0 0 1 0-24.75h111.89a12.38 12.38 0 0 1 0 24.75h-111.9zM384.36 571.83a12.32 12.32 0 1 1-24.65 0c-.05-52.1-1.54-91.04-8.74-127.08-7.11-35.63-19.85-68.65-42.46-109.39a12.34 12.34 0 0 1 21.56-11.99c24 43.26 37.58 78.48 45.16 116.56 7.5 37.6 9.08 77.96 9.13 131.9zM432.31 571.83a12.32 12.32 0 1 1-24.64 0c.05-53.94 1.62-94.28 9.12-131.9 7.58-38.08 21.17-73.3 45.17-116.56a12.32 12.32 0 0 1 21.53 11.99c-22.61 40.74-35.35 73.79-42.46 109.4-7.17 36.04-8.7 74.97-8.72 127.07z'/%3E%3Cpath d='M315.52 341.11a12.35 12.35 0 0 1 7.53-23.51c8.61 2.78 16.06 6.52 22.95 9.98l.67.36c10.75 5.41 19.7 9.64 26.35 4.23l15.2-12.4a12.35 12.35 0 0 1 17.36 1.8 12.35 12.35 0 0 1-1.8 17.35l-15.22 12.4c-18.95 15.42-34.44 7.92-53.1-1.44l-.57-.26c-6.04-3.04-12.59-6.32-19.37-8.5zM408.39 60.33a12.38 12.38 0 0 1-24.75 0V12.38a12.38 12.38 0 0 1 24.75 0v47.95z'/%3E%3Cpath d='M468.97 317.6a12.33 12.33 0 0 1 15.52 8 12.33 12.33 0 0 1-7.99 15.51c-6.78 2.2-13.33 5.5-19.39 8.54l-.56.25c-18.64 9.36-34.16 16.9-53.11 1.45l-15.21-12.4a12.35 12.35 0 0 1-1.8-17.35 12.35 12.35 0 0 1 17.35-1.8l15.2 12.4c6.66 5.4 15.58 1.15 26.36-4.24l.67-.36c6.9-3.48 14.35-7.22 22.96-10z'/%3E%3Cpath d='M551.7 192.35a219.56 219.56 0 0 1 64.51 155.7 219.46 219.46 0 0 1-42.36 129.78c-22.71 31.07-41.14 51.46-55.45 67.32-25.76 28.48-37.05 40.96-37.05 82.63 0 6.83-5.54 12.37-12.38 12.37H324.12a12.4 12.4 0 0 1-12.4-12.38c0-41.25-11.53-53.85-37.1-81.88l-.03-.02-.02.02c-14.47-15.83-33.08-36.22-56.36-68.06a219.6 219.6 0 0 1-42.36-129.78c0-29.75 5.96-58.22 16.73-84.2l.24-.5a220.44 220.44 0 0 1 47.56-71 220.45 220.45 0 0 1 71.5-47.74v-.03a219.42 219.42 0 0 1 84.2-16.73c29.7 0 58.13 5.96 84.15 16.73a221.08 221.08 0 0 1 71.49 47.77zm39.73 155.7a194.92 194.92 0 0 0-57.23-138.2 195.42 195.42 0 0 0-63.42-42.45A194.81 194.81 0 0 0 396 152.63c-26.53 0-51.8 5.25-74.71 14.77v-.03l-.05.03a195.33 195.33 0 0 0-63.4 42.46 196.3 196.3 0 0 0-42.23 62.8l-.26.67a195.03 195.03 0 0 0-14.77 74.72c0 21.19 3.38 41.6 9.56 60.6a196.19 196.19 0 0 0 27.95 54.59c22.35 30.57 40.56 50.5 54.71 66.02l-.03.03c27.54 30.08 41.23 45.14 43.37 86.13H456.86c2.11-41.27 15.54-56.18 43.2-86.75 13.82-15.3 31.59-34.96 53.84-65.38a194.95 194.95 0 0 0 37.53-115.24zM356.05 792a12.38 12.38 0 0 1 0-24.75h79.92a12.38 12.38 0 0 1 0 24.75h-79.92zM547.84 104.28a12.36 12.36 0 0 1-16.84 4.54A12.36 12.36 0 0 1 526.47 92l23.97-41.53a12.34 12.34 0 0 1 21.37 12.3l-23.97 41.52zM265.53 92.01a12.32 12.32 0 0 1-21.34 12.28L220.2 62.75a12.34 12.34 0 0 1 4.54-16.8 12.36 12.36 0 0 1 16.83 4.53L265.53 92zM157.69 190.78a12.36 12.36 0 0 1 4.54 16.84 12.34 12.34 0 0 1-16.81 4.53l-41.54-23.97a12.32 12.32 0 0 1-4.56-16.81 12.34 12.34 0 0 1 16.84-4.54l41.53 23.95zM646.6 212.15a12.36 12.36 0 0 1-16.83-4.53 12.36 12.36 0 0 1 4.54-16.84l41.53-23.98a12.36 12.36 0 0 1 16.84 4.54 12.37 12.37 0 0 1-4.54 16.84l-41.53 23.97z'/%3E%3Cpath d='M267.44 396.95c2.63 6.27-.3 13.51-6.57 16.14a12.34 12.34 0 0 1-16.14-6.57 162.27 162.27 0 0 1-9.65-31.27 166.4 166.4 0 0 1-3.3-32.62 12.4 12.4 0 0 1 12.38-12.37 12.4 12.4 0 0 1 12.37 12.38c0 9.66.96 18.97 2.74 27.79a137.7 137.7 0 0 0 8.17 26.52zm0-108.66a12.34 12.34 0 0 1-16.14 6.57 12.34 12.34 0 0 1-6.57-16.14 165.16 165.16 0 0 1 15.03-27.77l.02-.02-.02-.03a165.85 165.85 0 0 1 20.1-24.41 164.62 164.62 0 0 1 24.45-20.09v-.02a163.42 163.42 0 0 1 27.81-15.03c9.93-4.2 20.4-7.48 31.25-9.64a164.9 164.9 0 0 1 32.64-3.3 12.38 12.38 0 0 1 0 24.75c-9.7 0-19.03.95-27.82 2.7-9.2 1.83-18.1 4.64-26.5 8.2a139.43 139.43 0 0 0-23.56 12.81h-.03A138.93 138.93 0 0 0 297.4 244a139.8 139.8 0 0 0-17.12 20.76l-.03-.03a139.19 139.19 0 0 0-12.8 23.57z'/%3E%3C/svg%3E");
  background-size:45px;
  background-repeat:no-repeat;
  background-origin: content-box;
  
  &:hover{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='bulb' fill='%23ffffff' viewBox='0 0 792 792'%3E%3Cpath d='M324.08 693.8a12.38 12.38 0 0 1 0-24.75h143.86a12.38 12.38 0 0 1 0 24.75H324.08zM340.07 742.91a12.38 12.38 0 0 1 0-24.75h111.89a12.38 12.38 0 0 1 0 24.75h-111.9zM384.36 571.83a12.32 12.32 0 1 1-24.65 0c-.05-52.1-1.54-91.04-8.74-127.08-7.11-35.63-19.85-68.65-42.46-109.39a12.34 12.34 0 0 1 21.56-11.99c24 43.26 37.58 78.48 45.16 116.56 7.5 37.6 9.08 77.96 9.13 131.9zM432.31 571.83a12.32 12.32 0 1 1-24.64 0c.05-53.94 1.62-94.28 9.12-131.9 7.58-38.08 21.17-73.3 45.17-116.56a12.32 12.32 0 0 1 21.53 11.99c-22.61 40.74-35.35 73.79-42.46 109.4-7.17 36.04-8.7 74.97-8.72 127.07z'/%3E%3Cpath d='M315.52 341.11a12.35 12.35 0 0 1 7.53-23.51c8.61 2.78 16.06 6.52 22.95 9.98l.67.36c10.75 5.41 19.7 9.64 26.35 4.23l15.2-12.4a12.35 12.35 0 0 1 17.36 1.8 12.35 12.35 0 0 1-1.8 17.35l-15.22 12.4c-18.95 15.42-34.44 7.92-53.1-1.44l-.57-.26c-6.04-3.04-12.59-6.32-19.37-8.5zM408.39 60.33a12.38 12.38 0 0 1-24.75 0V12.38a12.38 12.38 0 0 1 24.75 0v47.95z'/%3E%3Cpath d='M468.97 317.6a12.33 12.33 0 0 1 15.52 8 12.33 12.33 0 0 1-7.99 15.51c-6.78 2.2-13.33 5.5-19.39 8.54l-.56.25c-18.64 9.36-34.16 16.9-53.11 1.45l-15.21-12.4a12.35 12.35 0 0 1-1.8-17.35 12.35 12.35 0 0 1 17.35-1.8l15.2 12.4c6.66 5.4 15.58 1.15 26.36-4.24l.67-.36c6.9-3.48 14.35-7.22 22.96-10z'/%3E%3Cpath d='M551.7 192.35a219.56 219.56 0 0 1 64.51 155.7 219.46 219.46 0 0 1-42.36 129.78c-22.71 31.07-41.14 51.46-55.45 67.32-25.76 28.48-37.05 40.96-37.05 82.63 0 6.83-5.54 12.37-12.38 12.37H324.12a12.4 12.4 0 0 1-12.4-12.38c0-41.25-11.53-53.85-37.1-81.88l-.03-.02-.02.02c-14.47-15.83-33.08-36.22-56.36-68.06a219.6 219.6 0 0 1-42.36-129.78c0-29.75 5.96-58.22 16.73-84.2l.24-.5a220.44 220.44 0 0 1 47.56-71 220.45 220.45 0 0 1 71.5-47.74v-.03a219.42 219.42 0 0 1 84.2-16.73c29.7 0 58.13 5.96 84.15 16.73a221.08 221.08 0 0 1 71.49 47.77zm39.73 155.7a194.92 194.92 0 0 0-57.23-138.2 195.42 195.42 0 0 0-63.42-42.45A194.81 194.81 0 0 0 396 152.63c-26.53 0-51.8 5.25-74.71 14.77v-.03l-.05.03a195.33 195.33 0 0 0-63.4 42.46 196.3 196.3 0 0 0-42.23 62.8l-.26.67a195.03 195.03 0 0 0-14.77 74.72c0 21.19 3.38 41.6 9.56 60.6a196.19 196.19 0 0 0 27.95 54.59c22.35 30.57 40.56 50.5 54.71 66.02l-.03.03c27.54 30.08 41.23 45.14 43.37 86.13H456.86c2.11-41.27 15.54-56.18 43.2-86.75 13.82-15.3 31.59-34.96 53.84-65.38a194.95 194.95 0 0 0 37.53-115.24zM356.05 792a12.38 12.38 0 0 1 0-24.75h79.92a12.38 12.38 0 0 1 0 24.75h-79.92zM547.84 104.28a12.36 12.36 0 0 1-16.84 4.54A12.36 12.36 0 0 1 526.47 92l23.97-41.53a12.34 12.34 0 0 1 21.37 12.3l-23.97 41.52zM265.53 92.01a12.32 12.32 0 0 1-21.34 12.28L220.2 62.75a12.34 12.34 0 0 1 4.54-16.8 12.36 12.36 0 0 1 16.83 4.53L265.53 92zM157.69 190.78a12.36 12.36 0 0 1 4.54 16.84 12.34 12.34 0 0 1-16.81 4.53l-41.54-23.97a12.32 12.32 0 0 1-4.56-16.81 12.34 12.34 0 0 1 16.84-4.54l41.53 23.95zM646.6 212.15a12.36 12.36 0 0 1-16.83-4.53 12.36 12.36 0 0 1 4.54-16.84l41.53-23.98a12.36 12.36 0 0 1 16.84 4.54 12.37 12.37 0 0 1-4.54 16.84l-41.53 23.97z'/%3E%3Cpath d='M267.44 396.95c2.63 6.27-.3 13.51-6.57 16.14a12.34 12.34 0 0 1-16.14-6.57 162.27 162.27 0 0 1-9.65-31.27 166.4 166.4 0 0 1-3.3-32.62 12.4 12.4 0 0 1 12.38-12.37 12.4 12.4 0 0 1 12.37 12.38c0 9.66.96 18.97 2.74 27.79a137.7 137.7 0 0 0 8.17 26.52zm0-108.66a12.34 12.34 0 0 1-16.14 6.57 12.34 12.34 0 0 1-6.57-16.14 165.16 165.16 0 0 1 15.03-27.77l.02-.02-.02-.03a165.85 165.85 0 0 1 20.1-24.41 164.62 164.62 0 0 1 24.45-20.09v-.02a163.42 163.42 0 0 1 27.81-15.03c9.93-4.2 20.4-7.48 31.25-9.64a164.9 164.9 0 0 1 32.64-3.3 12.38 12.38 0 0 1 0 24.75c-9.7 0-19.03.95-27.82 2.7-9.2 1.83-18.1 4.64-26.5 8.2a139.43 139.43 0 0 0-23.56 12.81h-.03A138.93 138.93 0 0 0 297.4 244a139.8 139.8 0 0 0-17.12 20.76l-.03-.03a139.19 139.19 0 0 0-12.8 23.57z'/%3E%3C/svg%3E");
  background-size:45px;
  background-repeat:no-repeat;
  background-origin: content-box;
  }
}

//HERE YOUR HEADER CONTENT

<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> 

Также отредактировал пример кода вот пример