Emm
Reputation: 2507
Cannot interact with button using javascript
I am trying to adapt some js to build an interactive quiz. The quiz should allow users to select an answer, if they click submit they move on to the next question. If they get the answer wrong a feedback button shows up, if they click the button they get some text output.
There is also a hint button at the bottom of the page if the users click the button a 'hint' pops up.
It would be difficult to explain what the issue I am having is without showing some visuals
This is my desired output:
and the bottom:
This is what I am currently getting:
The hint bubble is only supposed to show up after I manually click it, however currently the bubble appears without any user interaction.
This is what my javascript looks like:
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');
}
}
}
and my 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>
This is probably a rookie question, but I have extremely limited experience with javascript.
Upvotes: 0
Views: 71
Answers (2)
ariel
Reputation: 16150
When your css have commands like &.hide it have to be processed before being served to the browser. To do that in codepen change settings accordingly:
On your site, you have to compile using SCSS before uploading to the server, or use a pipeline to do it automatically, if your host allow it.
Here's the pen with the preprocessor applied. See that I haven't touched your code https://codepen.io/bortao/pen/eYNqdWr
Upvotes: 1
Elman Huseynov
Reputation: 1147
Check out my snippet please, it should work:
$(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> Also edited your codepen example here is an example
Upvotes: 0
Related Questions
- the button element not responding
- HTML Button not interacting with Javascript
- Button not responding to click with JQuery
- JavaScript button event handler not working
- button click is not working inside jquery
- button click jquery not working
- JavaScript button doesn't work
- the button click is not responding
- unable to access click event of a button in javascript
- jQuery button not executing?