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:
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:
FreeHand
Upload Image
Text Input
The selected language in the widget, throughout this lesson, is
Shellto 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.