feat: Add code-based attendance option

[TigerCodeHub]

Closes #1612

Proposed changes

• Added a new method of attendance. For each EighthScheduledActivity, a random 6-character code 0-9 & A-Z is generated. This is displayed to the teacher (and eighth admins). Teachers can share the code to students at the activity, who can then input the code on a new eighth/student_attendance page which marks them as present if the code is correct (and shows a message as such).

• This also sets the attendance_taken on a sch. activity to True (as it would be odd otherwise).

• Note: Migration is required (new attendance_code attribute for EightScheduledActivity object).

• Attendance will only be marked if the code is given during the block (2:25 - 3:05 for A blocks, 3:15 - 4:00 for B blocks, anytime for other kinds of blocks). Otherwise, the student will get an error message.

• Students may access the attendance page through buttons which will appear on the eighth/glance (location.html) and eight/signup (signup.html) pages from 2:25 to 4:00.

• This attendance method coexists with already-existing methods (so the last change is the one which has effect).

• (All above times in PM).

Brief description of rationale

This method (credits to Alan Zhu for the idea) will let students mark themselves present if they are at an activity (and thus receive the code from the teacher). This makes it more convenient for the teacher to take attendance, as all they need to do is show the code to the students at the activity.

[alanzhu0]

Hi Tiger, great work so far. This is an excellent new attendance addition. Please see my comments, and also use pre-commit and get CI to pass.

I think a useful thing to add would be a checkbox to enable or disable the code. The teacher could enable the code and allow students to check-in, but then after everyone has done that, the teacher can disable the code and anyone who hasn't used the code yet can't do so after that. This is so that the teacher can keep an eye on who is using the code and when. This could replace the 2:25-3:05 restriction, actually.

Also, in my issue I also mentioned an option for scanning a QR code or going to a link for taking attendance. If you could add that too, that would be great. I think that makes a lot of sense for going together with entering a code, and I think that they will have very similar logic flows. But that's up to you, and I won't make it a requirement - the work you've done here is more than enough.

[TigerCodeHub]

Thanks for your feedback Alan!

I'll make a feature where the teacher can choose whether to manually enable/disable the code or let it run automatically based on times from the calendar (if they don't want to have to toggle it themselves). Also, I'll add the times from the calendar to the EighthBlock objects to record their start/end and make them more versatile (right now EighthBlock only stores date and letter - like A or B - which is why initially I hardcoded the code enable/disable times).

Your teacher-end pop up feature is a great idea. I'll try to put both the QR and character code in the pop-up together.

Thanks again,
Tiger

[alanzhu0]

Wonderful, thanks Tiger. Note that for the blocks, I meant the existing schedule

ion/intranet/apps/schedule/models.py

Line 28 in 1339292

class Block(models.Model):

. You don't need to edit EighthBlock.

[coveralls]

coverage: 79.286% (-0.1%) from 79.392%
when pulling 3a4c9a1 on TigerCodeHub:dev
into ad8c249 on tjcsl:dev.

[TigerCodeHub]

Hi Alan,

I implemented the following features in the 2nd and 3rd commits:

• Sponsors/admins can choose between Auto/Open/Closed on their attendance page. Auto means the code is enabled 20 min prior to the block and closes 20 after the end of the block. Open/Closed will override the automatic times.
• On the sponsor/admin attendance page, there is a pop-up button which displays a QR code and the attendance code. The QR code directs to a link which marks the student present, then redirects to the student attendance page with a success message. There are also more detailed instructions for the teachers.
• If a student's attendance has been marked, an "Attendance Marked" message will be shown on the student attendance page (so they know if they've done it already).

Some other things:

• Moved student attendance mechanisms to attendance.py from signup.py.
• The QR code URL contains both the scheduled_activity id and the attendance code, to ensure uniqueness
• Only sponsors/admin can see the code-based attendance things for an activity (as they are the only people who can take attendance the normal way).

Can you please review the new commits? (I've left them separate to keep it clear what's new, I can squash them together if needed.)

Thanks!
Tiger

[alanzhu0]

Excellent work Tiger. This is looking great! I left a few small comments. I have not yet, but I or someone else will soon actually run and test out the code.

[alanzhu0]

Oh and for the commits, could you squash the code and block times ones together? The code and QR ones can stay as separate ones. And also make sure to run pre-commit to get CI to pass.

[TigerCodeHub]

Hi Alan,
Thanks for your comments!

The QR code is now frontend-generated. Also, I made some minor changes (pulling the frontend rendering part of student_attendance_view into a new function to reduce function complexity, pulling the random_code function out of EighthSch..Activtiy to fix some errors in Codacy, etc.)

Tiger

[TigerCodeHub]

Hi Aarush,

I did a bunch of fixes, mainly re-writing the process of passing the attendance-marking result, and adding a new attendance_marked boolean field to eighthsignup to record whether the student has done attendance so the student can see that (I couldn't use the was_absent field since it defaults to false and I didn't want to change that in case it affects something else), as well as some other things (like variable names and the javascript event listener).

Thanks for your feedback!
Tiger

[TigerCodeHub]

Hi Aarush,
I implemented the following changes:

• Reworked the method of QR code attendance. Now, the QR code directs to the student_attendance_view with the two optional parameters filled, and the view (with helper functions) executes the attendance process and redirects to the generic student_attendance page (which clears the url of the params to prevent bugs). I think that if we already passed the code over in the url we could just execute attendance there rather than first passing it to client side then passing it back.
• Reworked the way how the time when global attendance opens/closes, by adding an open and close time fields to the DayType model, which is calculated by a method executed during save() or the migration. This means we don't have to calculate it every time a user access the relevant pages, which reduces load.
• Added a setting which is the attendance code buffer time (currently 20 minutes).
• Added student instructions to the teacher end pop-up, and made the QR code more stylish (with the Ion logo and some coloring). Also displayed the "Auto" attendance open times to the teacher.
• The "View more blocks" button in the student eighth widget on the dashboard turns into "Enter Attendance Code" when attendance is open.
• Changed the code input box into 6 separate boxes.

(Also, I can squash all the commits together at the end if necessary.)

Tiger

[aarushtools]

Thanks Tiger! The UI is starting to look really good now. I like what you did with the QR code. Good thinking on reworking the DayType model; I think what you're trying to do right now would work perfect on a block-by-block basis instead. Keep in mind that by calculating the eighth window for each block individually instead of the day as a whole, the enter code box should only appear for the block that is open to the user right now.

Speaking of which, the QR code feature works great! The popup looks good now too. However, could you clarify instructions - where is the "attendance page"?? I'm still having trouble finding the page using just the UI - maybe I'm just being dumb, but I don't get a button anywhere to "Enter Attendance Code" except for glance? Could you send screenshots of where they are. I don't think it's rendering since I Ctrl + F the whole HTML and still couldn't find it.

For entering the actual attendance code, can you move it out of the glance-looking page and into its own page (and each block has a separate page) where everything is bigger. The 6 digit code thing works great when typing + backspacing, but can you make the boxes perfect squares? If it looks weird you can use a different font in the boxes themselves to make it look better. Also, even though attendance through a specific URL with the code works (such as the one provided by the QR code), trying to enter it manually and hitting submit just does reloads the page and does nothing. I noticed this only happens for A block (works for B block). I also noticed that when I type in the 6 boxes for B block, the cursor doesn't automatically move to the next box - but you probably won't need to worry about this as I want you to move each block to its own attendance code page.

Other than that, this is looking really good! Sorry for all these nitpicks about how it looks and such, but since this will probably be a widely used feature I want to make sure it looks and works well for the user

[aarushtools]

Also can you make this say Enter Code → or something along those lines if the activity they've signed up for has code attendance open

[TigerCodeHub]

Hi Aarush,
Thank you for your really detailed feedback!

Some clarifications/questions I have:
The "Enter Attendance Code" not appearing is odd (it appeared on my end in the eighth signup view - like if you click on a block to see the activity you signed up for - and on the upper right of the dashboard). Both that and the attendance itself are drawn from the schedule using the same logic, so its weird that attendance works but that doesn't. I'll test it some more, and try to get some screenshots.
There might have been a bug when I moved some of the code attendance logic around, so I'll try to fix that. Perhaps it errored for A block but didn't show the error message?
Also, the problem with calling super() after generating is that the generation depends upon the DayType's blocks, and if they were modified/created it's best to save them first then reference them (unless it's fine to not do that?) Instead of save I'll probably use update instead. Also I can definitely move this logic to Block.

Tiger

[TigerCodeHub]

Hi Aarush,
Changes I made:

• Moved eighth attendance auto time logic from schedule.DayType to schedule.Block, along with all the supporting stuff, like changing migrations and changing how it is referenced in the eighth attendance logic.
• Created a new page for each EighthScheduledActivity to do attendance - code can either be entered or passed as url argument (like through qr code scan). An image of an example page is attached
• Rewrote attendance logic to go to those new pages.
• Removed old buttons to the attendance page from dashboard, signup, and glance. Added new ones to signup and dashboard, which only appear if the attendance is open for an activity (pictures attached).

I tested and didn't find any bugs, though if you find one please let me know!

Tiger