calblueprint / ros-student

A student portal for Roots of Success

Roots of Success

The production application is located at https://ros-student-production.herokuapp.com. This is the student entry portal, which only students should use. Admin access a different entry portal described below.

Admin Portal

The admin portal is located at https://ros-student-production.herokuapp.com/admins/sign_in. You can sign in if you have administrator credentials. The Admin Portal is the second of the two entry points into our application, and contains primarily the following pages.

Course Module Grid

This is the landing page upon logging in to the application. It contains a list of all the currently existing courses on the application platform as well as a method for creating a brand new course. Each course is represented as a card and upon clicking the card, the admin is taken to the Course Edit Page.

Course Edit Page

The admins' main functionality in editing and adding course content is hosted on thie page. The names of all label fields, including course title, description, section titles, and subsection titles can be edited inline, and are immediately saved upon clicking out of the field. Components, the lowest level structure on this page, can be edited via a pop-up modal upon clicking a particular component.

Components

There are three types of components, which can be used to build a course:

• Slide components primarily contain an image, representing a presentation slide
• Quiz components link to a Google Forms quiz, which will be embedded inside the app in the student course. Quiz components must contain a secret key, which the Google Form should display upon the form's completion. This allows verification that the student completed a quiz and can move on
• Multimedia components link to a YouTube video, which is also embedded inside the student course. The navigation/scrubbing controls are disabled for the video, so the student necessarily has to finish the video to continue to the next component in the course

Audio

In addition, every type of component has an additional optional audio file, which is embedded below the main body of the component. This is to account for the case that students are studying self-paced with the application and do not have a teacher to provide instuctions. The audio will then serve as a replacement for the teacher's prompts.

Deletion

All parts of a course can be deleted via the delete buttons along the right side. The entire course may also be deleted if so desired upon entering a verification.

Users Page

This is the first tab on the navbar after the Roots of Success logo. It contains an index of all the students currently enrolled in the platform and a list of all the admins. An administrator can create another administrator by entering an email to which a prompt will be sent with instructions on how to create an admin account. This is currently a WIP, and will in the future be able to display a student's progress in all enrolled courses, and also possibly various convenience functions like search.

Tools Page

This is the second tab on the navbar, and contains a utility function for admins to export and import courses. The course data will be packaged and exported as a JSON file. If desired, an admin can choose to export a course, make edits, and reimport it as a brand new course. This can also be used as a method for backing up courses so that they can be reloaded in case they are somehow lost.

Codes Page

Admins have the ability to generate registration codes to enroll new students into a course. The top level button provides the option to generate a set of any number of codes associated with a particular context (a class in Berkeley, CA, for example). The admin will choose the courses for which those registration codes can enroll students for, and upon submission will store codes onto the server which can be downloaded as a file. The teacher/administrator may then choose how to distribute the codes to students afterwards. Students who use the codes to create a new account

Profile Page

Upon hovering over the admin name, the Profile Page may be accessed through the Profile dropdown button. This interface provides basic utilities such as the ability to change password, edit email, and so on.

ros-student's Issues

Add Component Model

Add change position API to course edit view.

Take a look at the https://github.com/swanandp/acts_as_list api and use it to switch the position of a section, subsection, or component.

You'll need to make three apis (for section/subsection/component), something along the lines of
POST /api/component/:id/switch_position, that takes in a number (the new position of the element).

Add Course List Page

Page should correspond to /courses
Page should belong in the student bundle

Verify code before signup for students

Add Additional User fields

Add Code/Module/CodeModule/StudentModule Tests

Add Code/Module/CodeModule/StudentModule Models

Add Login/Updating/Creating users

Start styling sectionedit, subsectionedit

Style the different sections/subsection edit components per ken's mockups.

Add component create react component

Create a "form" to create a course component.

It should contain fields for:

Picking what type of component it is.
A video/form component should just have a url.
It should also include a field to upload an audio file.
For slides, you need to be able to upload an image.

I've created an AudioUploadInput and ImageUploadInput, which takes in an image/audio, and converts it into a string, which you can pass into the components fields.

Add better readme

Add Sections/Subsections/SubsectionProgress Tests

Add api for create/update/destroy components

Models + Tests

Seems similar, but we want to keep the two separate.

https://docs.google.com/document/d/1-ZmEweKn9tP6hiumXTJ0cYAEJ9c-8sPCRiweOOlEV-8/edit

Show previous list of csvs

We should be able to see a list of previous code csvs.

Creating component components

Create all our components as React Components (youtube/images/audio/forms) Each component type should have a corresponding React Component.

Add CodeCSV model

make /codes_csvs/:id/download api

We should send a csv of codes back to the json api.

Here's @warrenshen's code from the request object where you can request a csv from a certain endpoint.

https://github.com/calblueprint/edge-yl/blob/a3d98c7b57d5d508a27446b8d4fb8c330985d96a/app/assets/javascripts/helpers/requester.es6.jsx#L4

Here's a railscast that might help with explaining whats happening:

http://railscasts.com/episodes/362-exporting-csv-and-excel

Add photo uploading to courses

Allow people to change the cover photo for courses.

Design code csvs page and then style it

Should start with the list of code_csvs + buttons

Add Component Tests

Add Create CodeCsv component

The code csv create component should include fields for: name, number of codes, and courses you want to show. You'll need to include a request to grab all the courses so that the admin can pick which course they want to add.

Add Sidebar Component to course bundle

Should be called CourseSidebar.js - Lists Section/Subsection with the Dropdown component

Add api for create/update/destroy section

Add Code Verify React Component

Add courselist to admin page

Link should link to /admins/courses/:id/edit. You might have to change the serializer so that all the courses are enabled for admins.

Fix clicking on sidebar to show components

Students shoudl be able to click on the sidebar and see components.

Add Section/Subsections/SubsectionProgress Models

Add API for admins to generate codes via codecsv

Adding s3 to the backend.

Set up fog and carrierwave for our s3 backend. Talk to @vivekraghuram to get image uploading to work.

Add API for admins to view list of previous codecsvs

Add Student/Admin models

Add api documentation

Add Update API for students and admins

Implement inline editing

Using the InlineEditInput widget, allow admins to modify course name/description, section name, and subsection name. Makes correct api calls.

Implement 'Add new section/subsection' button to course edit page

There should be a button that adds a new section to a course, and a new subsection under the specified section.

You'll need two prs:

1. One that changes the default name for section/subsection to 'Section'/'Subseciton',
2. Adds the buttons that creates the section/subsection

Update Student/Admin Models

Fix seeds

Seeds are currently broken.

Add Code Verify API

Add Student/Admin Tests

Add Update routes/components

Fix permitted courses

Right now, students can view any course they want to. You should fix the ui so that you have two sections, the courses the student is in enrolled in, and the course that arent (these should be greyed out and unclickable).

You should also modify the StudentAbility so they can't load the course information. You can take a look at how abilities work

https://github.com/CanCanCommunity/cancancan/wiki/Defining-Abilities-with-Blocks

A student is enrolled in course if they have StudentCourse object.

Create CourseEdit bundle

Add link in admin dashboard that creates a new course.
Add courseEdit bundle that we send when someone creates a course or visits /courses/:id/edit page

Add Admin workflow

Allow admins to add courses

Add Course Outline Page

Page should correspond to /course/:id/outline
Page should live in the students bundle

Add Student Workflow

Allow students to view courses and take them.

Make course page subsection bar

Doesn't have to be super comprehensive - it should just show list of components when you click on a subsection in the sidebar.

Add permissions to sidebar.

Students should not be able to access sidebar elements unless they've completed the subsection before it. You can take a look at hte documentation for cancancan, our auth framework.

Add Course Edit page

Make api to get course as it is so far. (/api/courses/:id)
Allow user to add sections.

Add apis for courses outline

Allow students to view the outline for their courses