Wireframe

First, Drew and I worked on a wireframe to get an idea of what it would look like, which we then edited to its current form

Version 1:

Image

Version 2:

Image

Initial Testing

Started out by testing the functionality on a markdown page, linked here. This page splits the input by line, then randomly assigns them to groups, divided by rows.

Image

In this image, the groups are [3, 4], [2, 1], and [5]

Conversion to real page

I started with styling with SCSS and HTML, then adding script functionality while tweaking some of the styling at the same time.

Image

You can mess with it here

Future needs

Currently this is mostly completed, but it runs with localstorage, and will be fully finished after integration with user accounts and the backend.

We will also need somewhere to link this to, such as a resources tab or under the classes page