Editing test case data inside of a coding problem editor

Question

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.

Answer 1

Interesting project! Here are some thoughts on your question:

Points to consider

• This is expert software, so I would not worry too much about a minimalist, decluttered aesthetic. Teachers have to get used to a fairly complex work flow anyways (writing test cases and student-proof, didactically useful exercises is real shit), so you actually reduce cognitive load by having all frequently needed functions visible.
• You need to have as few clicks as possible. A teacher may have the need to edit the attached files of like 351 test cases in one afternoon. In that case, nothing would be more annoying than having to do an extra two or three clicks every time. For this reason, I would discourage a dialogue. Also consider adding the possibility of dragging and dropping files.
• Email inboxes are a piece of UI that handles the problem of file attachment as an often but not always used function - and your users probably know email quite well. Thus, feel free to steal Gmail's or Outlook's or whoever's UX flow of fail attachment.
• Come to think of it, your project is not the only one of its kind either; you probably will find a lot of good and bad inspiration by researching your competitors (which is always a good idea). When you are not innovating in the specific area of file uploads, feel free to steal the mechanism that your users might expect or are used to.

What I would do

All that said, I would make it real simple and just add an Add Files button where it makes sense (I am not entirely clear what exactly the files are for, if they are for example would be referenced in the explanation text or whatever, so you need to figure out to which part of the UI this button fits best), directly linking to the system's file dialogue, and then just have a lil' list showing the attached files and a possibility to delete them. Then gather some feedback and see if you need to iterate.