This is a small quiz app which I am making to learn JS. It works fine and gives the proper result, but when clicked replay, it displays the quizBox but the 'Next' button does not work. There is no console error and I am unable to understand where to look for the error in the code.
This is the jsFiddle link of the working app
https://jsfiddle.net/lifet/t20h6gw8/10/
js has both the script and the questions file
This is the Html for the quiz and result box
<!--Start Quiz Box-->
<div class="row quiz_box">
<div class="col-md-6 col-sm-12">
<div class="card">
//other part of code
<!--Quix Box Footer-->
<footer>
<button class="next_btn">Next</button>
</footer>
</div>
</div>
</div>
</div>
<!--End Quiz Box-->
<!--Start Result Box-->
<div class="row result_box">
<div class="card col-md-6 col-sm-12">
//other part of code
<div class="buttons">
<button class="restart">Replay Quiz</button>
</div>
</div>
</div>
<!--End Result Box-->
</div>
This is the css for hiding and showing the result and quiz box respectively
.removeResultBox.result_box{
display: none;
}
.removeResultBox.quiz_box{
display: flex;
}
This is the js for replay function and next on click.
//---------------- restart Quiz-------------------//
const replayQuiz = resultBox.querySelector(".restart");
function showQuizBox(){}
replayQuiz.onclick=() =>{
quizBox.classList.add("removeResultBox");// this displays the quiz box
resultBox.classList.add("removeResultBox");// this hides the result box
queCounter = 0;
queNumber = 1;
startTime = 15;
widthValue = 0;
userScore =0;
showQuestions(queCounter);
questionCounter(queNumber);
clearInterval(timeCounter);
clearInterval(counterLine);
startTimer(startTime);
startTimeLine(widthValue);
nextBtn.style.display="none";
}
This is the next button onclick event
//go on to the next question
nextBtn.onclick=()=>{
console.log("next");
if (queCounter < questions.length - 1) {
queCounter++;
queNumber++;
showQuestions(queCounter);
questionCounter(queNumber);
clearInterval(timeCounter);
startTimer(startTime);
clearInterval(counterLine);
startTimeLine(widthValue)
nextBtn.style.display="none";
}
else {
showResultBox();
}
}
I am stuck badly and would really appreciate any help. Thank you!!
you have to change the line
const replayQuiz = document.querySelector(".restart");
check the website
In replayQuiz.onclick instead of adding removeResultBox try and remove showResultBox:
replayQuiz.onclick = () => {
resultBox.classList.remove('showResultBox')
quizBox.classList.remove('showResultBox')
...
}
Related
For a project i'm working on the users that are logged in with enough priveledge to post a new news item are able to see a button to add news items. I would like to show these news item with 'switching styles' (for the lack of a better word). I'm pulling the data from a database where the user submits it through a form on a seperate page. Then i'm requesting all of the news items back on the home page where it lists them as a 'news feed'. The feed fetches like a charm and can be seen here : http://prntscr.com/et39yp
I would like to make the second, fourth, sixth, etc have the first-image or first-video list on the left, like so : http://prntscr.com/et3akw
Is there an easy way of doing this?
#{
var db = Database.Open("Default");
var fetchRows = "SELECT * FROM Articles";
db.Execute(fetchRows);
var articles = db.Query("SELECT articleTitle, articleText, articleVideoUrl, articleImage FROM Articles ORDER BY id DESC");
var articleTitle = db.Query("SELECT articleTitle FROM Articles");
string lorem = "";
}
<div class="Articles">
<h2>Nieuws Feed</h2>
#foreach (var title in articles)
{
<div class="article">
#{
string text = title.articleText;
string firstLetters = new string(text.Take(50).ToArray());
<div class="col s6">
<h3>#title.articleTitle</h3>
<p>#firstLetters</p>
Lees meer...
</div>
<div class="col s6">
#{
if (title.articleVideoUrl != lorem)
{
//Iframe for youtube feed here
}
else if (title.articleVideoUrl == lorem && title.articleImage != "")
{
<div class="result">
<img src="#title.articleImage" alt="image"/>
</div>
}
}
</div>
}
</div>
}
</div>
Now the switching news article thing is something i would be able to work out, the thing i'm struggling with would be the following. The user is able to edit / remove news items. So i cant keep track of an index value or anything similar since it would be invalid should the user remove an item from the middle of the feed. My first guess would be to use the .toggleclass of javascript and that would probably work with originially loading the items but if the user would remove an item it wouldn't show them the right way after. Any help would be welcome.
It shouldn't matter that you are adding the items individually, the nth-child(odd|even) should still work.
You can see it working here: http://jsfiddle.net/Chairman_Mau/uap93rtL/4/ - notice when you click the move up/move down buttons the style changes automatically.
HTML
<div class="articles">
<h1>header</h1>
<div class="article">
paragraph
</div>
<div class="article">
paragraph
</div>
<div class="article">
paragraph
</div>
<div class="article">
paragraph
</div>
<div class="article movethis">
paragraph - move this one
</div>
<div class="article">
paragraph
</div>
<input type="button" value="add article" class="addarticle"/>
<input type="button" value="move up" class="moveup"/>
<input type="button" value="move down" class="movedown"/>
</div>
Javascript
$(".addarticle").click(function () {
$(".articles").append('<div class="article">added</div>');
});
$(".moveup").click(function(){
var prev = $(".movethis").prev('.article');
$(".movethis").detach().insertBefore(prev);
});
$(".movedown").click(function(){
var next = $(".movethis").next('.article');
$(".movethis").detach().insertAfter(next);
});
CSS
.articles .article:nth-of-type(even)
{
color: Green;
}
.articles .article:nth-of-type(odd)
{
color: Red;
}
Unsatisfied with existing sliders (mostly because they're bloated code and require external script calls), I decided to try to write a simple, site-specific inline slider script. However, I get a stack overflow error.
<div id="featured">
<div class="tween">
<div class="cropimg">
</div>
<div class="container">
text
</div>
</div>
<div class="tween">
<div class="cropimg">
</div>
<div class="container">
text
</div>
</div>
<div class="tween">
<div class="cropimg">
</div>
<div class="container">
text
</div>
</div>
</div>
<script>
var _rys = jQuery.noConflict();
_rys("document").ready(function(){
var timeOut = 5000;
setTimeout(nextSlide(1),timeOut);
});
function nextSlide(next) {
var i = 1;
var numberOfChildren = _rys("#featured").children().length;
_rys(".tween:nth-child("+next+")").fadeTo(500,1);
while (i<=numberOfChildren) {
// loop through the children and make those that are opaque invisible
if (i != next) {
if (_rys(".tween:nth-child("+i+")").css('opacity') != 0) {
_rys(".tween:nth-child("+i+")").css('opacity',0);
}
}
i++;
}
if (next>=numberOfChildren) {
setTimeout(nextSlide(1), 5000);
} else {
setTimeout(nextSlide(next+1), 5000);
}
}
</script>
I'm having some trouble making a working show div and I just can't get it.
So I have the following:
function GetCaptcha() {
$(".panel-captcha").fadeIn(500);
}
Get
<div class="panel-captcha">
TEXT
</div>
The div has the display:none tag.
It works very well, but I have one problem. I need to have many divs inside the same page ( not the same, it may change from database ). If I have 3 or 4 panels, when I click the button it will show them all instead only the div where I have the link to show.
Anyone can help me? Thanks.
Complete HTML file...
<div class="col-md-4">
<div class="panel panel-blue" data-widget='{"draggable": "false"}'>
<div class="panel-heading">
<h2>TEXT</h2>
<div class="panel-ctrls">
<i class="ti ti-eye"></i>
<!-- BUTTON TO SHOW CAPTCHA -->
</div>
</div>
<div class="panel-body">
<small>Other Text...</small>
</div>
<div class="panel-footer">
<div class="tabular">
<div class="tabular-row tabular-row">
<div class="tabular-cell">
<span class="status-total"><strong>More Text...</strong></span>
</div>
<div class="tabular-cell">
<span class="status-pending">Other Text...</span>
</div>
</div>
</div>
</div>
<div class="panel-captcha">
<!-- HIDDEN DIV -->
<div class="tabular-cell">
HIDDEN TEXT
</div>
</div>
<!-- END HIDDEN DIV -->
</div>
</div>
You can pass the reference of element to click handler, then use .next()
Script
function GetCaptcha(elem) {
$(elem).next(".panel-captcha").fadeIn(500);
}
.panel-captcha {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Get
<div class="panel-captcha">
TEXT
</div>
As you are using jQuery bind event using it.
HTML
Get
<div class="panel-captcha">
TEXT
</div>
Script
$(function() {
$('.captcha').on('click', function () {
$(this).next(".panel-captcha").fadeIn(500);
});
});
EDIT
As per updated HTML use
function GetCaptcha(elem) {
$(elem).closest('.panel').find(".panel-captcha").fadeIn(500);
}
I've built a UI card with a share button. Upon tapping the share button, a share sheet shows up above the card itself.
This card will live in a grid of other such cards so the "share" button should trigger only the share sheet for the current card
I have a Save button which should also fire another sheet, but it doesnt seem to be working.
I've built this demo (http://jsfiddle.net/8hed8yrd/11/) with the share sheet working. I cant seem to get a save sheet to work. Any pointers?
Note: Demo doesn't have save sheet to avoid confusion in code.
<div class="grid">
<div id="card">
<div class="hero_text hero_small">TITLE</div>
<div class="subtext">SUBTITLES</div>
<div class="toggleLink explore_text"><span class="icons">SHARE</span>
</div>
<div class="toggleLink explore_text"><span class="icons">SAVE</span>
</div>
<div class="share_sheet">
<div class="share_this">SHARE THIS IMAGE</div>
<div class="share_close">CLOSE</div>
</div>
</div>
<div>
jQuery(document).on("click", ".toggleLink", function () {
jQuery(this).next('.share_sheet').fadeIn('fast');
return false;
});
jQuery(document).on("click", ".share_sheet", function () {
jQuery(this).fadeOut('fast');
});
The problem is that you use jQuery(this).next('.share_sheet'). The second toggleLink SAVE have a share_sheet div right after itself, but the SHARE button doesn't. Thats why jquery can't found the div. Use siblings instead of next if you want to found the same element, or do it like i do in this fiddle: http://jsfiddle.net/PSYKLON/8hed8yrd/12
<div class="toggleLink explore_text"><span class="icons">SHARE</span></div>
<div class="share_sheet">
<div class = "share_this">SHARE THIS IMAGE</div>
<div class = "share_close">CLOSE</div>
</div>
<div class="toggleLink explore_text"><span class="icons">SAVE</span></div>
<div class="share_sheet">
<div class = "share_this">SAVE THIS IMAGE</div>
<div class = "share_close">CLOSE</div>
</div>
I am trying to use a link to open a specific tab that is created using divs and the tabs open and close using javascript.
Here are the tabs and the javascript is within the script tags at the bottom:
<div class="span12 module_cont module_tabs">
<div class="shortcode_tabs">
<div class="all_heads_cont">
<div class="shortcode_tab_item_title it1 head1 active" data-open="body1">%%LNG_ProductDescription%%</div>
<div class="shortcode_tab_item_title it2 head2" id="reviews" data-open="body2">%%LNG_JS_Reviews%%</div>
<div class="shortcode_tab_item_title it3 head3" data-open="body3">%%LNG_JS_ProductVideos%%</div>
<div class="shortcode_tab_item_title it4 head4" data-open="body4">%%LNG_JS_SimilarProducts%%</div>
</div>
<div class="all_body_cont">
<div class="shortcode_tab_item_body body1 it1">
<div class="ip">
%%Panel.ProductDescription%%
</div>
</div>
<div class="shortcode_tab_item_body body2 it2">
<div class="ip">
%%Panel.ProductReviews%%
</div>
</div>
<div class="shortcode_tab_item_body body3 it3">
<div class="ip">
%%Panel.ProductVideos%%
</div>
</div>
<div class="shortcode_tab_item_body body4 it4">
<div class="ip">
%%Panel.SimilarProductsByTag%%
%%Panel.ProductByCategory%%
%%Panel.ProductVendorsOtherProducts%%
%%Panel.SimilarProductsByCustomerViews%%
</div>
</div>
</div>
</div><!-- .shortcode_tabs -->
<script type="text/javascript">
jQuery('.shortcode_tabs').each(function(index) {
/* GET ALL HEADERS */
var i = 1;
jQuery('.shortcode_tab_item_title').each(function(index) {
jQuery(this).addClass('it'+i); jQuery(this).attr('whatopen', 'body'+i);
jQuery(this).addClass('head'+i);
jQuery(this).parents('.shortcode_tabs').find('.all_heads_cont').append(this);
i++;
});
/* GET ALL BODY */
var i = 1;
jQuery('.shortcode_tab_item_body').each(function(index) {
jQuery(this).addClass('body'+i);
jQuery(this).addClass('it'+i);
jQuery(this).parents('.shortcode_tabs').find('.all_body_cont').append(this);
i++;
});
});
jQuery('.shortcode_tabs .all_body_cont div:first-child').addClass('active');
jQuery('.shortcode_tabs .all_heads_cont div:first-child').addClass('active');
jQuery('.shortcode_tab_item_title').live('click', function(){
jQuery(this).parents('.shortcode_tabs').find('.shortcode_tab_item_body').removeClass('active');
jQuery(this).parents('.shortcode_tabs').find('.shortcode_tab_item_title').removeClass('active');
var whatopen = jQuery(this).attr('data-open');
jQuery(this).parents('.shortcode_tabs').find('.'+whatopen).addClass('active');
jQuery(this).addClass('active');
});
jQuery('reviews').live('click', function(){
jQuery(this).parents('.shortcode_tabs').find('.shortcode_tab_item_body').removeClass('active');
jQuery(this).parents('.shortcode_tabs').find('.shortcode_tab_item_title').removeClass('active');
var whatopen = jQuery(this).attr('data-open');
jQuery(this).parents('.shortcode_tabs').find('.'+whatopen).addClass('active');
jQuery(this).addClass('active');
});
</script>
</div><!-- .module_cont -->
All I want to do is have a link on the same page that activates the reviews tab (id="reviews") and is also known as the body2.
all I have so far for my link is:
Reviews
Help. My brain hurts...
You just need to set the link up so that it doesn't take the user to a new page, and then setup a click event to open the tab up. Example:
HTML:
<a href='javascript:void(0);' id='reviewLink'>Review Tab</a>
JavaScript:
$('#reviewLink').click(function() {
$('.shortcode_tab_item_body').css({display:'none'});
$('.body2').css({display:'none'});
});
Or a jsfiddle here: http://jsfiddle.net/tKLhn/