jQuery/JavaScript program breaks after completion number is changed - javascript

In a spelling game I have created there is a grid that is populated with words. The aim of the game is to spell the words by clicking on the letters on the side, which animate into the empty spaces in the grid. Words are highlighted if they are to be spelt, so the user can see where to go next. The aim of the game is to spell the required amount of words in the grid to complete the game. I usually set this to two, but have just changed it to 3 and the program keeps breaking after I spell the second word.
if (score.right == 3) {
................
................
}
Usually when you spell a word correctly I use a "click.trigger" function to move to the next highlighted word in the grid. At the moment after 2 correct ones the program either just doesn't go onto the next one or goes back to the last one and doesn't allow you to click the letters.
setTimeout(function() {
jQuery('.next-question').trigger('click');
}, 1500);
I have tried to go through with break points but cannot seem to find the issue. Can someone help me to get it working again and tell me where I was going wrong?
At the moment in my game there is no hint pictures or hint sounds so to find the highlighted word you have to use the console. Try answering two right then it will crash.
Here is a fiddle for the broken one: http://jsfiddle.net/smilburn/Dxxmh/101/
Here is a fidddle to a previous one that worked fine: http://jsfiddle.net/smilburn/Dxxmh/100/ (some class names may have changed)

First thing. The images dont show in the new version because for their links, you're using relative path which doesnt exist as far as jsfiddle is concerned. The earlier one uses absolute links. Same thing goes for the audio files.
Next thing, at the beginning you have var definitions like
var hintPic = $("#hintPic")[0];
This statement returns the first element from the set as a plain DOM element. So later when you're trying to show it
hintPic.show();
It wont work because 'show' is a jquery function. Remove the [0]'s from the variable definitions and it should work just fine.

Related

Performing a Simple Math Operation in Real Time with Runtime Data in Qualtrics

I have a single slider on a survey in Qualtrics, and need to present the value on the slider from both "ends" (so if the respondent has placed the handle at the value 55, I need to have a box with "55" and "45" shown below the slider, since the maximum value is 100, i.e. 100-55=45).
I've managed to show the value of the slider with the user's input (in the above example, the "55") with this following snippet of HTML in the text question, which places a box somewhere on the page with the slider's value:
<input class="SumInput InputText QID29 QWatchTimer" data-runtime-value="runtime.Choices.1.Value" id="QID29" name="QID29" type="text" value="" />
However, I can't get the other box that displays essentially 100 minus whichever the runtime.Choices.1.Value is to work (the "45"). I've tried simply "100-runtime.Choices.1.Value", "100"-"runtime.Choices.1.Value", the same without any quotations, and just about every possible math function for CSS/HTML. I know that technically HTML only displays and doesn't really do this kind of runtime calculation (I'm a novice so this is as far as I've gleamed), so if there was any Javascript snippet or some other piece of code that would show in real time 100 minus wherever the user has moved the handle on the slider to, that'd be fantastic. I'm assuming some sort of addOnClick function but have no clue how to refer to anything on the slider to do this.
It's such a simple task but for some reason has taken so far quite a bit. Any help is appreciated; thanks!
I've managed to figure this out for the particular example of the slider, though I think the following Javascript should work for presumably many question types, given using the correct getChoiceValue (i.e. changing the "1" to the number corresponding to the element on the page whose answer value you want to obtain):
Qualtrics.SurveyEngine.addOnload(function() {
/*Place your JavaScript here to run when the page loads*/
var result=0;
var otherend= 0;
this.questionclick = function(event,element){
result = this.getChoiceValue(1);
endupdate();
document.getElementById("otherend").innerHTML=otherend;
document.getElementById("result").innerHTML=result;
}
function endupdate() {
otherend=100-result;
}
});
I then added the following in the HTML of the question text, wherever I wanted it to show up (I personally put it in a table so I could center things nicely on the page, along with some explanatory text):
<span id="result">0</span>
<span id="otherend">0</span>
Hope this saves somebody else some time and energy!

Ending a reaction game Javascript

Here is the related link: http://jsbin.com/cebisoqovo/edit?html,output
I just started on code learning and recently created a game called Reaction Tester with my limited knowledge. However, I am faced with a minor problem at the end.
Question:
So whenever there is random square or circle shown, all you have to do is click and the time taken to click & the point will be shown on the right side. However, I do not know how to set the ending time of the game and it just keeps continuously popping out the shapes. I have the try again and result (under css) set as display:none in order to only have these popped out at the end of the game. However, i do not know how to end it. Please help! Thank you!
p/s: There was something wrong with the insertion of code directly here. If it's okay for you, please go to the jsbin link and copy the code and paste on your respective application to have a better look at it since jsbin isn't really showing it clearly. Sorry for the inconvenience.
create a global variable named gameRunning, set it to true. create a timeout function set for 30 seconds that sets gameRunning to false. In your function that creates shapes, first check if gameRunning is true. If gameRunning is true, then create shapes as normal. If gameRunning is false, then do nothing.
^ the above solution works, but you would get 1 last box created after the game has ended because of the way boxes are created.
https://jsfiddle.net/vmo5x2vz/3/
After working with it for a while, I found a different and better way of doing it for your particular situation.
I create a global variable named makeBoxTO, the 'TO' meaning timeout.
var makeBoxTO;
Then I assign the timeout found in makeBox() to this makeBoxTO variable. This is so that we can refer to that timeout outside of the makeBox() function.
makeBoxTO = setTimeout(function()...
Then I set a 10 second timer to end the game.
setTimeout(function(){
clearTimeout(makeBoxTO);
document.getElementById("Box").style.display = "none";
alert('game over');
},10000);
It clears our makeBox timeout, hides any box's on screen, and lets the user know the game is over.

Forcing Spell Check on programmatically created content

I have deduced that the spell check function, as handled by most browsers, only works when the user inputs text and then moves to the next word. I have also deduced that you can "query" the spellchecker by simply move the cursor through a word (i.e clicking the first word and then scrolling down).
I have a tool that takes input text and then produces it in an altered form for the user to see. I want the output text to be subjected to the spell checker.
I am aware of the fact that I could use a javascript spellchecking tool, but I'd like to avoid that if I can get the native tool to work (in large part because users can then define their native spell checker however they'd like).
Two specific questions:
1) Is there any easy way to trigger the spell checker to query every word in an element? Setting spellcheck to "true" does not do this.
2) I think my next best option is to programmatically run the cursor of the list of words, is there a good approach for doing this?
I have the same question. I solved this by focussing on an element and a timeout. It's cerainly not the (best) way to go, but it does it's job.
What it does: it get's the elements (all elements have the not-focussed class on them). While looping through (in reverse, bottom->up), it waits 20 miliseconds in order for the spellchecker to execute.
function enableSpellcheck()
{
setTimeout(function () {
var items = $(".not-focussed").reverse();
if(items.length > 0)
{
var target = items[0];
$(target).focus();
$(target).removeClass("not-focussed");
enableSpellcheck();
}
}, 20);
}

Trying to use JavaScript (no jQuery), to show a div (2 classes) in the html when checkbox is selected

basically I have a form and it has 2 different expansions depending on whether a single or multi day trip is selected (not coded yet, once I get this working I can sort that out properly). I have looked at a lot of similar questions but unfortunately, many of them use jQuery.
I've been working on it for 2 days now, Googled, looked here and got this far on my tutor's suggestion but it isn't quite there yet and I don't understand enough to fix it. I'm hoping it's something simple and I'm just a bit too inexperienced at this point to recognize it.
Right now, I'm just trying to make a div with 2 different classes show depending on which is clicked. The classes being hard coded into the function doesn't matter at the moment. Eventually I will want the div's to appear (still depending on the check box selected) when the submit button is clicked, but that can be a future endeavor (would assume it's just some if/else statements.
If anyone can help, or even just point me in the right direction (keeping in mind I started learning this around 3 weeks ago and haven't even used it in the last 2) I would greatly appreciate your help.
I have attached a JSFiddle of current code, and a picture of the final result from photoshop. (everything below the horizontal white line will initially be hidden until a checkbox is selected).
http://imgur.com/8mY2ZVH
First of all under Frameworks & Extensions, set the select box to No Wrap - in body instead of onLoad. (In the top left).
Second, you have multiple syntax errors.
Multi day<input type="checkbox" name="multi-day" value="multi-day" onclick=""ShowExtraForm1('multiBooking')"">
Remove one set of "" around the ShowExtraForm1.
document.getElementById('singleBooking')style.display="none";
document.getElementById('multiBooking')style.display="none";
Add a . before the 'style' attribute, it's currently a syntax error.
And also, where are the actual forms you are trying to hide?
I have edited your jsfiddle link
think its not working there but this is the function you want
function ShowExtraForm1()
{
var singlechecksts;
var multichecksts;
singlechecksts= document.getElementById('singlecheck');
multichecksts= document.getElementById('multicheck');
if(singlechecksts.checked)
{
document.getElementById('singleBooking').style.display="block";
document.getElementById('multiBooking').style.display="none";
}
if(multichecksts.checked)
{
document.getElementById('singleBooking').style.display="block";
document.getElementById('multiBooking').style.display="block";
}
}
where singlecheck and multicheck are id's of your checkboxs

Auto Update a piece of text depending on position

Right now i am using the awesome flexible-nav
to display the current subtopic i am at in my post.
Additionally to that I was wondering whether I could take this current // string and display it on top of the page in my actual navigation bar. So that the text would change as i scroll and as the flexible-nav changes.
Thanks in Advance
You need to append some code to flexible-nav.js, I suggest you make modification in expanded one and minify it later.
After the line 208 of flexible-nav.js (i.e. closest && closest.node.addClass('current');) add these lines of code.
var doc_title = closest.node.html();
$("title").html(doc_title);
This code changes Title as you keep on moving down the scroll. I wasn't able to figure out call back function in the script (presuming if they have any) but this should work just fine.
You can add any of jQuery selector of your wish instead of $("title") in the code.

Categories

Resources