Your one-stop web everything MJPage Design

One of the many questions we receive on the Edge Animate forum is: "How do I create an input field in Edge Aimate?" and it is often followed by: "How do I check the value of that field?"

If this is your question, this is the perfect place to find the answer.

Example

As usual, I will place my code in stage/compositionReady. To open the code window for the Stage, click on the {} backets to access it.

Insert your text fields on the Stage where you want them. The formatting will be done in code but you can already give them the dimension you need.

In stage/compositionReady add the following code

sym.$('input1').html("")

• sym.$('input1') This is the name of the input text field.
• html(input info should be entered here.) Note: the code does not appear in the code window aabove but is described below. Please check out the code in the sample file.
• id='input1' This will be used in the code to determine the value inserted by the user.
• placeholder='area' This is the text added in the input box to direct the user. We just put 'area' rather than 'Please enter the area.' because the space is limited.
• " style='background-color:rgba(255,255,255,0.75); border:0px solid #124a7b; width:60px; height:26px; color: white; padding-left:1px; text-align:center; font-size:18px;'>" This is plain css style. Just add what you need here.

You can copy/paste the same code for each field. You will then need to change the name and id of each file from input1 to input2 or input3.

Next we will make transparent buttons over the each 'Check' words .

Do do this, create a rectangle , select the color and make it transparent, and select the pointer.

In the elements panel, select the three buttons. Right-click to activate the context menu and choose Group Elements in DIV. Name the group 'buttons'.

We will use jquery $(each) to code them. Each child of the group is in order elements 0, 1, 2... You do not really need to name them unless it helps you to remember what is what, which I recommend in a complicated composition where you may have several groups. javaScript will go through the layers in order, the bottom one being element 0.

The complete code in compositionReady is:

sym.$('input1').html("")

sym.$('input2').html("")

sym.$('input3').html("")

sym.$('feedback').html('');
var buttons = sym.$("buttons").children();     
$.each(buttons,function(i){
	// click event
    $(this).on("click", function(){ 
	// conditional - check what value is entered and if it is correct show the checkmark and feedback.
    if(i==0 && input1.value==1160 || i==1 && input2.value==50 || i==2 && input3.value==100){
		sym.$('checkmark'+ (i+1)).animate({'opacity':1.00},1000);
		sym.$('feedback').html('Good job!');
	}else{ // if the value is incorrect do not show the checkmark and show feedback.
	sym.$('feedback').html('Opps, try again!');
	}		
	});
})

Download the sample: Download