Text Input Introduction

In the previous lesson, we learned how to describe an action code and call it when clicking a button. In this lesson, we will learn how to use a text field for inputting answers. To start, let's take the code we created in the last lesson. You can use the same file or copy the code into a new one.

// Import showToast action
import {showToast} from '@app/ui'

const question = {
  label: 'The Capital of Great Britain',
  answers: [ 'New York', 'Liverpool', 'London' ],
  correct: 'London',
}

// Screen with 3 buttons and question
app.screen('/', async function(ctx, req) {
  return <screen title="Question">

    <text class="section">{question.label}</text>

    {question.answers.map( answer =>
      <button
        onClick={buttonHandler.apiCall({ value: answer })}
        class={["secondary","section"]}
        title={answer}
      />
    )}
  </screen>
})

// Handler for button
const buttonHandler = app.apiCall('/check', async function(ctx, req) {
  return  ( req.body.value === question.correct )
    ? showToast("Correct")
    : showToast(req.body.value + ' is not correct');
})

Let’s remind ourselves what this code does: it displays a question and the possible answers. When clicking on the correct option, it shows a "Correct" message; for an incorrect option, it gives an error.

Now, let’s make the task a bit more complex: we will allow users to provide their own answer.

However, we will remove the correct answer from the options provided:

const question = {
  label: 'The Capital of Great Britain',
  answers: [ 'New York', 'Liverpool', 'Manchester' ],
  correct: 'London',
}

Next, we will add another button: "Different answer..." below all the other buttons.

 {question.answers.map( answer =>
    <button
      onClick={buttonHandler.apiCall({ value: answer })}
      class={["secondary","section"]}
      title={answer}
    />
)}
<button
  class={["secondary","section"]}
  title="Different answer..."
/>

Now we need to ensure that when this button is clicked, the application asks the user for their answer and sends it for verification.

To do this, we will use the showTextDialog method, importing it at the beginning of the file:

import {showTextDialog} from '@app/ui'

This method allows us to display an input field and send the entered text to the specified URL. To get this URL relative to the current router, we will again use .router. But this time, we will use .url, which returns only the URL instead of .apiCall, which returns a complete action.

<button
  class={["secondary","section"]}
  title="Different answer..."
  onClick={showTextDialog({
    submitUrl: buttonHandler.url(),
    title: 'Enter your answer'
  })}
/>

After this, everything will work. We don’t even need to modify the handler code. The thing is, showTextDialog sends its input field as the same parameter value, which will be available in the handler via req.body.value.

Final Code

Next Step: Transferring States