expertiza / reimplementation-front-end

Expertiza

Peer review system

Expertiza is a web application where students can submit and peer-review learning objects (articles, code, web sites, etc). It is used in select courses at NC State and by professors at several other colleges and universities.

Setup

NCSU VCL image

The expertiza environment is already set up in NC State's VCL image "[CSC517, S18] Ruby on Rails / Expertiza".

Using the VCL is the quickest way to get started, but you may find it awkward developing on a remote machine with network lag and having to reinstall gems every time you connect. Installing locally can be a pain though too. Life is full of tradeoffs. :-) The good news is that you can start on one environment, push your work to git, and switch to another environment if you don't like the one you started with.

Steps after getting a VCL reservation

• Clone the code
• Run bash setup.sh
• Run sudo gem install bundler -v 1.16.6
• Run bundle install
• Open config/database.yml and add the password as expertiza
• Run rails db:migrate
• Run rails s

Installing locally

See the Google doc on setting up the Expertiza development environment.

_{Depreciation warning: See the Expertiza wiki for setup instructions. Please update the wiki with corrections or additional helpful information. (http://wiki.expertiza.ncsu.edu/index.php/Development:Setup:OSX, http://wiki.expertiza.ncsu.edu/index.php/Development:Setup:Linux:RHEL, http://wiki.expertiza.ncsu.edu/index.php/Creating_a_Linux_Development_Environment_for_Expertiza_-_Installation_Guide)}

Contributing

• Fork the expertiza project
• Create a new branch for your contribution with a descriptive name
• Commit and push until you are happy with your contribution - follow the style guidelines below
• Make sure to add tests for it; the tests should fail before your contribution/fix and pass afterward
• Send a pull request to have your code reviewed for merging back into Expertiza

Style Guidelines

We've had many contributors in the past who have used a wide variety of ruby coding styles. It's a mess, and we're trying to unify it.

All new files/contributions should:

• Use unix line endings (Windows users: configure git to use autocrlf)
• Indent with 2 spaces (no tabs; configure your editor) both in ruby and erb
• Follow the Ruby Style Guide style for syntax, formatting, and naming
• Follow the design guidelines for the views.

When editing existing files:

• Keep the existing tabbing (use tabs instead of spaces in files that already use tabs everywhere; otherwise use spaces)
• Keep the existing line ending style (dos/unix)
• Follow the Ruby style Guide on code you add or edit, as above

Please do no go crazy changing old code to match these guidelines; it will just create lots of potential merge conflicts. Applying style guidelines to code you add and modify is good enough. :-)

Instructions to get production database ssh into a computer running Expertiza, e.g., an NCSU VCL node. ssh into expertiza.csc.ncsu.edu On production server, run mysqldump -uroot -p --databases expertiza_production > dump.sql #exports database from production On VCL, run sudo iptables -I INPUT -p TCP -s <IP_OF_PRODUCTION> -j ACCEPT #allows SCP requests Run SCP to your VCL scp dump.sql <unity_id>@<VCL_IP>:/home/<unity_id> mysql -uroot -p expertiza_development < dump.sql #loads database into production

reimplementation-front-end's Issues

Create a page to edit an Assignment's due date

Path to the Due date page: Go to Manage-> Assignments -> Click on edit (pencil icon) under the Actions tab -> Go to 'Due dates'

Create a Due dates page where we display all the assignments with their corresponding due dates as you can see in the below screenshot. To resolve this issue one needs to perform the following tasks:

• Remove the Number of review rounds input tab
• Align the Timezone field in the same column as the checkboxes
• Remove the Show/Hide date updater button [The updater was an idea to make it easy to change a bunch of due dates in tandem, like when you copy an assignment from one semester to another. However, the current UI is confusing and bothers the user with a potentially irrelevant choice. A better idea would be to wait until the user updates one date, and then, before the save, ask if other due dates should be updated "accordingly".]
• Remove the Use Date Updater column from the table
• Change the Apply late policy field to say, ~ Use the late policy for this assignment
• Add a space between "Due date reminder" and "(hrs.)".

Apart from these changes, the UI pretty much remains the same.

Old UI:

Create a page to create and update a Questionnaire

This page consists of two parts, Questionnaire metadata, and associated Questions, as part of this page interface creation consider the following points:

For the first part:

• All the fields should be in a column and not in a row format as is the case in the old UI (Min Score, Max Score, and Private)
• Min Score, Max Score must be a number
• Is this Review private field should be a checkbox instead of dropdown

For the second part:

• Instead of having an Add button and following fields to create a Question, simply have an Add button, this should be at the bottom of available Questions
• Remove button for a Question should be at the end of that row and not at the start
• Seq field must be disabled for edit
• Type field will be a dropdown and the user can select the type while creating the Question
• Weight field must be numeric
• Edit/View Advice button should be aligned properly
• Edit/View Advice page can be as it is.
• Import and Export buttons at the bottom should display a Modal instead of showing a new page. (reference of Modal can be found in UserEditor.tsx of this repo)
• Import and Export functionality should get or export the data in a format that is required, you don't have to worry about adding the data to the backend.

Note: Feel free to exercise your creativity when designing the user interface for this page, as long as it remains simple and easy to navigate.

[The "Add question weight" button below is not really useful and should be removed. The "text area size" field should be pre-populated with the default value (80, 1)?]

Create a UI for Assignment Edit page "Etc" tab

Create a Etc page which displays all the miscellaneous tasks for the Editing Assignment option.

Path: Go to Manage -> Assignment -> Edit (pencil icon) -> Etc

This UI is good and can be reconstructed in a similar way but feel free to exercise your creativity while making this page easy to understand and navigate.

Old UI:

Create an Account Request module

Redesign the Account module which consists of -

1. Account Request page
2. Request form page

Backend setup documentation - Reimplementation-back-end

Create a user interface for Questionnaire

Create a Questionnaire main page where we display all the types of questionnaires as you can see below screenshot, as part of this issue one needs to perform the following tasks:

• Create a UI page that lists all types of Questionnaire
• To maintain consistency with the previous user interface, consider including an "add/plus" action button for all questionnaire items. Although the function of this button is not yet determined, create an empty function that will activate upon clicking the button. Consider adding a console log message to verify that the click function is operating correctly.
• When a user clicks on any of the listed items, it should expand and show the data, as you can see in the 'Assignment Survey' Questionnaire below
• Add a checkbox that says, "Display my items only" (which means not to display page after page of "public" items). It should be checked by default.
• You will also be responsible for adding the action for expanded entries though these buttons will only have an empty function behind having just a log statement.

Note: Feel free to exercise your creativity when designing the user interface for this page, as long as it remains simple and easy to navigate.

Old Questionnaire Page:

Create a UI for Assignment's "Add Participants" page

Path: Go to Manage -> Assignment -> Edit (pencil icon) -> Etc -> Add Participant

Create a page which displays the Participant details as you can see in the below screenshot.

Old UI:

New Manage Users UI:

The UI page can be reconstructed in a similar manner as the Manager Users new UI page. The following changes can be done while designing this page:

• The table can be created similar to the Users table by using the table component. Make sure to add the remaining column fields as well.
• Replace the Participant Role column with an edit icon under the Actions field which opens the edit modal (similar to the Update user modal). In this modal, just add the role dropdown along with a cancel and submit button.

Update User modal:

• Replace the Remove button and add a delete icon under the Actions field which opens the delete modal (similar to the Delete user modal).

Delete User modal:

• Remove the Enter a user login field and the Participant role radio buttons and add a create icon on the top right corner which opens a modal similar to the Create Users modal. In this modal, add a Enter User login field, a Participant role dropdown, Submit and Cancel buttons.

Create User modal: