6.1 Buttons

In our simulation, Significant Digits we have demonstrated the use of rectangular buttons to serve the purpose of submit and next.

Button Descriptions

• Submit - After the user has selected their answer for the question displayed, they can click on the submit button to receive feedback about their response. This would include the reasoning for the correct answer to guide the students.
• Next - This button can be used by the student to change the question.

6.1.1 Imports

Now in order to accomplish this task, we had to import this library:

import TextPushButton from '../../../../sun/js/buttons/TextPushButton.js';

6.1.2 Creating the button

For an example we will talk about how to develop the submit button.

The first step is to create the button like so:

const submitButton = new TextPushButton('Submit', BUTTON_OPTIONS);

After the button has been created successfully, we can then create a listener and assign it to our button. This is key to the proper functioning of our button because when we need to define some behavior for when the user does click on the button.

submitButton.addListener(() => submit());

function submit() {
      let result;

      if (properties.choice === 'radial') {
        result = properties.choiceProperty.value !== undefined 
        ? updateFeedbackReason([properties.choiceProperty.value]) 
        : false;
      } else {
        let answer = [];
        if (properties.oneProperty.value) {
          answer.push(1);
        }
        if (properties.twoProperty.value) {
          answer.push(2);
        }
        if (properties.threeProperty.value) {
          answer.push(3);
        }
        if (properties.fourProperty.value) {
          answer.push(4);
        }
        if (properties.fiveProperty.value) {
          answer.push(5);
        }
        result = updateFeedbackReason(answer)
      }

      if (result === true) {
        updateMainBoxWithFeedback(properties.choice);
      } else {
        updateMainBox(properties.choice);
      }
    }

Don’t worry about the methods or logic used inside the submit() function. It is imperative to the significant digits simulation and so your listeners will be implementation dependent.