I am making a simple math game in adobe captivate. When the slide loads two random numbers are generated. The user enters a sum in a text entry box and submits their answer. If the user's answer matches the correct sum they get a new problem.
All of this works, but I can't figure out how to clear their answer out of the text entry box when they submit it.
My code is below:
var sum = window.cpAPIInterface.getVariableValue('userAnswer');
var rand1 = window.cpAPIInterface.getVariableValue('rand1');
var rand2 = window.cpAPIInterface.getVariableValue('rand2');
var corrSum = rand1 + rand2;
if (sum == corrSum ) {
alert('great jobs');
var rand1 = Math.floor((Math.random() * 20) + 1);
var rand2 = Math.floor((Math.random() * 20) + 1);}
else {alert('try again'); }
It can be done using jQuery. Not sure what the instance names of your text entry boxes are, but say you have a TEB you've named "InputText", Captivate will then output a textfield with the ID of "InputText_inputfield". You can then access this text field and clear its contents with the following jQuery code:
$("#InputText_inputfield").val("");
If it's the first text field in a series and you want it to have focus, use the following jQuery code:
$("#InputText_inputfield").val("").focus();
It's as simple as adding the above code to the "Execute JavaScript" Script_Window, for your 'clear' button.
Related
Edit: This is for use in PDF scripting. I use Acrobat pro but have been using Foxit as of late because it is much quicker than Acrobat.
Below is the exact script I have to add items to a dropdown list titled TalentList. The following is the script in a button titled "Add new Talent"
aray=[this.getField("TalentName").value];{aray.push(this.getField("TalentCost").value)}
var x = aray[0] + "," + aray[1];
this.getField("TalentList").insertItemAt(this.getField("TalentNa
me").value,x)
{this.getField("TalentName").value="";}
{this.getField("TalentCost").value="";}
{this.getField("TalentName1").value=" ";}
Where I have the fields TalentName and TalentCost and I input values into those then click the button to add them to the dropdown TalentList. The script works fine as is. But, the problem I am having is every time I add a new item it adds it to the top of the list and does not sort it when I want it to be sorted. Is there something I can add to the above script in the button to cause this to happen automatically every time?
Please note that I have the "Sort Items" box checked in the properties of the TalentList dropdown.
I believe I would use insertItemAt (as told by someone else) but I don't know the method or the correct parameter to use.
I think you are looking to sort the listbox on your PDF form? If so you could do it like this:
aray=[this.getField("TalentName").value];
aray.push(this.getField("TalentCost").value);
var x = aray[0] + "," + aray[1];
this.getField("TalentList").insertItemAt(this.getField("TalentName").value,x);
this.getField("TalentName").value="";
this.getField("TalentCost").value="";
count = this.getField("TalentList").numItems;
var l = this.getField("TalentList")
for (numsorted = 0; numsorted < count; numsorted ++){
max = l.getItemAt(numsorted, false)
maxindex = numsorted;
for (i=numsorted; i<count; i++){
item = l.getItemAt(i, false);
if (item > max) {
max = item;
maxindex = i;
}
}
item = l.getItemAt(maxindex, false);
l.deleteItemAt(maxindex);
l.insertItemAt(item, numsorted);
}
I have been asked to create a text editor with the following features:
Import text from another source
Apply styles to the text
Styles are predefined (for example style "Level 1" may make the text bold, green and italic.
One styling effect is to add characters before and after the selection so for example, text has two stars before and after
Styles are applied to full words, no partials
The text cannot be edited/changed, only styles should be added
The article text must be saved in a version-ed manor, for example Editor A added these changes ____ on date / timestamp.
What is the best way to do this?
I have been playing with execCommand and this does most of what I want, except I cant seem to make the text non-editable, I'm not able to add chars before and after the selection like this, and I cant track individual changes.
I'm almost thinking I should make each word a label and treat them like objects but I'm having a hard time making them select-able (highlight the text with the mouse like you do in an editor).
Does anyone know of any libraries for this sort of thing?
I can give you a part of the solution: how to select full words. My script is for textarea but you can make a few changes if you want to use div contenteditable instead.
JSFIDDLE DEMO
var lastSelectStart = 0;
var lastSelectEnd = 0;
saveSelection = function(){
lastSelectStart = document.getElementById("text").selectionStart;
lastSelectEnd = document.getElementById("text").selectionEnd;
}
selectWords = function(){
var divEditable = document.getElementById("text");
html = divEditable.innerHTML;
var start = lastSelectStart;
var end = lastSelectEnd;
var before = html.substring(0,start);
var after = html.substring(end);
var split = before.match(/[ .,;]/gi);
var startIndex = before.lastIndexOf(split[split.length-1]) + 1;
split = after.match(/[ .,;]/gi);
var endIndex = after.indexOf(split[0]);
endIndex = end + endIndex;
divEditable.selectionStart = startIndex;
divEditable.selectionEnd = endIndex;
// startIndex is where you insert your stars and
// (endIndex + number of stars added) is where you insert your stars again
}
I have a screen on my ASP.Net page, which, depending on a selection by the user, they get offered between 1 and 5 text boxes. These boxes allow the user to type in an amount.
When the user enters the screen, based on certain criteria, a certain number of these edit boxes are displayed. They are not hidden... if I want 3 boxes, then only 3 boxes are on the screen.
In javascript, as the user types in an amount, a 'Total' edit box is displayed, summing up the values from each box.
So, as the user types, the value in the total updates with the total calculated for all text boxes:
I use:
onkeyup="calculateTotal()"
on the editbox.
To do that, I use the code below:
function calculateTotal() {
var amt0 = $('.txtAmount0').val();
var amt1 = $('.txtAmount1').val();
var amt2 = $('.txtAmount2').val();
var amt3 = $('.txtAmount3').val();
var amt4 = $('.txtAmount4').val();
var amt = Number(amt0);
if (!isNaN(amt1))
amt += Number(amt1);
if (!isNaN(amt2))
amt += Number(amt2);
if (!isNaN(amt3))
amt += Number(amt3);
if (!isNaN(amt4))
amt += Number(amt4);
$('.txtTotalAmount').text('$' + amt);
}
The first issue is that it seems I am losing some precision in the calculation:
I am not sure why I am getting a strange rounding issue, when all I am doing is summing up.
Additionally, it seems a bit dirty, if I added more boxes, I need to modify the code.
Is there a better way for this code to work?
You can something like this:
var sum = 0;
$("input[class*='txtAmount']").each(function() {
if ($.isNumeric($(this).val()) ) {
sum += Number($(this).val());
}
});
$('.txtTotalAmount').text('$' + sum.toFixed(2));
Currently, I am trying to make a black jack game using javascript.
so far I have the dealer's card and the player's card. The problem occurs when the player decides to get another card. It seems like document.write is late in writing the string onto the webpage.
while (totalP < 21)
{
r = confirm("Hit?");
if (r==true)
{
document.write("<center><br>You chose to hit. </center>");
p[counter] = deck[Math.floor(Math.random() * deck.length)];
document.write("<center><br>" + x + "'s next card: " + p[counter] + "</center>");
totalP = total(p, totalP);
if (totalP > 21)
{
for (var i=0; i<p.length; i++)
{
value = p[i].substring(0,p[i].length-1);
if (value == "A")
{
totalP = totalP - 10;
break;
}
else if (i == p.length - 1)
{
document.write("<center><br>You busted. Total = " + totalP + " > 21. Dealer Wins!</center>");
break;
}
}
}
}
The string "You chose to hit." shows up and even after i press ok. the text that should display the next card doesnt show up on the webpage and the confirm dialog box "You chose to hit." shows up again, until the second ok or until the player's card in hand is greater than 21.
If someone can help me on this it would be much appreciated. After researching on the internet and troubleshooting on my own, i can only think of the document.write being unreliable and slow compared to the other javascript code.
Don't use document.write. As you see, it completely replaces the content of the document.
Instead of that you should create a HTML document with some HTML elements in which you can place text.
You can select HTML nodes by their id property. When you have a HTML node like this:
<div id="myDiv"></div>
you can use
var div = document.getElementById("myDiv");
to access that div in your Javascript code. You can then use
div.innerHTML = "Hello World!";
to change the text of that div. You can also create new HTML elements like this:
var newDiv = document.createElement("div");
newDiv.innerHTML = "I am a newly created div!";
var oldDiv = document.getElementById("myDiv");
oldDiv.appendChild(newDiv);
Afterwards your HTML document will look like this:
<div id="myDiv">Hello World!<div>I am a newly created div!</div></div>
I am creating a simple numeracy game where by there is a grid populated with numbers. The numbers are hidden and when the game is run the grid space is highlighted. A div on the side produces a sum to help the user get the correct answer. The user then clicks the corresponding numbers that animate into position and signal whether they are right or wrong.
The problem I am having is that when the program is run a trigger('click') function should select an area at random in the grid and apply the class .spellword. This will highlight the area purple, indicating where to place an answer.
At the moment when I run the program nothing happens and I do not know why. I have made the same game but with words and it worked fine.
Here is the function for the button
$('.minibutton').click(function() {
$('.minibutton').prop('disabled', false);
$('.picstyle').show();
$('td').removeClass('spellword');
var r = rndWord;
while (r == rndWord) {
rndWord = Math.floor(Math.random() * (listOfWords.length));
}
$('td[data-word="' + listOfWords[rndWord].name + '"]').addClass('spellword');
$('td[data-word=' + word + ']').removeClass('wordglow').removeClass('wordglow4').removeClass('wordglow3').css('color', 'transparent');
var noExist = $('td[data-word=' + listOfWords[rndWord].name + ']').hasClass('wordglow2');
if (noExist) {
$('.minibutton').click();
} else {
$('.picstyle').text(sum);
}
}).trigger("click");
Fiddle: http://jsfiddle.net/ZAfVZ/33/
Data-letter and data-word are blank on every table cell. That's why your code is failing.
Edit: see this JSFiddle for a working example. When assigning data-letter to your table cell you were missing a string cast (word.toString()[k]). You still have a handful of table cells with no answer and no data-word - is this intentional?