I'm making an LMS web application which allows teachers to create programming exercises.
A programming exercise has one or more test cases, i.e. pair of input and expected output that a student's solution is tested against.
For each test case, the teacher defines the input that's given to the program stdin and the expected output on stdout. Teachers can also add a human-readable description to the test case explaining what property it tests about the submitted program.
Test cases moreover have a visibility value: they can be either set to be public (i.e. the students will see the description, stdin and expected stoud), "description only", or completely hidden to the students.
This is what the editor for a test case currently looks like:
I recently added a new feature which allows teachers to also add files to test cases: these files are made available inside of the work directory of the program written by the student.
Interface-wise, I want teachers to be able to attach one or more files to a test case, uploading them using a file input. I am unsure how to fit this into the interface without it becoming too cluttered.
How would you add this component to the current test case editor? I am opn to re-designing the current layout in order to better fit the functionalities.
One thing I'm considering is having the teacher handle file uploads inside of a dialog, with one dialog per test case editor. However, I would also like the teacher to be able to quickly know if/how many files are attached to a test case at a glance, without having to open a dialog just to see the file names.