Im a newbie trying to make a progressive website. I want the users to go through 7 tests on each level and only if they complete 4/7 tests successfully will they be allowed to progress to the next level (webpage). How do i add this condition check of 4/7 successful completions to my button which will take the user to the next page?
Set the button's display to none in css
#buttonToNextPage{
display : none;
}
Using a variable in javascript to keep track of the number of tests your user has answered. The variable can start from 1 and go upto 4
var testAnswered = 1;
Every time the user answers a new test, you can increment the number by 1 by triggering a function. After incrementing, within the function u should check if the value has reached 4.If yes, you display the button using javascript. The function must look something like this:
function newTestAnswered(){
testAnswered = testAnswered + 1;
if(testAnswered == 4){
document.querySelector('#buttonToNextPage').style.display = block;
}
}
Hope this helped☺
Related
I have 14 rows of 5 td cells. In each one is a radio button. I want the user to be able to click anywhere in the table cell in order to select its radio button. Each row is created thus:
#for (int i01 = 1; i01 <= 5; i01++) {
<td id="tablecellradiobutton" onMouseover="this.bgColor='88,150,183'" onMouseout="this.bgColor='white'" onclick="#('Q01' + i01).checked = true">
#Html.RadioButton("Q01", i01, Q01 == i01.ToString(), new { id = "Q01" + i01 })
</td>
}
However, my onClick is falling over, giving me the error:
Compiler Error Message: CS1012: Too many characters in character literal
This really ought to be damn simple to do without a JavaScript (or jQuery) function, but I think I'm becoming resigned to needing one. But could someone help me to correct my code?
I can't correct your existing code, but you are going to have multiple instances of thesame id:
<td id="tablecellradiobutton"...
you need to create individual ids for each td - probably appending the tr and td index number to the existing id would be the go.
I would use jQuery and using find() get the input within the td that was clicked and set its checked property to true. Note the use of the document.on... which will allow dynamically added content to be targeted as well as static content. Don't forget the $(document).ready... if you don't already have it.;
$(document).on('click','td',function(){
$(this).find('input [type="radio"]').prop('checked',true)
});
I have a similar animation in Flash with a replay button at the bottom. Once the animation completes, it does not loop. Instead if you click replay, the animation starts again.
I want a textbox which will display the amount of times the button was pressed.
My existing code is currently replaying the animation. It's incrementing the count to 1 (from 0) in trace but not getting set within the textbox. Additionally, if I click the button again, trace displays 1 again -- no increment occurred (1 to 2, 2 to 3, etc).
If I comment out gotoAndPlay(1), the incrementing works just fine and is displayed in the textbox -- but the animation does not play again.
What am I doing wrong?
import flash.events.MouseEvent;
var hitcount:Number = 0;
textCounter.text = String(hitcount);
function incCounter(event:MouseEvent):void
{
hitcount++;
textCounter.text = String(hitcount);
trace(hitcount);
gotoAndPlay(1);
}
replay_btn.addEventListener(MouseEvent.CLICK, incCounter);
The problem in your code is that you are creating and initializing every time your counter, so sure you will get every replay the value 1.
So to avoid that, you can just verify if you have already created the hitcount var otherwise create it :
if(!hitcount){ // hitcount is null, so create it
var hitcount:Number = 0;
}
As a good practice, you can also remove the MouseEvent.CLICK on your button if you don't need it. So you get something like this :
if(!hitcount){
var hitcount:Number = 0;
}
count.text = hitcount.toString();
function incCounter(event:MouseEvent):void
{
event.target.removeEventListener(MouseEvent.CLICK, incCounter);
hitcount++;
count.text = hitcount.toString();
gotoAndPlay(1);
}
replay_btn.addEventListener(MouseEvent.CLICK, incCounter);
Hope that can help.
If your flash movie is longer than one frame then the layer which you are placing your actions on the stage needs to extend that amount of frames as well. Otherwise the code is no longer there after frame 1. Also when you come back to frame 1 you are attaching yet another mouse event each time. Start your code with yourButton.removeEventListener to ensure you are only ever attaching one event to it. And every time the movie ends and goes back to frame 1 your counter is reset to 1.
I'm having some trouble getting my playCount to work properly with my replay command.
The goal is to have a button pop up at the end, that gives the option to replay the animation. After the 3rd play, the button should no longer appear.
Currently it continues to show the button even after 3 plays.
The command to tell the replay button to appear is supposed to only trigger if the playCount is less than 3. The trace is coming back showing more that 3 plays, but the button still appears.
I'm not sure where the problem is.
Here's the problematic snippet of code (or where I think the problem is):
// replay button
if(playCount < 3)
{
trace(playCount);
tl.from(replayBtn, .5, {alpha:0})
replayBtn.addEventListener(MouseEvent.CLICK, replay);
}
function replay(event:MouseEvent):void{
tl.restart()
// add one to playCount
playCount++;
trace(playCount);
}
Here is a link to my files.
create a new function called removebutton then add an if condition
if(playCount >= 3)
{
trace(playCount);
replayBtn.enabled = false ;
replayBtn.removeEventListener(MouseEvent.CLICK, replay);
}
the reason is that your button is enabled and its still functioning , couldnt check your code though , but this might work ,
Managed to figure it out so I'll just leave this here
function replay(event:MouseEvent):void{
playCount++;
trace(playCount);
if(playCount < 2) {
//replay the function if there are less than 2 plays on the playcount
tl.restart();
} else {
//if there are not less than 2 plays, replay but the button invisible
tl.restart();
replayBtn.visible = false;
}
}
from what I originally had, I changed the function to an if-else clause. Instead of trying to make it not play the last step when the play count was about 2 (since it will replay 1 more time after it hits 2), I set it to restart if there are less than 2 counts and restart with the button invisible if there isn't less than 2 (the button is being hidden using alpha in the rest of the base animation)
So I am making a data entry program where the user presses buttons to generate new inputs (numbers text etc.) and when finished the lists are generally between 100-10000 items.
The program has been coming along well, but now I am at a point where one set of data entered must generate the coices for an array [1,2, . . .] which is part of a later set of data.
So what I have done is setup buttons with the ID based on the earlier inputs. (The whole data set is saved as a JSON)
And what I want to do is when the button is pressed it looks pressed and writes to an HTML element the ID of the button which will later be read and saved to JSON.
My problem is centered on getting the correct information back to the user.
function doStuff(container){
for (var u = 0, c = someJSON.length; u < c; u++){
var someButton = document.createElement('button');
someButton.id = someJSON.id;
someButton.className = 'someButton';
someButton.onclick = function() {
writeIDToHTML(container,someButton,someButton.id);
}
container.appendChild(someButton);
}
}
function writeIDToHTML(container,theButton,theID){
console.log("theID")
console.dir(theID)
}
This prints only the last ID in the loop. How do I get each ID to each button?
The other thing to do is to give the button a pressed look.
Bonus points if it is reversable.
You should not add a listener on each element. The way to do it is adding a listener on the container and get the id of the clicked event (via event.target). This is called event delegation.
I could explain it, but this guys made a perfect answer to your question : http://davidwalsh.name/event-delegate
Btw, you should consider using a library like jquery to manipulate your DOM. It implements event delegation and advanced cross browser DOM manipulation utilities. For instance, you would not need to add a 'container' property since you can access it by the parent() method.
I read the tutorial regarding creating buttons, it was pretty simple & straightforward.
However, I want to create buttons on the fly. I have a status column. It has a drop down menu created from a range of cells on a hidden sheet. This is working code.
Here's the wish list. When “status X” is selected, I want the button to appear. The user can then push the button to increment a counter (which is displayed). Track needs to be kept of the date & time (also displayed – including the history) when the button is pressed. The previous button press date & time is always displayed.
Once the counter reaches some number – say 10, a warning message pops up which the user must acknowledge, and then the status automagically changes, button disappears and the entire row (with a color change) is moved to another page (or possibly another spreadsheet entirely).
Currently I have a function that simply changes the row color when the status changes, and also moves the row to another page. I imagine the button would get created around that point somehow. Other than what the tutorial says which I don't think really applies, I don't really know how to move forward. Any help?
Please note for the record I find using the “active page” a bad idea in my case, as I have several pages where this might execute from. So, I use “sourceSheet” and “targetSheet” for everything.
Thank you
//happyFunTime is installed as an edit trigger.
function happyFunTime() {
var s = SpreadsheetApp.getActiveSheet();
var r = s.getActiveCell();
// set row color as soon as we know the status
var i = r.getRow();
var targetSheetName=setRowColor(i);
// moveRow(targetSheetName);
}
function setRowColor(i)
{
var sName;
var outCome = [];
var color;
var range = SpreadsheetApp.getActiveSheet().getDataRange();
var statusColumnOffset = getStatusColumnOffset();
var rowRange = range.offset(i-1, 0, 1);
var status = rowRange.offset(0, statusColumnOffset).getValue();
outCome=checkStatus(status);
sName=outCome[0];
color=outCome[1];
rowRange.setBackgroundColor(color);
return sName;
}
Have you tried writing any code to achieve this programmatically? If you do, post it here, as its easier to gain a better understanding of your working code, and to build on it. Or do you just want someone to write te code for you?
All you have described is certainly possible to achieve programmatically, I suggest researching the onEdit trigger, as a means to an end.