Code Widget: Specialized Input Techniques

Use the Code widget to get the user's input interactively.

We'll cover the following

Add the code widget and select the "Execute" checkbox. This is what it looks like:

Edit mode
Edit mode

Supported inputs

Apart from the simple "Stdin" functionality, you can get input from the learner in other ways. Expand the "Special Input" drop-down menu and notice the supported types:

  1. FreeHand

  2. Upload Image

  3. Text Input

Supported input formats
Supported input formats

The selected language in the widget, throughout this lesson, is Shell to understand the process easily.

FreeHand

If "FreeHand" is selected, the program will accept a free-hand drawing as input from the learner. The learner can draw anything, and this drawing will be converted into a __ed_input.png file which is available in the usercode (the default directory of the coding widgets). See the example below.

# Run the code

When the “Run” button is clicked, a drawing board appears. Learners can draw anything on it. Once done, they'll click the "Continue" button. This drawing will be saved as __ed_input.png file in the usercode directory.

In case you want to display the freehand input as an output, there is no naming restriction while moving the file, __ed_input.png, from the usercode to the usercode/output directory. It can be given any name with the .png extension.

mv __ed_input.png output/image.png

Upload Image

If “Upload Image” is selected, the program will accept the .png image as input from the learner. The uploaded image is stored in the usercode directory with the name __ed_input.png. See the example below.

# Run the code

When the “Run” button is clicked, a modal appears. The learner can upload any .png from their machine here, and press the “Continue” button. The image will be saved as the __ed_input.png file in the usercode directory.

In case you want to display the freehand input as an output, there is no naming restriction while moving the file, __ed_input.png, from the usercode to the usercode/output directory. It can be given any name with the .png extension.

mv __ed_input.png output/image.png

Text Input

If "Text Input" is selected, the program will accept input in the form of text. Learners can type any text, which is then converted to the __ed_input.txt file in the usercode directory. See the example below.

cat __ed_input.txt

Enter the input below to be saved in file __ed_input.txt

This time, an input field is attached to the code widget. The learner can type any text and press the “Run” button. The text will be saved as the __ed_input.txt file in the usercode directory.