Element pl-file-editor: In-browser file editor

Questions below were designed to showcase the different features of pl-file-editor. The goal of pl-file-editor is to allow users to directly write or modify code within their web browser. To require students to upload a code file, please consider using pl-file-upload.

Note:There is no autograding setup for this example.

Part 1

The default behavior for the pl-file-editor element is displayed here. The only required parameter is file-name, which is the name of the file where the student answer will be saved to. This file name will be displayed at the top left of the inbrowser file editing area.

Implement a function that determines if a number is even or odd.

is_odd.py
Part 2

The file editor area is highly configurable. Within this example, the programming language syntax highlighting is enabled for Python using ace-mode="ace/mode/python". In addition, the editor area is pre-populated with a starter template using source-file-name="initial-code.py"

Implement a function that determines if a number is even or odd.

is_odd2.py
Part 3

For long programming assignments, the minimum and the maximum number of lines of code to simultaneously display can be set. The minimum value causes a pre-allocation of the editor height for its viewing area using min-lines="40". Meanwhile, the maximum bound indicates when the text editor will enable scrolling. For example, max-lines="60", would allow for the editor to display 60 lines of code before the scroll bar would be unlocked. Both features can be tested by holding down "return" or "enter".

Implement a function that determines if a number is even or odd.

is_odd3.py
Part 4

Moreover, for variable length programming assignments, the file editor can be set to automatically expand when new lines are added. Expansion is enabled by setting auto-resize="true" and results in the editor window growing downward. It's good practice to pair this option with min-lines="20" or source-file-name="initial_code.txt"to initially set the window height. Try out the expansion by holding down "return" or "enter".

Implement a function that determines if a number is even or odd.

is_odd4.py
Part 5

For students using non-latin keyboards, it is possible that non-English characters may be introduced into the box. This can cause confusion if these characters resemble a latin character (e.g., the cyrillic character а looks a lot like the latin character a). Similarly, students may copy from text editors and paste into the answer box, causing characters like fancy quotes to be introduced. The attribute normalize-to-ascii="true" converts many Unicode characters to the ASCII character that mostly resembles it.

Implement a function that determines if a number is even or odd.

is_odd5.py
Part 6

Custom languages can be supported by specifying the appropriate ACE mode using ace-mode="ace/mode/your-mode". The mode file can be saved in the course's files under the path clientFilesCourse/ace/mode/mode-your-mode.js, or the question's files under clientFilesQuestion/ace/mode/mode-your-mode.js.

This editor supports a very simple language that supports C-style comments, strings, numbers, identifiers, and the keywords if, else, while, return, and print. The mode file is located at clientFilesCourse/ace/mode/mode-simplelang.js, and the mode is set to ace/mode/simplelang.

custom
Part 7

This element also supports the submission of blank files by setting allow-blank="true".

Submit nothing.

blank.py

Correct answer

Student view placeholder

In student views this area is used for assessment and score info.
Tools

Staff information

Question

Title:
Element pl-file-editor: In-browser file editor

Variant

Started at:
2026-08-04 22:47:43 (CDT)
Duration:
0s
Show/Hide answer
{}
History
dec frac
rad deg