-
Notifications
You must be signed in to change notification settings - Fork 4
Problem Creation and Editing
The metadata section allows the instructor to edit the problem title, hidden status, and due date. The title field must be a non-empty string containing at least one non-whitespace character. All of the form field components are from MUI, where the date picker specifically comes from @mui/lab, which must be installed separately from the core components. Formik was used to create the actual form and provides a simple API. Formik provides a component calls Field that was used to integrate the datePicker into the Formik form.
The problem editor allows instructors to create problem descriptions with markdown. The monaco editor is used to provide syntax highlighting. The markdown previewer is done using react-markdown and remark-gfm.
The code editor allows instructors to write code for the student to start working with. A header, body, and footer section field are provided, where each is a monaco editor. These fields contain default code to provide the instructor with examples of what they might include in each field. Once again, Formik and MUI were used in this section.
This section allows the user to configure fields that will be used in judge0 on the back-end. Specifically, they can configure memory limit, time limit, and add optional compiler flags in the build command field. All fields are MUI integrated into a Formik form.
The test case creator allows you to designated the input and expected output for test cases. Test cases can have hints. Test cases have one of the following visibilities:
- Input and output visible
- Input visible, output hidden
- Input and output hidden
The first test case is required to have input and output visible, because it is used on the student side to auto-populate the run code input.
The test case editor form is created using Formik and is an array of fields. The components come from Material UI.