Skip to main content
M
morriarty23167261d1kp
Known Participant
September 25, 2022
Answered

Validate combinations with button and problem sound button

  • September 25, 2022
  • 1 reply
  • 1368 views

I would like to design something quite simple.

I created orange buttons that play a sound when clicked. The black circles are not buttons, it's just the instruction that the user will have to do to move to the next frame :

My first issue is that when you click a orange button, you have to wait for the sound to end before clicking that same button again.

How can you click that same button immediately to play the same sound again
without the previous sound cutting off ?

 

My second slightly more complex problem is that i would like the user to click on what is requested in the black instruction.

How to know if the user has clicked on the right buttons in the requested order to automatically move to the next image, a bit like a combination except that he does not need to validate to advance to the next frame ?

 

I think you have to create a listener for each button and create variables to store the result of each but I don't see how to know that the user has respected the requested order by clicking once on the right button

 

Here is my code which is quite simple :

this.stop();

if(!this.defined1){
this.sound1=createjs.Sound.createInstance("corde1");
this.defined1=true;

}

function complete1F(){
this.sound1.play();
}

if(!this.defined2){
this.sound2=createjs.Sound.createInstance("corde2");
this.defined2=true;

}

function complete2F(){
this.sound2.play();
}
	
if(!this.defined3){
this.sound3=createjs.Sound.createInstance("corde3");
this.defined3=true;

}

function complete3F(){
this.sound3.play();
}


if(!this.defined4){
this.sound4=createjs.Sound.createInstance("corde4");
this.defined4=true;

}

function complete4F(){
this.sound4.play();
}

if(!this.defined5){
this.sound5=createjs.Sound.createInstance("corde5");
this.defined5=true;

}

function complete5F(){
this.sound5.play();
}

if(!this.defined6){
this.sound6=createjs.Sound.createInstance("corde6");
this.defined6=true;

}

function complete6F(){
this.sound6.play();
}


this.corde1.addEventListener("click", fl_ClickToGoToAndStopAtFrame.bind(this));

function fl_ClickToGoToAndStopAtFrame()
{
	this.sound1.play();
}

this.corde2.addEventListener("click", fl_ClickToGoToAndStopAtFrame_2.bind(this));

function fl_ClickToGoToAndStopAtFrame_2()
{
	this.sound2.play();
}

this.corde3.addEventListener("click", fl_ClickToGoToAndStopAtFrame_3.bind(this));

function fl_ClickToGoToAndStopAtFrame_3()
{
	this.sound3.play();
}

this.corde4.addEventListener("click", fl_ClickToGoToAndStopAtFrame_4.bind(this));

function fl_ClickToGoToAndStopAtFrame_4()
{
	this.sound4.play();
}

this.corde5.addEventListener("click", fl_ClickToGoToAndStopAtFrame_5.bind(this));

function fl_ClickToGoToAndStopAtFrame_5()
{
	this.sound5.play();
}

this.corde6.addEventListener("click", fl_ClickToGoToAndStopAtFrame_6.bind(this));

function fl_ClickToGoToAndStopAtFrame_6()
{
	this.sound6.play();
}

 Thank you for your help.

    This topic has been closed for replies.
    Correct answer JoãoCésar17023019

    Hi,

    Thanks for the sound it works fine now.

     

    For the sequence,

    I would like to be able to use the same value multiple times in the response like :

    this.answer = "1212";

    The problem is that nothing happens when clicking on the buttons to achieve the answer with repeating values.

     

    The second problem is that I would like to reset the program if the user gets the wrong answer because otherwise it no longer runs correctly if we try to start again.

     

     


    Got it.

     

    You just need to set the fourth argument of the on method to false so that the click event works more than once and reset the sequence property when the buttons are clicked in the incorrect order. Like this:

     

    this.sequence = "";
this.answer = "1212";

this.check = function(e, data)
{	
	this.sequence += data.value;
		
	if (this.sequence.length === this.answer.length)
	{
		if (this.sequence === this.answer)
			console.log("move to next frame");
		else
		{
			this.sequence = ""; // resets the sequence
			console.log("incorrect sequence");
		}	
	}
};

// the 4th argument is false now
this.button0.on("click", this.check, this, false, { value: 2 });
this.button1.on("click", this.check, this, false, { value: 4 });
this.button2.on("click", this.check, this, false, { value: 5 });
this.button3.on("click", this.check, this, false, { value: 1 });
this.button4.on("click", this.check, this, false, { value: 3 });

     

    1 reply

    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community Expert
    Community Expert
    September 26, 2022

    Hi.

     

    For the sounds, you could store que current one playing in a variable and then everytime you play a sound you check for this variable value and stop it. Like this:

    if (currentSound)
        currentSound.stop();
    // play next sound

     

    For the sequence, supposing that you have buttons called this.button0... this.button4, you could write something like this:

    this.sequence = "";
this.answer = "12345";

this.check = function(e, data)
{	
	this.sequence += data.value;
	
	if (this.sequence.length === this.answer.length)
	{
		if (this.sequence === this.answer)
			console.log("move to next frame");
		else
			console.log("incorrect sequence");
	}
};

this.button0.on("click", this.check, this, true, { value: 2 });
this.button1.on("click", this.check, this, true, { value: 4 });
this.button2.on("click", this.check, this, true, { value: 5 });
this.button3.on("click", this.check, this, true, { value: 1 });
this.button4.on("click", this.check, this, true, { value: 3 });

     

    I hope this helps.

     

    Regards,

    JC

    M
    morriarty23167261d1kpAuthor
    Known Participant
    September 26, 2022

    Hi,

    Thanks for your help.
    I tried what you said with the button combination but it doesn't work.

    I tried with a sequence of 2 buttons and added a label to move to the next frame but nothing happens :

    this.sequence = "";
this.answer = "12";

this.check = function(e, data)
{	
	this.sequence += data.value;
	
	if (this.sequence.length === this.answer.length)
	{
		if (this.sequence === this.answer)
			console.log("win");
		else
			console.log("lose");
	}
};

this.corde1.on("click", this.check, this, true, { value: 2 });
this.corde2.on("click", this.check, this, true, { value: 1 });
    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community Expert
    Community Expert
    September 26, 2022

    Hi.

     

    Do you get the log in the console ("win") or you just can't move to another frame?

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices