Expertiza_Wiki - User contributions [en]

CSC/ECE 517 Fall 2017/E17A2 Lightweight Badging System

2017-12-02T09:41:43Z

Tmdement: /* External Links */

__TOC__

= External Links =

<div style="padding: 10px 25px 25px 25px">

[https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.mo1zn1d9w38l Fall 2017 Final Project Topics]

[https://github.com/pushpendrasp/expertiza/tree/badges Working Repo Branch]

[https://github.com/expertiza/expertiza/pull/1095 Expertiza Pull Request]

[https://www.youtube.com/watch?v=_Da-ORGIzsk Video Demonstration]

</div>

= Team Contact =

<div style="padding: 10px 25px 25px 25px">

; MEMBERS:

:Priyanka Jain: [mailto:pjain15@ncsu.edu pjain15@ncsu.edu]

:Pushpendra Patel: [mailto:ppatel16@ncsu.edu ppatel16@ncsu.edu]

:Tanay Kothari: [mailto:tkothar@ncsu.edu tkothar@ncsu.edu]

:Timothy Dement: [mailto:tmdement@ncsu.edu tmdement@ncsu.edu]

; MENTOR:

:Zhewei Hu: [mailto:zhu6@ncsu.edu zhu6@ncsu.edu]

</div>

= Project Description =

<div style="padding: 10px 25px 25px 25px">


The goal of this project is to create a simple badging system for Expertiza, allowing students to earn badges when they meet certain predefined criteria while using the platform. The full E17A2 project topic description can be found [https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.u6i7q1mdz0zl here]

 

Per the full project topic description, the badges will be designed using [https://credly.com Credly]. Previous work on this project topic revealed that any text included on the badges is too small to read, so all text should be removed from the badges and instead appear when the badges are hovered over.

 

This project is concerned with two preliminary badges — "Good Reviewer" and "Good Teammate" — but the design will be such that the badging system can be easily extended to include more badges in the future. The "Good Reviewer" badge will be awarded to students who receive very high review grades. The "Good Teammate" badge will be awarded to team members who receive very high teammate review scores. By default, the "threshold" for earning these badges will be set to a score of 95, but this value will be configurable on a per-assignment basis by the instructor.

 

A new "Badges" tab will be added for instructors on the "Edit Assignment" page where instructors can add badges and configure the badge criteria for a given assignment. Badges a student has earned can be seen when they view their "Task List" page, and an instructor will be able to view all badges earned by students when they view the "Participants List" page.

 

Please refer to the sections below for further detail.

</div>

= Project Requirements =

<div style="padding: 10px 25px 25px 25px">

1. Create badges using Credly (do not include text)

        1.1. Create the "Good Reviewer" Badge

        1.2. Create the "Good Teammate" Badge

        1.3. Store these badge images in the app/assets/images/badges directory

2. Create tables for the badging system

        2.1. Create a table named badges with the following attributes

                2.1.1. id — primary key

                2.1.2. name — varchar

                2.1.3. description — varchar

        2.2. Create a mapping table named assignment_badges with the following attributes

                2.2.1 id — primary key

                2.2.2 badge_id — foreign key

                2.2.3 assignment_id — foreign key

                2.2.4 threshold — int

        2.3. Create a mapping table named awarded_badges with the following attributes

                2.3.1. id — primary key

                2.3.2. badge_id — foreign key

                2.3.3. participant_id — foreign key

3. Change the UI so that instructors can add, configure, and view badges, and so that students can view their badges

        3.1. Add a new "Badges" tab to the assignments/edit page for instructors to add and configure badges

        3.2. Add badge icons to the participants/list page for instructors to view badges

        3.3. Add badge icons to the student_task/list page for students to view badges

4. Write feature tests to verify the modifications

        4.1. Include tests in the a new badge_system_spec.rb file in the spec/features directory

</div>

= Preliminary Mocks =

=== Badges ===

<div style="padding: 10px 25px 25px 25px">

The following Credly badge will be awarded to students who meet the "Good Reviewer" criterion for a given assignment:

[[File:Badge-Good-Reviewer-Small.png|none|frame|Good Reviewer Badge]]

 The following Credly badge will be awarded to team members who meet the "Good Teammate" criterion for a given assignment:

[[File:Badge-Good-Teammate-Small.png|none|frame|Good Teammate Badge]]

</div>

=== Tables ===

<div style="padding: 10px 25px 25px 25px">

The following is an example of mock data in the badges table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | name (varchar)
! style="padding:10px; text-align: center" | description (varchar)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | Good Reviewer
| style="padding:10px; text-align: center" | This badge is awarded to students who receive very high review grades.
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | Good Teammate
| style="padding:10px; text-align: center" | This badge is awarded to team members who receive very high teammate review scores.
|}

 The following is an example of mock data in the assignment_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | assignment_id (foreign key)
! style="padding:10px; text-align: center" | threshold (int)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 90
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 85
|-
| style="padding:10px; text-align: center" | 5
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 80
|}

The first row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The second row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The third row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 2 with a customized threshold of 90.

The fourth row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 2 with a customized threshold of 85.

The fifth row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 3 with a customized threshold of 80.

 The following is an example of mock data in the awarded_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | participant_id (foreign key)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 3
|}

The first row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The second row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.

The third row represents that the assignment participant with participant_id 2 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The fourth row represents that the assignment participant with participant_id 3 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.
</div>

=== Views ===

<div style="padding:10px 25px 25px 25px">

The following screenshots show a comparison of the existing "Assignments Edit" page, alongside a mockup incorporating the new badging system where instructors can add and configure badges for a given assignment.

 [[File:Original-Assignments-Edit.png|none|frame|The original "Assignments Edit" page.]]

 [[File:Modified-Assignments-Edit.png|none|frame|The modified "Assignments Edit" page.]]

 The following screenshots show a comparison of the existing "Participants List" page, alongside a mockup incorporating the new badging system where instructors can view all awarded badges for a given assignment.

 [[File:Original-Participants-List.png|none|frame|The original "Participants List" page.]]

 [[File:Modified-Participants-List.png|none|frame|The modified "Participants List" page.]]

 The following screenshots show a comparison of the existing "Student Task List" page, alongside a mockup incorporating the new badging system where students can view all of the badges they have earned.

 [[File:Original-Student-Task-List.png|none|frame|The original "Student Task List" page.]]

 [[File:Modified-Student-Task-List.png|none|frame|The modified "Student Task List" page.]]

</div>

= Test Plan =
<div style="padding: 10px 25px 25px 25px">

A new badge_system_spec.rb file will be created in the spec/features folder, and will include feature tests that verify the modifications made for the project.

The following will be our test plan for this project:

<pre>
describe 'Good Reviewer Badge Presence' do

it "should appear on the instructor's participant list when threshold is set below score" do

end

it "should appear on the student's task list when threshold is set below score" do

end

it "should appear on the instructor's participant list when score is set above threshold" do

end

it "should appear on the student's task list when score is set above threshold" do

end

end
</pre>
<pre>
describe 'Good Reviewer Badge Absence' do

it "should not appear on the instructor's participant list when threshold is set above score" do

end

it "should not appear on the student's task list when threshold is set above score" do

end

it "should not appear on the instructor's participant list when score is set below threshold" do

end

it "should not appear on the student's task list when score is set below threshold" do

end

end
</pre>
<pre>
describe 'Good Teammate Badge Presence' do

it "should appear on the instructor's participant list when threshold is set below score" do

end

it "should appear on the student's task list when threshold is set below score" do

end

it "should appear on the instructor's participant list when score is set above threshold" do

end

it "should appear on the student's task list when score is set above threshold" do

end

end
</pre>
<pre>
describe 'Good Teammate Badge Absence' do

it "should not appear on the instructor's participant list when threshold is set above score" do

end

it "should not appear on the student's task list when threshold is set above score" do

end

it "should not appear on the instructor's participant list when score is set below threshold" do

end

it "should not appear on the student's task list when score is set below threshold" do

end

end
</pre>

</div>

= Video Demonstration =

<div style="padding: 10px 25px 25px 25px">

Please click the image below to watch the video demonstration for this project, which demonstrates that:

* Newly-created assignments are automatically added to the assignment_badges table (one entry for each badge) with default threshold values of 95
* Updating a student's reviewer score appropriately awards or revokes the Good Reviewer badge
* Updating the Good Reviewer badge threshold appropriately awards or revokes the Good Reviewer badge
* Updating a student's teammate review score appropriately awards or revokes the Good Teammate badge
* Updating the Good Teammate badge threshold appropriately awards or revokes the Good Teammate badge

 

[[File:E17A2-Video-Thumb.png|link=https://www.youtube.com/watch?v=_Da-ORGIzsk]]

</div>

= Files Modified =

=== New Files ===

<div style="padding: 10px 25px 25px 25px">

• app/assets/images/badges

        A new directory created to house the new badge image files.

 • app/assets/images/badges/Badge-Good-Reviewer.png

        The image used for the new "Good Reviewer" badge.

 • app/assets/images/badges/Badge-Good-Teammate.png

        The image used for the new "Good Teammate" badge.

 • app/views/assignments/edit/_badges.html.erb

 • spec/features/badge_system_spec.rb

        The file holding the new tests written for the badging system.

 • db/migrate/20171115222415_create_badges.rb

        The migration for the new badges table.

 • db/migrate/20171115224048_create_assignment_badges.rb

        The migration for the new assignment_badges table.

 • db/migrate/20171115230007_create_awarded_badges.rb

        The migration for the new awarded_badges table.

 • app/models/badge.rb

        The model associated with the new badges table.

 • app/models/assignment_badge.rb

        The model associated with the new assignment_badges table.

 • app/models/awarded_badge.rb

        The model associated with the new awarded_badges table.

 • test/fixtures/assignment_badges.yml

 • test/fixtures/awarded_badges.yml

 • test/fixtures/badges.yml

 • test/models/assignment_badge_test.rb

 • test/models/awarded_badge_test.rb

 • test/models/badge_test.rb

</div>

=== Edited Files ===

<div style="padding: 10px 25px 25px 25px">

 • app/controllers/assignment_badges_controller.rb

 • app/controllers/assignments_controller.rb

 • app/controllers/response_controller.rb

 • app/controllers/review_mapping_controller.rb

 • app/models/assignment_form.rb

 • app/models/review_response_map.rb

        The file in which the code for the "Good Reviewer" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/models/teammate_review_response_map.rb

        The file in which the code for the "Good Teammate" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/views/assignments/edit.html.erb

        The UI changes allowing instructors to add and calibrate badges for a given assignment.

 • app/views/assignments/edit/_badges.html.erb

 • app/views/participants/list.html.erb

        The UI changes allowing instructors to view badges for the participants of a given assignment.

 • app/views/participants/_participant.html.erb

 • spec/factories/factories.rb

 • app/views/shared_scripts/_user_list.html.erb

 • app/views/student_task/list.html.erb

        The UI changes allowing students to view their badges for all of their assignments.

 • db/schema.rb

        Incorporating schema changes for the three new badges, assignment_badges, and awarded_badges tables.

</div>

= References =

<div style="padding: 10px 25px 25px 25px">

Videos summarizing the previous team's work on this project topic can be found [https://www.youtube.com/playlist?list=PLdDBHYYDZueeGNdQtzS2FfI-eC0-SK6cb here].

</div>

CSC/ECE 517 Fall 2017/E17A2 Lightweight Badging System

2017-12-02T09:41:16Z

Tmdement: /* Video Demonstration */

__TOC__

= External Links =

<div style="padding: 10px 25px 25px 25px">

[https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.mo1zn1d9w38l Fall 2017 Final Project Topics]

[https://github.com/pushpendrasp/expertiza/tree/badges Working Repo Branch]

[https://github.com/expertiza/expertiza/pull/1095 Expertiza Pull Request]

</div>

= Team Contact =

<div style="padding: 10px 25px 25px 25px">

; MEMBERS:

:Priyanka Jain: [mailto:pjain15@ncsu.edu pjain15@ncsu.edu]

:Pushpendra Patel: [mailto:ppatel16@ncsu.edu ppatel16@ncsu.edu]

:Tanay Kothari: [mailto:tkothar@ncsu.edu tkothar@ncsu.edu]

:Timothy Dement: [mailto:tmdement@ncsu.edu tmdement@ncsu.edu]

; MENTOR:

:Zhewei Hu: [mailto:zhu6@ncsu.edu zhu6@ncsu.edu]

</div>

= Project Description =

<div style="padding: 10px 25px 25px 25px">


The goal of this project is to create a simple badging system for Expertiza, allowing students to earn badges when they meet certain predefined criteria while using the platform. The full E17A2 project topic description can be found [https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.u6i7q1mdz0zl here]

 

Per the full project topic description, the badges will be designed using [https://credly.com Credly]. Previous work on this project topic revealed that any text included on the badges is too small to read, so all text should be removed from the badges and instead appear when the badges are hovered over.

 

This project is concerned with two preliminary badges — "Good Reviewer" and "Good Teammate" — but the design will be such that the badging system can be easily extended to include more badges in the future. The "Good Reviewer" badge will be awarded to students who receive very high review grades. The "Good Teammate" badge will be awarded to team members who receive very high teammate review scores. By default, the "threshold" for earning these badges will be set to a score of 95, but this value will be configurable on a per-assignment basis by the instructor.

 

A new "Badges" tab will be added for instructors on the "Edit Assignment" page where instructors can add badges and configure the badge criteria for a given assignment. Badges a student has earned can be seen when they view their "Task List" page, and an instructor will be able to view all badges earned by students when they view the "Participants List" page.

 

Please refer to the sections below for further detail.

</div>

= Project Requirements =

<div style="padding: 10px 25px 25px 25px">

1. Create badges using Credly (do not include text)

        1.1. Create the "Good Reviewer" Badge

        1.2. Create the "Good Teammate" Badge

        1.3. Store these badge images in the app/assets/images/badges directory

2. Create tables for the badging system

        2.1. Create a table named badges with the following attributes

                2.1.1. id — primary key

                2.1.2. name — varchar

                2.1.3. description — varchar

        2.2. Create a mapping table named assignment_badges with the following attributes

                2.2.1 id — primary key

                2.2.2 badge_id — foreign key

                2.2.3 assignment_id — foreign key

                2.2.4 threshold — int

        2.3. Create a mapping table named awarded_badges with the following attributes

                2.3.1. id — primary key

                2.3.2. badge_id — foreign key

                2.3.3. participant_id — foreign key

3. Change the UI so that instructors can add, configure, and view badges, and so that students can view their badges

        3.1. Add a new "Badges" tab to the assignments/edit page for instructors to add and configure badges

        3.2. Add badge icons to the participants/list page for instructors to view badges

        3.3. Add badge icons to the student_task/list page for students to view badges

4. Write feature tests to verify the modifications

        4.1. Include tests in the a new badge_system_spec.rb file in the spec/features directory

</div>

= Preliminary Mocks =

=== Badges ===

<div style="padding: 10px 25px 25px 25px">

The following Credly badge will be awarded to students who meet the "Good Reviewer" criterion for a given assignment:

[[File:Badge-Good-Reviewer-Small.png|none|frame|Good Reviewer Badge]]

 The following Credly badge will be awarded to team members who meet the "Good Teammate" criterion for a given assignment:

[[File:Badge-Good-Teammate-Small.png|none|frame|Good Teammate Badge]]

</div>

=== Tables ===

<div style="padding: 10px 25px 25px 25px">

The following is an example of mock data in the badges table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | name (varchar)
! style="padding:10px; text-align: center" | description (varchar)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | Good Reviewer
| style="padding:10px; text-align: center" | This badge is awarded to students who receive very high review grades.
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | Good Teammate
| style="padding:10px; text-align: center" | This badge is awarded to team members who receive very high teammate review scores.
|}

 The following is an example of mock data in the assignment_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | assignment_id (foreign key)
! style="padding:10px; text-align: center" | threshold (int)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 90
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 85
|-
| style="padding:10px; text-align: center" | 5
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 80
|}

The first row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The second row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The third row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 2 with a customized threshold of 90.

The fourth row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 2 with a customized threshold of 85.

The fifth row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 3 with a customized threshold of 80.

 The following is an example of mock data in the awarded_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | participant_id (foreign key)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 3
|}

The first row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The second row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.

The third row represents that the assignment participant with participant_id 2 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The fourth row represents that the assignment participant with participant_id 3 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.
</div>

=== Views ===

<div style="padding:10px 25px 25px 25px">

The following screenshots show a comparison of the existing "Assignments Edit" page, alongside a mockup incorporating the new badging system where instructors can add and configure badges for a given assignment.

 [[File:Original-Assignments-Edit.png|none|frame|The original "Assignments Edit" page.]]

 [[File:Modified-Assignments-Edit.png|none|frame|The modified "Assignments Edit" page.]]

 The following screenshots show a comparison of the existing "Participants List" page, alongside a mockup incorporating the new badging system where instructors can view all awarded badges for a given assignment.

 [[File:Original-Participants-List.png|none|frame|The original "Participants List" page.]]

 [[File:Modified-Participants-List.png|none|frame|The modified "Participants List" page.]]

 The following screenshots show a comparison of the existing "Student Task List" page, alongside a mockup incorporating the new badging system where students can view all of the badges they have earned.

 [[File:Original-Student-Task-List.png|none|frame|The original "Student Task List" page.]]

 [[File:Modified-Student-Task-List.png|none|frame|The modified "Student Task List" page.]]

</div>

= Test Plan =
<div style="padding: 10px 25px 25px 25px">

A new badge_system_spec.rb file will be created in the spec/features folder, and will include feature tests that verify the modifications made for the project.

The following will be our test plan for this project:

<pre>
describe 'Good Reviewer Badge Presence' do

it "should appear on the instructor's participant list when threshold is set below score" do

end

it "should appear on the student's task list when threshold is set below score" do

end

it "should appear on the instructor's participant list when score is set above threshold" do

end

it "should appear on the student's task list when score is set above threshold" do

end

end
</pre>
<pre>
describe 'Good Reviewer Badge Absence' do

it "should not appear on the instructor's participant list when threshold is set above score" do

end

it "should not appear on the student's task list when threshold is set above score" do

end

it "should not appear on the instructor's participant list when score is set below threshold" do

end

it "should not appear on the student's task list when score is set below threshold" do

end

end
</pre>
<pre>
describe 'Good Teammate Badge Presence' do

it "should appear on the instructor's participant list when threshold is set below score" do

end

it "should appear on the student's task list when threshold is set below score" do

end

it "should appear on the instructor's participant list when score is set above threshold" do

end

it "should appear on the student's task list when score is set above threshold" do

end

end
</pre>
<pre>
describe 'Good Teammate Badge Absence' do

it "should not appear on the instructor's participant list when threshold is set above score" do

end

it "should not appear on the student's task list when threshold is set above score" do

end

it "should not appear on the instructor's participant list when score is set below threshold" do

end

it "should not appear on the student's task list when score is set below threshold" do

end

end
</pre>

</div>

= Video Demonstration =

<div style="padding: 10px 25px 25px 25px">

Please click the image below to watch the video demonstration for this project, which demonstrates that:

* Newly-created assignments are automatically added to the assignment_badges table (one entry for each badge) with default threshold values of 95
* Updating a student's reviewer score appropriately awards or revokes the Good Reviewer badge
* Updating the Good Reviewer badge threshold appropriately awards or revokes the Good Reviewer badge
* Updating a student's teammate review score appropriately awards or revokes the Good Teammate badge
* Updating the Good Teammate badge threshold appropriately awards or revokes the Good Teammate badge

 

[[File:E17A2-Video-Thumb.png|link=https://www.youtube.com/watch?v=_Da-ORGIzsk]]

</div>

= Files Modified =

=== New Files ===

<div style="padding: 10px 25px 25px 25px">

• app/assets/images/badges

        A new directory created to house the new badge image files.

 • app/assets/images/badges/Badge-Good-Reviewer.png

        The image used for the new "Good Reviewer" badge.

 • app/assets/images/badges/Badge-Good-Teammate.png

        The image used for the new "Good Teammate" badge.

 • app/views/assignments/edit/_badges.html.erb

 • spec/features/badge_system_spec.rb

        The file holding the new tests written for the badging system.

 • db/migrate/20171115222415_create_badges.rb

        The migration for the new badges table.

 • db/migrate/20171115224048_create_assignment_badges.rb

        The migration for the new assignment_badges table.

 • db/migrate/20171115230007_create_awarded_badges.rb

        The migration for the new awarded_badges table.

 • app/models/badge.rb

        The model associated with the new badges table.

 • app/models/assignment_badge.rb

        The model associated with the new assignment_badges table.

 • app/models/awarded_badge.rb

        The model associated with the new awarded_badges table.

 • test/fixtures/assignment_badges.yml

 • test/fixtures/awarded_badges.yml

 • test/fixtures/badges.yml

 • test/models/assignment_badge_test.rb

 • test/models/awarded_badge_test.rb

 • test/models/badge_test.rb

</div>

=== Edited Files ===

<div style="padding: 10px 25px 25px 25px">

 • app/controllers/assignment_badges_controller.rb

 • app/controllers/assignments_controller.rb

 • app/controllers/response_controller.rb

 • app/controllers/review_mapping_controller.rb

 • app/models/assignment_form.rb

 • app/models/review_response_map.rb

        The file in which the code for the "Good Reviewer" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/models/teammate_review_response_map.rb

        The file in which the code for the "Good Teammate" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/views/assignments/edit.html.erb

        The UI changes allowing instructors to add and calibrate badges for a given assignment.

 • app/views/assignments/edit/_badges.html.erb

 • app/views/participants/list.html.erb

        The UI changes allowing instructors to view badges for the participants of a given assignment.

 • app/views/participants/_participant.html.erb

 • spec/factories/factories.rb

 • app/views/shared_scripts/_user_list.html.erb

 • app/views/student_task/list.html.erb

        The UI changes allowing students to view their badges for all of their assignments.

 • db/schema.rb

        Incorporating schema changes for the three new badges, assignment_badges, and awarded_badges tables.

</div>

= References =

<div style="padding: 10px 25px 25px 25px">

Videos summarizing the previous team's work on this project topic can be found [https://www.youtube.com/playlist?list=PLdDBHYYDZueeGNdQtzS2FfI-eC0-SK6cb here].

</div>

CSC/ECE 517 Fall 2017/E17A2 Lightweight Badging System

2017-12-02T09:39:15Z

Tmdement: /* Video Demonstrations */

__TOC__

= External Links =

<div style="padding: 10px 25px 25px 25px">

[https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.mo1zn1d9w38l Fall 2017 Final Project Topics]

[https://github.com/pushpendrasp/expertiza/tree/badges Working Repo Branch]

[https://github.com/expertiza/expertiza/pull/1095 Expertiza Pull Request]

</div>

= Team Contact =

<div style="padding: 10px 25px 25px 25px">

; MEMBERS:

:Priyanka Jain: [mailto:pjain15@ncsu.edu pjain15@ncsu.edu]

:Pushpendra Patel: [mailto:ppatel16@ncsu.edu ppatel16@ncsu.edu]

:Tanay Kothari: [mailto:tkothar@ncsu.edu tkothar@ncsu.edu]

:Timothy Dement: [mailto:tmdement@ncsu.edu tmdement@ncsu.edu]

; MENTOR:

:Zhewei Hu: [mailto:zhu6@ncsu.edu zhu6@ncsu.edu]

</div>

= Project Description =

<div style="padding: 10px 25px 25px 25px">


The goal of this project is to create a simple badging system for Expertiza, allowing students to earn badges when they meet certain predefined criteria while using the platform. The full E17A2 project topic description can be found [https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.u6i7q1mdz0zl here]

 

Per the full project topic description, the badges will be designed using [https://credly.com Credly]. Previous work on this project topic revealed that any text included on the badges is too small to read, so all text should be removed from the badges and instead appear when the badges are hovered over.

 

This project is concerned with two preliminary badges — "Good Reviewer" and "Good Teammate" — but the design will be such that the badging system can be easily extended to include more badges in the future. The "Good Reviewer" badge will be awarded to students who receive very high review grades. The "Good Teammate" badge will be awarded to team members who receive very high teammate review scores. By default, the "threshold" for earning these badges will be set to a score of 95, but this value will be configurable on a per-assignment basis by the instructor.

 

A new "Badges" tab will be added for instructors on the "Edit Assignment" page where instructors can add badges and configure the badge criteria for a given assignment. Badges a student has earned can be seen when they view their "Task List" page, and an instructor will be able to view all badges earned by students when they view the "Participants List" page.

 

Please refer to the sections below for further detail.

</div>

= Project Requirements =

<div style="padding: 10px 25px 25px 25px">

1. Create badges using Credly (do not include text)

        1.1. Create the "Good Reviewer" Badge

        1.2. Create the "Good Teammate" Badge

        1.3. Store these badge images in the app/assets/images/badges directory

2. Create tables for the badging system

        2.1. Create a table named badges with the following attributes

                2.1.1. id — primary key

                2.1.2. name — varchar

                2.1.3. description — varchar

        2.2. Create a mapping table named assignment_badges with the following attributes

                2.2.1 id — primary key

                2.2.2 badge_id — foreign key

                2.2.3 assignment_id — foreign key

                2.2.4 threshold — int

        2.3. Create a mapping table named awarded_badges with the following attributes

                2.3.1. id — primary key

                2.3.2. badge_id — foreign key

                2.3.3. participant_id — foreign key

3. Change the UI so that instructors can add, configure, and view badges, and so that students can view their badges

        3.1. Add a new "Badges" tab to the assignments/edit page for instructors to add and configure badges

        3.2. Add badge icons to the participants/list page for instructors to view badges

        3.3. Add badge icons to the student_task/list page for students to view badges

4. Write feature tests to verify the modifications

        4.1. Include tests in the a new badge_system_spec.rb file in the spec/features directory

</div>

= Preliminary Mocks =

=== Badges ===

<div style="padding: 10px 25px 25px 25px">

The following Credly badge will be awarded to students who meet the "Good Reviewer" criterion for a given assignment:

[[File:Badge-Good-Reviewer-Small.png|none|frame|Good Reviewer Badge]]

 The following Credly badge will be awarded to team members who meet the "Good Teammate" criterion for a given assignment:

[[File:Badge-Good-Teammate-Small.png|none|frame|Good Teammate Badge]]

</div>

=== Tables ===

<div style="padding: 10px 25px 25px 25px">

The following is an example of mock data in the badges table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | name (varchar)
! style="padding:10px; text-align: center" | description (varchar)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | Good Reviewer
| style="padding:10px; text-align: center" | This badge is awarded to students who receive very high review grades.
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | Good Teammate
| style="padding:10px; text-align: center" | This badge is awarded to team members who receive very high teammate review scores.
|}

 The following is an example of mock data in the assignment_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | assignment_id (foreign key)
! style="padding:10px; text-align: center" | threshold (int)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 90
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 85
|-
| style="padding:10px; text-align: center" | 5
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 80
|}

The first row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The second row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The third row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 2 with a customized threshold of 90.

The fourth row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 2 with a customized threshold of 85.

The fifth row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 3 with a customized threshold of 80.

 The following is an example of mock data in the awarded_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | participant_id (foreign key)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 3
|}

The first row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The second row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.

The third row represents that the assignment participant with participant_id 2 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The fourth row represents that the assignment participant with participant_id 3 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.
</div>

=== Views ===

<div style="padding:10px 25px 25px 25px">

The following screenshots show a comparison of the existing "Assignments Edit" page, alongside a mockup incorporating the new badging system where instructors can add and configure badges for a given assignment.

 [[File:Original-Assignments-Edit.png|none|frame|The original "Assignments Edit" page.]]

 [[File:Modified-Assignments-Edit.png|none|frame|The modified "Assignments Edit" page.]]

 The following screenshots show a comparison of the existing "Participants List" page, alongside a mockup incorporating the new badging system where instructors can view all awarded badges for a given assignment.

 [[File:Original-Participants-List.png|none|frame|The original "Participants List" page.]]

 [[File:Modified-Participants-List.png|none|frame|The modified "Participants List" page.]]

 The following screenshots show a comparison of the existing "Student Task List" page, alongside a mockup incorporating the new badging system where students can view all of the badges they have earned.

 [[File:Original-Student-Task-List.png|none|frame|The original "Student Task List" page.]]

 [[File:Modified-Student-Task-List.png|none|frame|The modified "Student Task List" page.]]

</div>

= Test Plan =
<div style="padding: 10px 25px 25px 25px">

A new badge_system_spec.rb file will be created in the spec/features folder, and will include feature tests that verify the modifications made for the project.

The following will be our test plan for this project:

<pre>
describe 'Good Reviewer Badge Presence' do

it "should appear on the instructor's participant list when threshold is set below score" do

end

it "should appear on the student's task list when threshold is set below score" do

end

it "should appear on the instructor's participant list when score is set above threshold" do

end

it "should appear on the student's task list when score is set above threshold" do

end

end
</pre>
<pre>
describe 'Good Reviewer Badge Absence' do

it "should not appear on the instructor's participant list when threshold is set above score" do

end

it "should not appear on the student's task list when threshold is set above score" do

end

it "should not appear on the instructor's participant list when score is set below threshold" do

end

it "should not appear on the student's task list when score is set below threshold" do

end

end
</pre>
<pre>
describe 'Good Teammate Badge Presence' do

it "should appear on the instructor's participant list when threshold is set below score" do

end

it "should appear on the student's task list when threshold is set below score" do

end

it "should appear on the instructor's participant list when score is set above threshold" do

end

it "should appear on the student's task list when score is set above threshold" do

end

end
</pre>
<pre>
describe 'Good Teammate Badge Absence' do

it "should not appear on the instructor's participant list when threshold is set above score" do

end

it "should not appear on the student's task list when threshold is set above score" do

end

it "should not appear on the instructor's participant list when score is set below threshold" do

end

it "should not appear on the student's task list when score is set below threshold" do

end

end
</pre>

</div>

= Video Demonstration =

<div style="padding: 10px 25px 25px 25px">

Please click the image below to watch the video demonstration for this project, which demonstrates that:

* Newly-created assignments are automatically added to the assignment_badges table (one entry for each badge) with default threshold values of 95
* Updating a student's reviewer score appropriately awards or revokes the Good Reviewer badge
* Updating the Good Reviewer badge threshold appropriately awards or revokes the Good Reviewer badge
* Updating a student's teammate review score appropriately awards or revokes the Good Teammate badge
* Updating the Good Teammate badge threshold appropriately awards or revokes the Good Teammate badge

 

[[File:E17A2-Video-Thumb.png|link=https://github.com]]

</div>

= Files Modified =

=== New Files ===

<div style="padding: 10px 25px 25px 25px">

• app/assets/images/badges

        A new directory created to house the new badge image files.

 • app/assets/images/badges/Badge-Good-Reviewer.png

        The image used for the new "Good Reviewer" badge.

 • app/assets/images/badges/Badge-Good-Teammate.png

        The image used for the new "Good Teammate" badge.

 • app/views/assignments/edit/_badges.html.erb

 • spec/features/badge_system_spec.rb

        The file holding the new tests written for the badging system.

 • db/migrate/20171115222415_create_badges.rb

        The migration for the new badges table.

 • db/migrate/20171115224048_create_assignment_badges.rb

        The migration for the new assignment_badges table.

 • db/migrate/20171115230007_create_awarded_badges.rb

        The migration for the new awarded_badges table.

 • app/models/badge.rb

        The model associated with the new badges table.

 • app/models/assignment_badge.rb

        The model associated with the new assignment_badges table.

 • app/models/awarded_badge.rb

        The model associated with the new awarded_badges table.

 • test/fixtures/assignment_badges.yml

 • test/fixtures/awarded_badges.yml

 • test/fixtures/badges.yml

 • test/models/assignment_badge_test.rb

 • test/models/awarded_badge_test.rb

 • test/models/badge_test.rb

</div>

=== Edited Files ===

<div style="padding: 10px 25px 25px 25px">

 • app/controllers/assignment_badges_controller.rb

 • app/controllers/assignments_controller.rb

 • app/controllers/response_controller.rb

 • app/controllers/review_mapping_controller.rb

 • app/models/assignment_form.rb

 • app/models/review_response_map.rb

        The file in which the code for the "Good Reviewer" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/models/teammate_review_response_map.rb

        The file in which the code for the "Good Teammate" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/views/assignments/edit.html.erb

        The UI changes allowing instructors to add and calibrate badges for a given assignment.

 • app/views/assignments/edit/_badges.html.erb

 • app/views/participants/list.html.erb

        The UI changes allowing instructors to view badges for the participants of a given assignment.

 • app/views/participants/_participant.html.erb

 • spec/factories/factories.rb

 • app/views/shared_scripts/_user_list.html.erb

 • app/views/student_task/list.html.erb

        The UI changes allowing students to view their badges for all of their assignments.

 • db/schema.rb

        Incorporating schema changes for the three new badges, assignment_badges, and awarded_badges tables.

</div>

= References =

<div style="padding: 10px 25px 25px 25px">

Videos summarizing the previous team's work on this project topic can be found [https://www.youtube.com/playlist?list=PLdDBHYYDZueeGNdQtzS2FfI-eC0-SK6cb here].

</div>

CSC/ECE 517 Fall 2017/E17A2 Lightweight Badging System

2017-12-02T09:38:52Z

Tmdement: /* Video Demonstrations */

__TOC__

= External Links =

<div style="padding: 10px 25px 25px 25px">

[https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.mo1zn1d9w38l Fall 2017 Final Project Topics]

[https://github.com/pushpendrasp/expertiza/tree/badges Working Repo Branch]

[https://github.com/expertiza/expertiza/pull/1095 Expertiza Pull Request]

</div>

= Team Contact =

<div style="padding: 10px 25px 25px 25px">

; MEMBERS:

:Priyanka Jain: [mailto:pjain15@ncsu.edu pjain15@ncsu.edu]

:Pushpendra Patel: [mailto:ppatel16@ncsu.edu ppatel16@ncsu.edu]

:Tanay Kothari: [mailto:tkothar@ncsu.edu tkothar@ncsu.edu]

:Timothy Dement: [mailto:tmdement@ncsu.edu tmdement@ncsu.edu]

; MENTOR:

:Zhewei Hu: [mailto:zhu6@ncsu.edu zhu6@ncsu.edu]

</div>

= Project Description =

<div style="padding: 10px 25px 25px 25px">


The goal of this project is to create a simple badging system for Expertiza, allowing students to earn badges when they meet certain predefined criteria while using the platform. The full E17A2 project topic description can be found [https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.u6i7q1mdz0zl here]

 

Per the full project topic description, the badges will be designed using [https://credly.com Credly]. Previous work on this project topic revealed that any text included on the badges is too small to read, so all text should be removed from the badges and instead appear when the badges are hovered over.

 

This project is concerned with two preliminary badges — "Good Reviewer" and "Good Teammate" — but the design will be such that the badging system can be easily extended to include more badges in the future. The "Good Reviewer" badge will be awarded to students who receive very high review grades. The "Good Teammate" badge will be awarded to team members who receive very high teammate review scores. By default, the "threshold" for earning these badges will be set to a score of 95, but this value will be configurable on a per-assignment basis by the instructor.

 

A new "Badges" tab will be added for instructors on the "Edit Assignment" page where instructors can add badges and configure the badge criteria for a given assignment. Badges a student has earned can be seen when they view their "Task List" page, and an instructor will be able to view all badges earned by students when they view the "Participants List" page.

 

Please refer to the sections below for further detail.

</div>

= Project Requirements =

<div style="padding: 10px 25px 25px 25px">

1. Create badges using Credly (do not include text)

        1.1. Create the "Good Reviewer" Badge

        1.2. Create the "Good Teammate" Badge

        1.3. Store these badge images in the app/assets/images/badges directory

2. Create tables for the badging system

        2.1. Create a table named badges with the following attributes

                2.1.1. id — primary key

                2.1.2. name — varchar

                2.1.3. description — varchar

        2.2. Create a mapping table named assignment_badges with the following attributes

                2.2.1 id — primary key

                2.2.2 badge_id — foreign key

                2.2.3 assignment_id — foreign key

                2.2.4 threshold — int

        2.3. Create a mapping table named awarded_badges with the following attributes

                2.3.1. id — primary key

                2.3.2. badge_id — foreign key

                2.3.3. participant_id — foreign key

3. Change the UI so that instructors can add, configure, and view badges, and so that students can view their badges

        3.1. Add a new "Badges" tab to the assignments/edit page for instructors to add and configure badges

        3.2. Add badge icons to the participants/list page for instructors to view badges

        3.3. Add badge icons to the student_task/list page for students to view badges

4. Write feature tests to verify the modifications

        4.1. Include tests in the a new badge_system_spec.rb file in the spec/features directory

</div>

= Preliminary Mocks =

=== Badges ===

<div style="padding: 10px 25px 25px 25px">

The following Credly badge will be awarded to students who meet the "Good Reviewer" criterion for a given assignment:

[[File:Badge-Good-Reviewer-Small.png|none|frame|Good Reviewer Badge]]

 The following Credly badge will be awarded to team members who meet the "Good Teammate" criterion for a given assignment:

[[File:Badge-Good-Teammate-Small.png|none|frame|Good Teammate Badge]]

</div>

=== Tables ===

<div style="padding: 10px 25px 25px 25px">

The following is an example of mock data in the badges table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | name (varchar)
! style="padding:10px; text-align: center" | description (varchar)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | Good Reviewer
| style="padding:10px; text-align: center" | This badge is awarded to students who receive very high review grades.
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | Good Teammate
| style="padding:10px; text-align: center" | This badge is awarded to team members who receive very high teammate review scores.
|}

 The following is an example of mock data in the assignment_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | assignment_id (foreign key)
! style="padding:10px; text-align: center" | threshold (int)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 90
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 85
|-
| style="padding:10px; text-align: center" | 5
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 80
|}

The first row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The second row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The third row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 2 with a customized threshold of 90.

The fourth row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 2 with a customized threshold of 85.

The fifth row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 3 with a customized threshold of 80.

 The following is an example of mock data in the awarded_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | participant_id (foreign key)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 3
|}

The first row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The second row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.

The third row represents that the assignment participant with participant_id 2 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The fourth row represents that the assignment participant with participant_id 3 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.
</div>

=== Views ===

<div style="padding:10px 25px 25px 25px">

The following screenshots show a comparison of the existing "Assignments Edit" page, alongside a mockup incorporating the new badging system where instructors can add and configure badges for a given assignment.

 [[File:Original-Assignments-Edit.png|none|frame|The original "Assignments Edit" page.]]

 [[File:Modified-Assignments-Edit.png|none|frame|The modified "Assignments Edit" page.]]

 The following screenshots show a comparison of the existing "Participants List" page, alongside a mockup incorporating the new badging system where instructors can view all awarded badges for a given assignment.

 [[File:Original-Participants-List.png|none|frame|The original "Participants List" page.]]

 [[File:Modified-Participants-List.png|none|frame|The modified "Participants List" page.]]

 The following screenshots show a comparison of the existing "Student Task List" page, alongside a mockup incorporating the new badging system where students can view all of the badges they have earned.

 [[File:Original-Student-Task-List.png|none|frame|The original "Student Task List" page.]]

 [[File:Modified-Student-Task-List.png|none|frame|The modified "Student Task List" page.]]

</div>

= Test Plan =
<div style="padding: 10px 25px 25px 25px">

A new badge_system_spec.rb file will be created in the spec/features folder, and will include feature tests that verify the modifications made for the project.

The following will be our test plan for this project:

<pre>
describe 'Good Reviewer Badge Presence' do

it "should appear on the instructor's participant list when threshold is set below score" do

end

it "should appear on the student's task list when threshold is set below score" do

end

it "should appear on the instructor's participant list when score is set above threshold" do

end

it "should appear on the student's task list when score is set above threshold" do

end

end
</pre>
<pre>
describe 'Good Reviewer Badge Absence' do

it "should not appear on the instructor's participant list when threshold is set above score" do

end

it "should not appear on the student's task list when threshold is set above score" do

end

it "should not appear on the instructor's participant list when score is set below threshold" do

end

it "should not appear on the student's task list when score is set below threshold" do

end

end
</pre>
<pre>
describe 'Good Teammate Badge Presence' do

it "should appear on the instructor's participant list when threshold is set below score" do

end

it "should appear on the student's task list when threshold is set below score" do

end

it "should appear on the instructor's participant list when score is set above threshold" do

end

it "should appear on the student's task list when score is set above threshold" do

end

end
</pre>
<pre>
describe 'Good Teammate Badge Absence' do

it "should not appear on the instructor's participant list when threshold is set above score" do

end

it "should not appear on the student's task list when threshold is set above score" do

end

it "should not appear on the instructor's participant list when score is set below threshold" do

end

it "should not appear on the student's task list when score is set below threshold" do

end

end
</pre>

</div>

= Video Demonstrations =

<div style="padding: 10px 25px 25px 25px">

Please click the image below to watch the video demonstration for this project, which demonstrates that:

* Newly-created assignments are automatically added to the assignment_badges table (one entry for each badge) with default threshold values of 95
* Updating a student's reviewer score appropriately awards or revokes the Good Reviewer badge
* Updating the Good Reviewer badge threshold appropriately awards or revokes the Good Reviewer badge
* Updating a student's teammate review score appropriately awards or revokes the Good Teammate badge
* Updating the Good Teammate badge threshold appropriately awards or revokes the Good Teammate badge

 

[[File:E17A2-Video-Thumb.png|link=https://github.com]]

</div>

= Files Modified =

=== New Files ===

<div style="padding: 10px 25px 25px 25px">

• app/assets/images/badges

        A new directory created to house the new badge image files.

 • app/assets/images/badges/Badge-Good-Reviewer.png

        The image used for the new "Good Reviewer" badge.

 • app/assets/images/badges/Badge-Good-Teammate.png

        The image used for the new "Good Teammate" badge.

 • app/views/assignments/edit/_badges.html.erb

 • spec/features/badge_system_spec.rb

        The file holding the new tests written for the badging system.

 • db/migrate/20171115222415_create_badges.rb

        The migration for the new badges table.

 • db/migrate/20171115224048_create_assignment_badges.rb

        The migration for the new assignment_badges table.

 • db/migrate/20171115230007_create_awarded_badges.rb

        The migration for the new awarded_badges table.

 • app/models/badge.rb

        The model associated with the new badges table.

 • app/models/assignment_badge.rb

        The model associated with the new assignment_badges table.

 • app/models/awarded_badge.rb

        The model associated with the new awarded_badges table.

 • test/fixtures/assignment_badges.yml

 • test/fixtures/awarded_badges.yml

 • test/fixtures/badges.yml

 • test/models/assignment_badge_test.rb

 • test/models/awarded_badge_test.rb

 • test/models/badge_test.rb

</div>

=== Edited Files ===

<div style="padding: 10px 25px 25px 25px">

 • app/controllers/assignment_badges_controller.rb

 • app/controllers/assignments_controller.rb

 • app/controllers/response_controller.rb

 • app/controllers/review_mapping_controller.rb

 • app/models/assignment_form.rb

 • app/models/review_response_map.rb

        The file in which the code for the "Good Reviewer" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/models/teammate_review_response_map.rb

        The file in which the code for the "Good Teammate" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/views/assignments/edit.html.erb

        The UI changes allowing instructors to add and calibrate badges for a given assignment.

 • app/views/assignments/edit/_badges.html.erb

 • app/views/participants/list.html.erb

        The UI changes allowing instructors to view badges for the participants of a given assignment.

 • app/views/participants/_participant.html.erb

 • spec/factories/factories.rb

 • app/views/shared_scripts/_user_list.html.erb

 • app/views/student_task/list.html.erb

        The UI changes allowing students to view their badges for all of their assignments.

 • db/schema.rb

        Incorporating schema changes for the three new badges, assignment_badges, and awarded_badges tables.

</div>

= References =

<div style="padding: 10px 25px 25px 25px">

Videos summarizing the previous team's work on this project topic can be found [https://www.youtube.com/playlist?list=PLdDBHYYDZueeGNdQtzS2FfI-eC0-SK6cb here].

</div>

CSC/ECE 517 Fall 2017/E17A2 Lightweight Badging System

2017-12-02T09:37:42Z

Tmdement: /* Video Demonstrations */

__TOC__

= External Links =

<div style="padding: 10px 25px 25px 25px">

[https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.mo1zn1d9w38l Fall 2017 Final Project Topics]

[https://github.com/pushpendrasp/expertiza/tree/badges Working Repo Branch]

[https://github.com/expertiza/expertiza/pull/1095 Expertiza Pull Request]

</div>

= Team Contact =

<div style="padding: 10px 25px 25px 25px">

; MEMBERS:

:Priyanka Jain: [mailto:pjain15@ncsu.edu pjain15@ncsu.edu]

:Pushpendra Patel: [mailto:ppatel16@ncsu.edu ppatel16@ncsu.edu]

:Tanay Kothari: [mailto:tkothar@ncsu.edu tkothar@ncsu.edu]

:Timothy Dement: [mailto:tmdement@ncsu.edu tmdement@ncsu.edu]

; MENTOR:

:Zhewei Hu: [mailto:zhu6@ncsu.edu zhu6@ncsu.edu]

</div>

= Project Description =

<div style="padding: 10px 25px 25px 25px">


The goal of this project is to create a simple badging system for Expertiza, allowing students to earn badges when they meet certain predefined criteria while using the platform. The full E17A2 project topic description can be found [https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.u6i7q1mdz0zl here]

 

Per the full project topic description, the badges will be designed using [https://credly.com Credly]. Previous work on this project topic revealed that any text included on the badges is too small to read, so all text should be removed from the badges and instead appear when the badges are hovered over.

 

This project is concerned with two preliminary badges — "Good Reviewer" and "Good Teammate" — but the design will be such that the badging system can be easily extended to include more badges in the future. The "Good Reviewer" badge will be awarded to students who receive very high review grades. The "Good Teammate" badge will be awarded to team members who receive very high teammate review scores. By default, the "threshold" for earning these badges will be set to a score of 95, but this value will be configurable on a per-assignment basis by the instructor.

 

A new "Badges" tab will be added for instructors on the "Edit Assignment" page where instructors can add badges and configure the badge criteria for a given assignment. Badges a student has earned can be seen when they view their "Task List" page, and an instructor will be able to view all badges earned by students when they view the "Participants List" page.

 

Please refer to the sections below for further detail.

</div>

= Project Requirements =

<div style="padding: 10px 25px 25px 25px">

1. Create badges using Credly (do not include text)

        1.1. Create the "Good Reviewer" Badge

        1.2. Create the "Good Teammate" Badge

        1.3. Store these badge images in the app/assets/images/badges directory

2. Create tables for the badging system

        2.1. Create a table named badges with the following attributes

                2.1.1. id — primary key

                2.1.2. name — varchar

                2.1.3. description — varchar

        2.2. Create a mapping table named assignment_badges with the following attributes

                2.2.1 id — primary key

                2.2.2 badge_id — foreign key

                2.2.3 assignment_id — foreign key

                2.2.4 threshold — int

        2.3. Create a mapping table named awarded_badges with the following attributes

                2.3.1. id — primary key

                2.3.2. badge_id — foreign key

                2.3.3. participant_id — foreign key

3. Change the UI so that instructors can add, configure, and view badges, and so that students can view their badges

        3.1. Add a new "Badges" tab to the assignments/edit page for instructors to add and configure badges

        3.2. Add badge icons to the participants/list page for instructors to view badges

        3.3. Add badge icons to the student_task/list page for students to view badges

4. Write feature tests to verify the modifications

        4.1. Include tests in the a new badge_system_spec.rb file in the spec/features directory

</div>

= Preliminary Mocks =

=== Badges ===

<div style="padding: 10px 25px 25px 25px">

The following Credly badge will be awarded to students who meet the "Good Reviewer" criterion for a given assignment:

[[File:Badge-Good-Reviewer-Small.png|none|frame|Good Reviewer Badge]]

 The following Credly badge will be awarded to team members who meet the "Good Teammate" criterion for a given assignment:

[[File:Badge-Good-Teammate-Small.png|none|frame|Good Teammate Badge]]

</div>

=== Tables ===

<div style="padding: 10px 25px 25px 25px">

The following is an example of mock data in the badges table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | name (varchar)
! style="padding:10px; text-align: center" | description (varchar)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | Good Reviewer
| style="padding:10px; text-align: center" | This badge is awarded to students who receive very high review grades.
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | Good Teammate
| style="padding:10px; text-align: center" | This badge is awarded to team members who receive very high teammate review scores.
|}

 The following is an example of mock data in the assignment_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | assignment_id (foreign key)
! style="padding:10px; text-align: center" | threshold (int)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 90
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 85
|-
| style="padding:10px; text-align: center" | 5
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 80
|}

The first row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The second row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The third row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 2 with a customized threshold of 90.

The fourth row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 2 with a customized threshold of 85.

The fifth row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 3 with a customized threshold of 80.

 The following is an example of mock data in the awarded_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | participant_id (foreign key)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 3
|}

The first row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The second row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.

The third row represents that the assignment participant with participant_id 2 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The fourth row represents that the assignment participant with participant_id 3 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.
</div>

=== Views ===

<div style="padding:10px 25px 25px 25px">

The following screenshots show a comparison of the existing "Assignments Edit" page, alongside a mockup incorporating the new badging system where instructors can add and configure badges for a given assignment.

 [[File:Original-Assignments-Edit.png|none|frame|The original "Assignments Edit" page.]]

 [[File:Modified-Assignments-Edit.png|none|frame|The modified "Assignments Edit" page.]]

 The following screenshots show a comparison of the existing "Participants List" page, alongside a mockup incorporating the new badging system where instructors can view all awarded badges for a given assignment.

 [[File:Original-Participants-List.png|none|frame|The original "Participants List" page.]]

 [[File:Modified-Participants-List.png|none|frame|The modified "Participants List" page.]]

 The following screenshots show a comparison of the existing "Student Task List" page, alongside a mockup incorporating the new badging system where students can view all of the badges they have earned.

 [[File:Original-Student-Task-List.png|none|frame|The original "Student Task List" page.]]

 [[File:Modified-Student-Task-List.png|none|frame|The modified "Student Task List" page.]]

</div>

= Test Plan =
<div style="padding: 10px 25px 25px 25px">

A new badge_system_spec.rb file will be created in the spec/features folder, and will include feature tests that verify the modifications made for the project.

The following will be our test plan for this project:

<pre>
describe 'Good Reviewer Badge Presence' do

it "should appear on the instructor's participant list when threshold is set below score" do

end

it "should appear on the student's task list when threshold is set below score" do

end

it "should appear on the instructor's participant list when score is set above threshold" do

end

it "should appear on the student's task list when score is set above threshold" do

end

end
</pre>
<pre>
describe 'Good Reviewer Badge Absence' do

it "should not appear on the instructor's participant list when threshold is set above score" do

end

it "should not appear on the student's task list when threshold is set above score" do

end

it "should not appear on the instructor's participant list when score is set below threshold" do

end

it "should not appear on the student's task list when score is set below threshold" do

end

end
</pre>
<pre>
describe 'Good Teammate Badge Presence' do

it "should appear on the instructor's participant list when threshold is set below score" do

end

it "should appear on the student's task list when threshold is set below score" do

end

it "should appear on the instructor's participant list when score is set above threshold" do

end

it "should appear on the student's task list when score is set above threshold" do

end

end
</pre>
<pre>
describe 'Good Teammate Badge Absence' do

it "should not appear on the instructor's participant list when threshold is set above score" do

end

it "should not appear on the student's task list when threshold is set above score" do

end

it "should not appear on the instructor's participant list when score is set below threshold" do

end

it "should not appear on the student's task list when score is set below threshold" do

end

end
</pre>

</div>

= Video Demonstrations =

<div style="padding: 10px 25px 25px 25px">

Please click the image below to watch the video demonstration for this project, which demonstrates that:

* Newly-created assignments are automatically added to the assignment_badges table (one entry for each badge) with default threshold values of 95
* Updating a student's reviewer score appropriately awards or revokes the Good Reviewer badge
* Updating the Good Reviewer badge threshold appropriately awards or revokes the Good Reviewer badge
* Updating a student's teammate review score appropriately awards or revokes the Good Teammate badge
* Updating the Good Teammate badge threshold appropriately awards or revokes the Good Teammate badge

 

[[File:E17A2-Video-Thumb.png]]

</div>

= Files Modified =

=== New Files ===

<div style="padding: 10px 25px 25px 25px">

• app/assets/images/badges

        A new directory created to house the new badge image files.

 • app/assets/images/badges/Badge-Good-Reviewer.png

        The image used for the new "Good Reviewer" badge.

 • app/assets/images/badges/Badge-Good-Teammate.png

        The image used for the new "Good Teammate" badge.

 • app/views/assignments/edit/_badges.html.erb

 • spec/features/badge_system_spec.rb

        The file holding the new tests written for the badging system.

 • db/migrate/20171115222415_create_badges.rb

        The migration for the new badges table.

 • db/migrate/20171115224048_create_assignment_badges.rb

        The migration for the new assignment_badges table.

 • db/migrate/20171115230007_create_awarded_badges.rb

        The migration for the new awarded_badges table.

 • app/models/badge.rb

        The model associated with the new badges table.

 • app/models/assignment_badge.rb

        The model associated with the new assignment_badges table.

 • app/models/awarded_badge.rb

        The model associated with the new awarded_badges table.

 • test/fixtures/assignment_badges.yml

 • test/fixtures/awarded_badges.yml

 • test/fixtures/badges.yml

 • test/models/assignment_badge_test.rb

 • test/models/awarded_badge_test.rb

 • test/models/badge_test.rb

</div>

=== Edited Files ===

<div style="padding: 10px 25px 25px 25px">

 • app/controllers/assignment_badges_controller.rb

 • app/controllers/assignments_controller.rb

 • app/controllers/response_controller.rb

 • app/controllers/review_mapping_controller.rb

 • app/models/assignment_form.rb

 • app/models/review_response_map.rb

        The file in which the code for the "Good Reviewer" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/models/teammate_review_response_map.rb

        The file in which the code for the "Good Teammate" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/views/assignments/edit.html.erb

        The UI changes allowing instructors to add and calibrate badges for a given assignment.

 • app/views/assignments/edit/_badges.html.erb

 • app/views/participants/list.html.erb

        The UI changes allowing instructors to view badges for the participants of a given assignment.

 • app/views/participants/_participant.html.erb

 • spec/factories/factories.rb

 • app/views/shared_scripts/_user_list.html.erb

 • app/views/student_task/list.html.erb

        The UI changes allowing students to view their badges for all of their assignments.

 • db/schema.rb

        Incorporating schema changes for the three new badges, assignment_badges, and awarded_badges tables.

</div>

= References =

<div style="padding: 10px 25px 25px 25px">

Videos summarizing the previous team's work on this project topic can be found [https://www.youtube.com/playlist?list=PLdDBHYYDZueeGNdQtzS2FfI-eC0-SK6cb here].

</div>

CSC/ECE 517 Fall 2017/E17A2 Lightweight Badging System

2017-12-02T09:37:13Z

Tmdement: /* Video Demonstrations */

__TOC__

= External Links =

<div style="padding: 10px 25px 25px 25px">

[https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.mo1zn1d9w38l Fall 2017 Final Project Topics]

[https://github.com/pushpendrasp/expertiza/tree/badges Working Repo Branch]

[https://github.com/expertiza/expertiza/pull/1095 Expertiza Pull Request]

</div>

= Team Contact =

<div style="padding: 10px 25px 25px 25px">

; MEMBERS:

:Priyanka Jain: [mailto:pjain15@ncsu.edu pjain15@ncsu.edu]

:Pushpendra Patel: [mailto:ppatel16@ncsu.edu ppatel16@ncsu.edu]

:Tanay Kothari: [mailto:tkothar@ncsu.edu tkothar@ncsu.edu]

:Timothy Dement: [mailto:tmdement@ncsu.edu tmdement@ncsu.edu]

; MENTOR:

:Zhewei Hu: [mailto:zhu6@ncsu.edu zhu6@ncsu.edu]

</div>

= Project Description =

<div style="padding: 10px 25px 25px 25px">


The goal of this project is to create a simple badging system for Expertiza, allowing students to earn badges when they meet certain predefined criteria while using the platform. The full E17A2 project topic description can be found [https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.u6i7q1mdz0zl here]

 

Per the full project topic description, the badges will be designed using [https://credly.com Credly]. Previous work on this project topic revealed that any text included on the badges is too small to read, so all text should be removed from the badges and instead appear when the badges are hovered over.

 

This project is concerned with two preliminary badges — "Good Reviewer" and "Good Teammate" — but the design will be such that the badging system can be easily extended to include more badges in the future. The "Good Reviewer" badge will be awarded to students who receive very high review grades. The "Good Teammate" badge will be awarded to team members who receive very high teammate review scores. By default, the "threshold" for earning these badges will be set to a score of 95, but this value will be configurable on a per-assignment basis by the instructor.

 

A new "Badges" tab will be added for instructors on the "Edit Assignment" page where instructors can add badges and configure the badge criteria for a given assignment. Badges a student has earned can be seen when they view their "Task List" page, and an instructor will be able to view all badges earned by students when they view the "Participants List" page.

 

Please refer to the sections below for further detail.

</div>

= Project Requirements =

<div style="padding: 10px 25px 25px 25px">

1. Create badges using Credly (do not include text)

        1.1. Create the "Good Reviewer" Badge

        1.2. Create the "Good Teammate" Badge

        1.3. Store these badge images in the app/assets/images/badges directory

2. Create tables for the badging system

        2.1. Create a table named badges with the following attributes

                2.1.1. id — primary key

                2.1.2. name — varchar

                2.1.3. description — varchar

        2.2. Create a mapping table named assignment_badges with the following attributes

                2.2.1 id — primary key

                2.2.2 badge_id — foreign key

                2.2.3 assignment_id — foreign key

                2.2.4 threshold — int

        2.3. Create a mapping table named awarded_badges with the following attributes

                2.3.1. id — primary key

                2.3.2. badge_id — foreign key

                2.3.3. participant_id — foreign key

3. Change the UI so that instructors can add, configure, and view badges, and so that students can view their badges

        3.1. Add a new "Badges" tab to the assignments/edit page for instructors to add and configure badges

        3.2. Add badge icons to the participants/list page for instructors to view badges

        3.3. Add badge icons to the student_task/list page for students to view badges

4. Write feature tests to verify the modifications

        4.1. Include tests in the a new badge_system_spec.rb file in the spec/features directory

</div>

= Preliminary Mocks =

=== Badges ===

<div style="padding: 10px 25px 25px 25px">

The following Credly badge will be awarded to students who meet the "Good Reviewer" criterion for a given assignment:

[[File:Badge-Good-Reviewer-Small.png|none|frame|Good Reviewer Badge]]

 The following Credly badge will be awarded to team members who meet the "Good Teammate" criterion for a given assignment:

[[File:Badge-Good-Teammate-Small.png|none|frame|Good Teammate Badge]]

</div>

=== Tables ===

<div style="padding: 10px 25px 25px 25px">

The following is an example of mock data in the badges table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | name (varchar)
! style="padding:10px; text-align: center" | description (varchar)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | Good Reviewer
| style="padding:10px; text-align: center" | This badge is awarded to students who receive very high review grades.
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | Good Teammate
| style="padding:10px; text-align: center" | This badge is awarded to team members who receive very high teammate review scores.
|}

 The following is an example of mock data in the assignment_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | assignment_id (foreign key)
! style="padding:10px; text-align: center" | threshold (int)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 90
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 85
|-
| style="padding:10px; text-align: center" | 5
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 80
|}

The first row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The second row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The third row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 2 with a customized threshold of 90.

The fourth row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 2 with a customized threshold of 85.

The fifth row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 3 with a customized threshold of 80.

 The following is an example of mock data in the awarded_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | participant_id (foreign key)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 3
|}

The first row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The second row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.

The third row represents that the assignment participant with participant_id 2 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The fourth row represents that the assignment participant with participant_id 3 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.
</div>

=== Views ===

<div style="padding:10px 25px 25px 25px">

The following screenshots show a comparison of the existing "Assignments Edit" page, alongside a mockup incorporating the new badging system where instructors can add and configure badges for a given assignment.

 [[File:Original-Assignments-Edit.png|none|frame|The original "Assignments Edit" page.]]

 [[File:Modified-Assignments-Edit.png|none|frame|The modified "Assignments Edit" page.]]

 The following screenshots show a comparison of the existing "Participants List" page, alongside a mockup incorporating the new badging system where instructors can view all awarded badges for a given assignment.

 [[File:Original-Participants-List.png|none|frame|The original "Participants List" page.]]

 [[File:Modified-Participants-List.png|none|frame|The modified "Participants List" page.]]

 The following screenshots show a comparison of the existing "Student Task List" page, alongside a mockup incorporating the new badging system where students can view all of the badges they have earned.

 [[File:Original-Student-Task-List.png|none|frame|The original "Student Task List" page.]]

 [[File:Modified-Student-Task-List.png|none|frame|The modified "Student Task List" page.]]

</div>

= Test Plan =
<div style="padding: 10px 25px 25px 25px">

A new badge_system_spec.rb file will be created in the spec/features folder, and will include feature tests that verify the modifications made for the project.

The following will be our test plan for this project:

<pre>
describe 'Good Reviewer Badge Presence' do

it "should appear on the instructor's participant list when threshold is set below score" do

end

it "should appear on the student's task list when threshold is set below score" do

end

it "should appear on the instructor's participant list when score is set above threshold" do

end

it "should appear on the student's task list when score is set above threshold" do

end

end
</pre>
<pre>
describe 'Good Reviewer Badge Absence' do

it "should not appear on the instructor's participant list when threshold is set above score" do

end

it "should not appear on the student's task list when threshold is set above score" do

end

it "should not appear on the instructor's participant list when score is set below threshold" do

end

it "should not appear on the student's task list when score is set below threshold" do

end

end
</pre>
<pre>
describe 'Good Teammate Badge Presence' do

it "should appear on the instructor's participant list when threshold is set below score" do

end

it "should appear on the student's task list when threshold is set below score" do

end

it "should appear on the instructor's participant list when score is set above threshold" do

end

it "should appear on the student's task list when score is set above threshold" do

end

end
</pre>
<pre>
describe 'Good Teammate Badge Absence' do

it "should not appear on the instructor's participant list when threshold is set above score" do

end

it "should not appear on the student's task list when threshold is set above score" do

end

it "should not appear on the instructor's participant list when score is set below threshold" do

end

it "should not appear on the student's task list when score is set below threshold" do

end

end
</pre>

</div>

= Video Demonstrations =

<div style="padding: 10px 25px 25px 25px">

Please click the image below to watch the video demonstration for this project, which demonstrates that:

* Newly-created assignments are automatically added to the assignment_badges table (one entry for each badge) with default threshold values of 95
* Updating a student's reviewer score appropriately awards or revokes the Good Reviewer badge
* Updating the Good Reviewer badge threshold appropriately awards or revokes the Good Reviewer badge
* Updating a student's teammate review score appropriately awards or revokes the Good Teammate badge
* Updating the Good Teammate badge threshold appropriately awards or revokes the Good Teammate badge

 

[[File:E17A2-Video-Thumb.png]]

</div>

= Files Modified =

=== New Files ===

<div style="padding: 10px 25px 25px 25px">

• app/assets/images/badges

        A new directory created to house the new badge image files.

 • app/assets/images/badges/Badge-Good-Reviewer.png

        The image used for the new "Good Reviewer" badge.

 • app/assets/images/badges/Badge-Good-Teammate.png

        The image used for the new "Good Teammate" badge.

 • app/views/assignments/edit/_badges.html.erb

 • spec/features/badge_system_spec.rb

        The file holding the new tests written for the badging system.

 • db/migrate/20171115222415_create_badges.rb

        The migration for the new badges table.

 • db/migrate/20171115224048_create_assignment_badges.rb

        The migration for the new assignment_badges table.

 • db/migrate/20171115230007_create_awarded_badges.rb

        The migration for the new awarded_badges table.

 • app/models/badge.rb

        The model associated with the new badges table.

 • app/models/assignment_badge.rb

        The model associated with the new assignment_badges table.

 • app/models/awarded_badge.rb

        The model associated with the new awarded_badges table.

 • test/fixtures/assignment_badges.yml

 • test/fixtures/awarded_badges.yml

 • test/fixtures/badges.yml

 • test/models/assignment_badge_test.rb

 • test/models/awarded_badge_test.rb

 • test/models/badge_test.rb

</div>

=== Edited Files ===

<div style="padding: 10px 25px 25px 25px">

 • app/controllers/assignment_badges_controller.rb

 • app/controllers/assignments_controller.rb

 • app/controllers/response_controller.rb

 • app/controllers/review_mapping_controller.rb

 • app/models/assignment_form.rb

 • app/models/review_response_map.rb

        The file in which the code for the "Good Reviewer" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/models/teammate_review_response_map.rb

        The file in which the code for the "Good Teammate" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/views/assignments/edit.html.erb

        The UI changes allowing instructors to add and calibrate badges for a given assignment.

 • app/views/assignments/edit/_badges.html.erb

 • app/views/participants/list.html.erb

        The UI changes allowing instructors to view badges for the participants of a given assignment.

 • app/views/participants/_participant.html.erb

 • spec/factories/factories.rb

 • app/views/shared_scripts/_user_list.html.erb

 • app/views/student_task/list.html.erb

        The UI changes allowing students to view their badges for all of their assignments.

 • db/schema.rb

        Incorporating schema changes for the three new badges, assignment_badges, and awarded_badges tables.

</div>

= References =

<div style="padding: 10px 25px 25px 25px">

Videos summarizing the previous team's work on this project topic can be found [https://www.youtube.com/playlist?list=PLdDBHYYDZueeGNdQtzS2FfI-eC0-SK6cb here].

</div>

CSC/ECE 517 Fall 2017/E17A2 Lightweight Badging System

2017-12-02T09:36:57Z

Tmdement: /* Video Demonstrations */

__TOC__

= External Links =

<div style="padding: 10px 25px 25px 25px">

[https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.mo1zn1d9w38l Fall 2017 Final Project Topics]

[https://github.com/pushpendrasp/expertiza/tree/badges Working Repo Branch]

[https://github.com/expertiza/expertiza/pull/1095 Expertiza Pull Request]

</div>

= Team Contact =

<div style="padding: 10px 25px 25px 25px">

; MEMBERS:

:Priyanka Jain: [mailto:pjain15@ncsu.edu pjain15@ncsu.edu]

:Pushpendra Patel: [mailto:ppatel16@ncsu.edu ppatel16@ncsu.edu]

:Tanay Kothari: [mailto:tkothar@ncsu.edu tkothar@ncsu.edu]

:Timothy Dement: [mailto:tmdement@ncsu.edu tmdement@ncsu.edu]

; MENTOR:

:Zhewei Hu: [mailto:zhu6@ncsu.edu zhu6@ncsu.edu]

</div>

= Project Description =

<div style="padding: 10px 25px 25px 25px">


The goal of this project is to create a simple badging system for Expertiza, allowing students to earn badges when they meet certain predefined criteria while using the platform. The full E17A2 project topic description can be found [https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.u6i7q1mdz0zl here]

 

Per the full project topic description, the badges will be designed using [https://credly.com Credly]. Previous work on this project topic revealed that any text included on the badges is too small to read, so all text should be removed from the badges and instead appear when the badges are hovered over.

 

This project is concerned with two preliminary badges — "Good Reviewer" and "Good Teammate" — but the design will be such that the badging system can be easily extended to include more badges in the future. The "Good Reviewer" badge will be awarded to students who receive very high review grades. The "Good Teammate" badge will be awarded to team members who receive very high teammate review scores. By default, the "threshold" for earning these badges will be set to a score of 95, but this value will be configurable on a per-assignment basis by the instructor.

 

A new "Badges" tab will be added for instructors on the "Edit Assignment" page where instructors can add badges and configure the badge criteria for a given assignment. Badges a student has earned can be seen when they view their "Task List" page, and an instructor will be able to view all badges earned by students when they view the "Participants List" page.

 

Please refer to the sections below for further detail.

</div>

= Project Requirements =

<div style="padding: 10px 25px 25px 25px">

1. Create badges using Credly (do not include text)

        1.1. Create the "Good Reviewer" Badge

        1.2. Create the "Good Teammate" Badge

        1.3. Store these badge images in the app/assets/images/badges directory

2. Create tables for the badging system

        2.1. Create a table named badges with the following attributes

                2.1.1. id — primary key

                2.1.2. name — varchar

                2.1.3. description — varchar

        2.2. Create a mapping table named assignment_badges with the following attributes

                2.2.1 id — primary key

                2.2.2 badge_id — foreign key

                2.2.3 assignment_id — foreign key

                2.2.4 threshold — int

        2.3. Create a mapping table named awarded_badges with the following attributes

                2.3.1. id — primary key

                2.3.2. badge_id — foreign key

                2.3.3. participant_id — foreign key

3. Change the UI so that instructors can add, configure, and view badges, and so that students can view their badges

        3.1. Add a new "Badges" tab to the assignments/edit page for instructors to add and configure badges

        3.2. Add badge icons to the participants/list page for instructors to view badges

        3.3. Add badge icons to the student_task/list page for students to view badges

4. Write feature tests to verify the modifications

        4.1. Include tests in the a new badge_system_spec.rb file in the spec/features directory

</div>

= Preliminary Mocks =

=== Badges ===

<div style="padding: 10px 25px 25px 25px">

The following Credly badge will be awarded to students who meet the "Good Reviewer" criterion for a given assignment:

[[File:Badge-Good-Reviewer-Small.png|none|frame|Good Reviewer Badge]]

 The following Credly badge will be awarded to team members who meet the "Good Teammate" criterion for a given assignment:

[[File:Badge-Good-Teammate-Small.png|none|frame|Good Teammate Badge]]

</div>

=== Tables ===

<div style="padding: 10px 25px 25px 25px">

The following is an example of mock data in the badges table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | name (varchar)
! style="padding:10px; text-align: center" | description (varchar)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | Good Reviewer
| style="padding:10px; text-align: center" | This badge is awarded to students who receive very high review grades.
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | Good Teammate
| style="padding:10px; text-align: center" | This badge is awarded to team members who receive very high teammate review scores.
|}

 The following is an example of mock data in the assignment_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | assignment_id (foreign key)
! style="padding:10px; text-align: center" | threshold (int)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 90
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 85
|-
| style="padding:10px; text-align: center" | 5
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 80
|}

The first row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The second row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The third row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 2 with a customized threshold of 90.

The fourth row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 2 with a customized threshold of 85.

The fifth row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 3 with a customized threshold of 80.

 The following is an example of mock data in the awarded_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | participant_id (foreign key)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 3
|}

The first row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The second row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.

The third row represents that the assignment participant with participant_id 2 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The fourth row represents that the assignment participant with participant_id 3 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.
</div>

=== Views ===

<div style="padding:10px 25px 25px 25px">

The following screenshots show a comparison of the existing "Assignments Edit" page, alongside a mockup incorporating the new badging system where instructors can add and configure badges for a given assignment.

 [[File:Original-Assignments-Edit.png|none|frame|The original "Assignments Edit" page.]]

 [[File:Modified-Assignments-Edit.png|none|frame|The modified "Assignments Edit" page.]]

 The following screenshots show a comparison of the existing "Participants List" page, alongside a mockup incorporating the new badging system where instructors can view all awarded badges for a given assignment.

 [[File:Original-Participants-List.png|none|frame|The original "Participants List" page.]]

 [[File:Modified-Participants-List.png|none|frame|The modified "Participants List" page.]]

 The following screenshots show a comparison of the existing "Student Task List" page, alongside a mockup incorporating the new badging system where students can view all of the badges they have earned.

 [[File:Original-Student-Task-List.png|none|frame|The original "Student Task List" page.]]

 [[File:Modified-Student-Task-List.png|none|frame|The modified "Student Task List" page.]]

</div>

= Test Plan =
<div style="padding: 10px 25px 25px 25px">

A new badge_system_spec.rb file will be created in the spec/features folder, and will include feature tests that verify the modifications made for the project.

The following will be our test plan for this project:

<pre>
describe 'Good Reviewer Badge Presence' do

it "should appear on the instructor's participant list when threshold is set below score" do

end

it "should appear on the student's task list when threshold is set below score" do

end

it "should appear on the instructor's participant list when score is set above threshold" do

end

it "should appear on the student's task list when score is set above threshold" do

end

end
</pre>
<pre>
describe 'Good Reviewer Badge Absence' do

it "should not appear on the instructor's participant list when threshold is set above score" do

end

it "should not appear on the student's task list when threshold is set above score" do

end

it "should not appear on the instructor's participant list when score is set below threshold" do

end

it "should not appear on the student's task list when score is set below threshold" do

end

end
</pre>
<pre>
describe 'Good Teammate Badge Presence' do

it "should appear on the instructor's participant list when threshold is set below score" do

end

it "should appear on the student's task list when threshold is set below score" do

end

it "should appear on the instructor's participant list when score is set above threshold" do

end

it "should appear on the student's task list when score is set above threshold" do

end

end
</pre>
<pre>
describe 'Good Teammate Badge Absence' do

it "should not appear on the instructor's participant list when threshold is set above score" do

end

it "should not appear on the student's task list when threshold is set above score" do

end

it "should not appear on the instructor's participant list when score is set below threshold" do

end

it "should not appear on the student's task list when score is set below threshold" do

end

end
</pre>

</div>

= Video Demonstrations =

<div style="padding: 10px 25px 25px 25px">

Please click the image below to watch the video demonstration for this project, which demonstrates that:

* Newly-created assignments are automatically added to the assignment_badges table (one entry for each badge) with default threshold values of 95
* Updating a student's reviewer score appropriately awards or revokes the Good Reviewer badge
* Updating the Good Reviewer badge threshold appropriately awards or revokes the Good Reviewer badge
* Updating a student's teammate review score appropriately awards or revokes the Good Teammate badge
* Updating the Good Teammate badge threshold appropriately awards or revokes the Good Teammate badge

[[File:E17A2-Video-Thumb.png]]

</div>

= Files Modified =

=== New Files ===

<div style="padding: 10px 25px 25px 25px">

• app/assets/images/badges

        A new directory created to house the new badge image files.

 • app/assets/images/badges/Badge-Good-Reviewer.png

        The image used for the new "Good Reviewer" badge.

 • app/assets/images/badges/Badge-Good-Teammate.png

        The image used for the new "Good Teammate" badge.

 • app/views/assignments/edit/_badges.html.erb

 • spec/features/badge_system_spec.rb

        The file holding the new tests written for the badging system.

 • db/migrate/20171115222415_create_badges.rb

        The migration for the new badges table.

 • db/migrate/20171115224048_create_assignment_badges.rb

        The migration for the new assignment_badges table.

 • db/migrate/20171115230007_create_awarded_badges.rb

        The migration for the new awarded_badges table.

 • app/models/badge.rb

        The model associated with the new badges table.

 • app/models/assignment_badge.rb

        The model associated with the new assignment_badges table.

 • app/models/awarded_badge.rb

        The model associated with the new awarded_badges table.

 • test/fixtures/assignment_badges.yml

 • test/fixtures/awarded_badges.yml

 • test/fixtures/badges.yml

 • test/models/assignment_badge_test.rb

 • test/models/awarded_badge_test.rb

 • test/models/badge_test.rb

</div>

=== Edited Files ===

<div style="padding: 10px 25px 25px 25px">

 • app/controllers/assignment_badges_controller.rb

 • app/controllers/assignments_controller.rb

 • app/controllers/response_controller.rb

 • app/controllers/review_mapping_controller.rb

 • app/models/assignment_form.rb

 • app/models/review_response_map.rb

        The file in which the code for the "Good Reviewer" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/models/teammate_review_response_map.rb

        The file in which the code for the "Good Teammate" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/views/assignments/edit.html.erb

        The UI changes allowing instructors to add and calibrate badges for a given assignment.

 • app/views/assignments/edit/_badges.html.erb

 • app/views/participants/list.html.erb

        The UI changes allowing instructors to view badges for the participants of a given assignment.

 • app/views/participants/_participant.html.erb

 • spec/factories/factories.rb

 • app/views/shared_scripts/_user_list.html.erb

 • app/views/student_task/list.html.erb

        The UI changes allowing students to view their badges for all of their assignments.

 • db/schema.rb

        Incorporating schema changes for the three new badges, assignment_badges, and awarded_badges tables.

</div>

= References =

<div style="padding: 10px 25px 25px 25px">

Videos summarizing the previous team's work on this project topic can be found [https://www.youtube.com/playlist?list=PLdDBHYYDZueeGNdQtzS2FfI-eC0-SK6cb here].

</div>

CSC/ECE 517 Fall 2017/E17A2 Lightweight Badging System

2017-12-02T09:31:00Z

Tmdement: /* Video Demonstrations */

__TOC__

= External Links =

<div style="padding: 10px 25px 25px 25px">

[https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.mo1zn1d9w38l Fall 2017 Final Project Topics]

[https://github.com/pushpendrasp/expertiza/tree/badges Working Repo Branch]

[https://github.com/expertiza/expertiza/pull/1095 Expertiza Pull Request]

</div>

= Team Contact =

<div style="padding: 10px 25px 25px 25px">

; MEMBERS:

:Priyanka Jain: [mailto:pjain15@ncsu.edu pjain15@ncsu.edu]

:Pushpendra Patel: [mailto:ppatel16@ncsu.edu ppatel16@ncsu.edu]

:Tanay Kothari: [mailto:tkothar@ncsu.edu tkothar@ncsu.edu]

:Timothy Dement: [mailto:tmdement@ncsu.edu tmdement@ncsu.edu]

; MENTOR:

:Zhewei Hu: [mailto:zhu6@ncsu.edu zhu6@ncsu.edu]

</div>

= Project Description =

<div style="padding: 10px 25px 25px 25px">


The goal of this project is to create a simple badging system for Expertiza, allowing students to earn badges when they meet certain predefined criteria while using the platform. The full E17A2 project topic description can be found [https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.u6i7q1mdz0zl here]

 

Per the full project topic description, the badges will be designed using [https://credly.com Credly]. Previous work on this project topic revealed that any text included on the badges is too small to read, so all text should be removed from the badges and instead appear when the badges are hovered over.

 

This project is concerned with two preliminary badges — "Good Reviewer" and "Good Teammate" — but the design will be such that the badging system can be easily extended to include more badges in the future. The "Good Reviewer" badge will be awarded to students who receive very high review grades. The "Good Teammate" badge will be awarded to team members who receive very high teammate review scores. By default, the "threshold" for earning these badges will be set to a score of 95, but this value will be configurable on a per-assignment basis by the instructor.

 

A new "Badges" tab will be added for instructors on the "Edit Assignment" page where instructors can add badges and configure the badge criteria for a given assignment. Badges a student has earned can be seen when they view their "Task List" page, and an instructor will be able to view all badges earned by students when they view the "Participants List" page.

 

Please refer to the sections below for further detail.

</div>

= Project Requirements =

<div style="padding: 10px 25px 25px 25px">

1. Create badges using Credly (do not include text)

        1.1. Create the "Good Reviewer" Badge

        1.2. Create the "Good Teammate" Badge

        1.3. Store these badge images in the app/assets/images/badges directory

2. Create tables for the badging system

        2.1. Create a table named badges with the following attributes

                2.1.1. id — primary key

                2.1.2. name — varchar

                2.1.3. description — varchar

        2.2. Create a mapping table named assignment_badges with the following attributes

                2.2.1 id — primary key

                2.2.2 badge_id — foreign key

                2.2.3 assignment_id — foreign key

                2.2.4 threshold — int

        2.3. Create a mapping table named awarded_badges with the following attributes

                2.3.1. id — primary key

                2.3.2. badge_id — foreign key

                2.3.3. participant_id — foreign key

3. Change the UI so that instructors can add, configure, and view badges, and so that students can view their badges

        3.1. Add a new "Badges" tab to the assignments/edit page for instructors to add and configure badges

        3.2. Add badge icons to the participants/list page for instructors to view badges

        3.3. Add badge icons to the student_task/list page for students to view badges

4. Write feature tests to verify the modifications

        4.1. Include tests in the a new badge_system_spec.rb file in the spec/features directory

</div>

= Preliminary Mocks =

=== Badges ===

<div style="padding: 10px 25px 25px 25px">

The following Credly badge will be awarded to students who meet the "Good Reviewer" criterion for a given assignment:

[[File:Badge-Good-Reviewer-Small.png|none|frame|Good Reviewer Badge]]

 The following Credly badge will be awarded to team members who meet the "Good Teammate" criterion for a given assignment:

[[File:Badge-Good-Teammate-Small.png|none|frame|Good Teammate Badge]]

</div>

=== Tables ===

<div style="padding: 10px 25px 25px 25px">

The following is an example of mock data in the badges table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | name (varchar)
! style="padding:10px; text-align: center" | description (varchar)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | Good Reviewer
| style="padding:10px; text-align: center" | This badge is awarded to students who receive very high review grades.
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | Good Teammate
| style="padding:10px; text-align: center" | This badge is awarded to team members who receive very high teammate review scores.
|}

 The following is an example of mock data in the assignment_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | assignment_id (foreign key)
! style="padding:10px; text-align: center" | threshold (int)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 90
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 85
|-
| style="padding:10px; text-align: center" | 5
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 80
|}

The first row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The second row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The third row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 2 with a customized threshold of 90.

The fourth row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 2 with a customized threshold of 85.

The fifth row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 3 with a customized threshold of 80.

 The following is an example of mock data in the awarded_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | participant_id (foreign key)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 3
|}

The first row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The second row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.

The third row represents that the assignment participant with participant_id 2 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The fourth row represents that the assignment participant with participant_id 3 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.
</div>

=== Views ===

<div style="padding:10px 25px 25px 25px">

The following screenshots show a comparison of the existing "Assignments Edit" page, alongside a mockup incorporating the new badging system where instructors can add and configure badges for a given assignment.

 [[File:Original-Assignments-Edit.png|none|frame|The original "Assignments Edit" page.]]

 [[File:Modified-Assignments-Edit.png|none|frame|The modified "Assignments Edit" page.]]

 The following screenshots show a comparison of the existing "Participants List" page, alongside a mockup incorporating the new badging system where instructors can view all awarded badges for a given assignment.

 [[File:Original-Participants-List.png|none|frame|The original "Participants List" page.]]

 [[File:Modified-Participants-List.png|none|frame|The modified "Participants List" page.]]

 The following screenshots show a comparison of the existing "Student Task List" page, alongside a mockup incorporating the new badging system where students can view all of the badges they have earned.

 [[File:Original-Student-Task-List.png|none|frame|The original "Student Task List" page.]]

 [[File:Modified-Student-Task-List.png|none|frame|The modified "Student Task List" page.]]

</div>

= Test Plan =
<div style="padding: 10px 25px 25px 25px">

A new badge_system_spec.rb file will be created in the spec/features folder, and will include feature tests that verify the modifications made for the project.

The following will be our test plan for this project:

<pre>
describe 'Good Reviewer Badge Presence' do

it "should appear on the instructor's participant list when threshold is set below score" do

end

it "should appear on the student's task list when threshold is set below score" do

end

it "should appear on the instructor's participant list when score is set above threshold" do

end

it "should appear on the student's task list when score is set above threshold" do

end

end
</pre>
<pre>
describe 'Good Reviewer Badge Absence' do

it "should not appear on the instructor's participant list when threshold is set above score" do

end

it "should not appear on the student's task list when threshold is set above score" do

end

it "should not appear on the instructor's participant list when score is set below threshold" do

end

it "should not appear on the student's task list when score is set below threshold" do

end

end
</pre>
<pre>
describe 'Good Teammate Badge Presence' do

it "should appear on the instructor's participant list when threshold is set below score" do

end

it "should appear on the student's task list when threshold is set below score" do

end

it "should appear on the instructor's participant list when score is set above threshold" do

end

it "should appear on the student's task list when score is set above threshold" do

end

end
</pre>
<pre>
describe 'Good Teammate Badge Absence' do

it "should not appear on the instructor's participant list when threshold is set above score" do

end

it "should not appear on the student's task list when threshold is set above score" do

end

it "should not appear on the instructor's participant list when score is set below threshold" do

end

it "should not appear on the student's task list when score is set below threshold" do

end

end
</pre>

</div>

= Video Demonstrations =

<div style="padding: 10px 25px 25px 25px">

[[File:E17A2-Video-Thumb.png]]

NOTE: More information will be included in this section as the project progresses.

</div>

= Files Modified =

=== New Files ===

<div style="padding: 10px 25px 25px 25px">

• app/assets/images/badges

        A new directory created to house the new badge image files.

 • app/assets/images/badges/Badge-Good-Reviewer.png

        The image used for the new "Good Reviewer" badge.

 • app/assets/images/badges/Badge-Good-Teammate.png

        The image used for the new "Good Teammate" badge.

 • app/views/assignments/edit/_badges.html.erb

 • spec/features/badge_system_spec.rb

        The file holding the new tests written for the badging system.

 • db/migrate/20171115222415_create_badges.rb

        The migration for the new badges table.

 • db/migrate/20171115224048_create_assignment_badges.rb

        The migration for the new assignment_badges table.

 • db/migrate/20171115230007_create_awarded_badges.rb

        The migration for the new awarded_badges table.

 • app/models/badge.rb

        The model associated with the new badges table.

 • app/models/assignment_badge.rb

        The model associated with the new assignment_badges table.

 • app/models/awarded_badge.rb

        The model associated with the new awarded_badges table.

 • test/fixtures/assignment_badges.yml

 • test/fixtures/awarded_badges.yml

 • test/fixtures/badges.yml

 • test/models/assignment_badge_test.rb

 • test/models/awarded_badge_test.rb

 • test/models/badge_test.rb

</div>

=== Edited Files ===

<div style="padding: 10px 25px 25px 25px">

 • app/controllers/assignment_badges_controller.rb

 • app/controllers/assignments_controller.rb

 • app/controllers/response_controller.rb

 • app/controllers/review_mapping_controller.rb

 • app/models/assignment_form.rb

 • app/models/review_response_map.rb

        The file in which the code for the "Good Reviewer" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/models/teammate_review_response_map.rb

        The file in which the code for the "Good Teammate" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/views/assignments/edit.html.erb

        The UI changes allowing instructors to add and calibrate badges for a given assignment.

 • app/views/assignments/edit/_badges.html.erb

 • app/views/participants/list.html.erb

        The UI changes allowing instructors to view badges for the participants of a given assignment.

 • app/views/participants/_participant.html.erb

 • spec/factories/factories.rb

 • app/views/shared_scripts/_user_list.html.erb

 • app/views/student_task/list.html.erb

        The UI changes allowing students to view their badges for all of their assignments.

 • db/schema.rb

        Incorporating schema changes for the three new badges, assignment_badges, and awarded_badges tables.

</div>

= References =

<div style="padding: 10px 25px 25px 25px">

Videos summarizing the previous team's work on this project topic can be found [https://www.youtube.com/playlist?list=PLdDBHYYDZueeGNdQtzS2FfI-eC0-SK6cb here].

</div>

File:E17A2-Video-Thumb.png

2017-12-02T09:30:28Z

Tmdement:

CSC/ECE 517 Fall 2017/E17A2 Lightweight Badging System

2017-12-02T07:43:02Z

Tmdement: /* Test Plan */

__TOC__

= External Links =

<div style="padding: 10px 25px 25px 25px">

[https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.mo1zn1d9w38l Fall 2017 Final Project Topics]

[https://github.com/pushpendrasp/expertiza/tree/badges Working Repo Branch]

[https://github.com/expertiza/expertiza/pull/1095 Expertiza Pull Request]

</div>

= Team Contact =

<div style="padding: 10px 25px 25px 25px">

; MEMBERS:

:Priyanka Jain: [mailto:pjain15@ncsu.edu pjain15@ncsu.edu]

:Pushpendra Patel: [mailto:ppatel16@ncsu.edu ppatel16@ncsu.edu]

:Tanay Kothari: [mailto:tkothar@ncsu.edu tkothar@ncsu.edu]

:Timothy Dement: [mailto:tmdement@ncsu.edu tmdement@ncsu.edu]

; MENTOR:

:Zhewei Hu: [mailto:zhu6@ncsu.edu zhu6@ncsu.edu]

</div>

= Project Description =

<div style="padding: 10px 25px 25px 25px">


The goal of this project is to create a simple badging system for Expertiza, allowing students to earn badges when they meet certain predefined criteria while using the platform. The full E17A2 project topic description can be found [https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.u6i7q1mdz0zl here]

 

Per the full project topic description, the badges will be designed using [https://credly.com Credly]. Previous work on this project topic revealed that any text included on the badges is too small to read, so all text should be removed from the badges and instead appear when the badges are hovered over.

 

This project is concerned with two preliminary badges — "Good Reviewer" and "Good Teammate" — but the design will be such that the badging system can be easily extended to include more badges in the future. The "Good Reviewer" badge will be awarded to students who receive very high review grades. The "Good Teammate" badge will be awarded to team members who receive very high teammate review scores. By default, the "threshold" for earning these badges will be set to a score of 95, but this value will be configurable on a per-assignment basis by the instructor.

 

A new "Badges" tab will be added for instructors on the "Edit Assignment" page where instructors can add badges and configure the badge criteria for a given assignment. Badges a student has earned can be seen when they view their "Task List" page, and an instructor will be able to view all badges earned by students when they view the "Participants List" page.

 

Please refer to the sections below for further detail.

</div>

= Project Requirements =

<div style="padding: 10px 25px 25px 25px">

1. Create badges using Credly (do not include text)

        1.1. Create the "Good Reviewer" Badge

        1.2. Create the "Good Teammate" Badge

        1.3. Store these badge images in the app/assets/images/badges directory

2. Create tables for the badging system

        2.1. Create a table named badges with the following attributes

                2.1.1. id — primary key

                2.1.2. name — varchar

                2.1.3. description — varchar

        2.2. Create a mapping table named assignment_badges with the following attributes

                2.2.1 id — primary key

                2.2.2 badge_id — foreign key

                2.2.3 assignment_id — foreign key

                2.2.4 threshold — int

        2.3. Create a mapping table named awarded_badges with the following attributes

                2.3.1. id — primary key

                2.3.2. badge_id — foreign key

                2.3.3. participant_id — foreign key

3. Change the UI so that instructors can add, configure, and view badges, and so that students can view their badges

        3.1. Add a new "Badges" tab to the assignments/edit page for instructors to add and configure badges

        3.2. Add badge icons to the participants/list page for instructors to view badges

        3.3. Add badge icons to the student_task/list page for students to view badges

4. Write feature tests to verify the modifications

        4.1. Include tests in the a new badge_system_spec.rb file in the spec/features directory

</div>

= Preliminary Mocks =

=== Badges ===

<div style="padding: 10px 25px 25px 25px">

The following Credly badge will be awarded to students who meet the "Good Reviewer" criterion for a given assignment:

[[File:Badge-Good-Reviewer-Small.png|none|frame|Good Reviewer Badge]]

 The following Credly badge will be awarded to team members who meet the "Good Teammate" criterion for a given assignment:

[[File:Badge-Good-Teammate-Small.png|none|frame|Good Teammate Badge]]

</div>

=== Tables ===

<div style="padding: 10px 25px 25px 25px">

The following is an example of mock data in the badges table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | name (varchar)
! style="padding:10px; text-align: center" | description (varchar)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | Good Reviewer
| style="padding:10px; text-align: center" | This badge is awarded to students who receive very high review grades.
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | Good Teammate
| style="padding:10px; text-align: center" | This badge is awarded to team members who receive very high teammate review scores.
|}

 The following is an example of mock data in the assignment_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | assignment_id (foreign key)
! style="padding:10px; text-align: center" | threshold (int)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 90
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 85
|-
| style="padding:10px; text-align: center" | 5
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 80
|}

The first row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The second row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The third row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 2 with a customized threshold of 90.

The fourth row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 2 with a customized threshold of 85.

The fifth row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 3 with a customized threshold of 80.

 The following is an example of mock data in the awarded_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | participant_id (foreign key)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 3
|}

The first row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The second row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.

The third row represents that the assignment participant with participant_id 2 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The fourth row represents that the assignment participant with participant_id 3 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.
</div>

=== Views ===

<div style="padding:10px 25px 25px 25px">

The following screenshots show a comparison of the existing "Assignments Edit" page, alongside a mockup incorporating the new badging system where instructors can add and configure badges for a given assignment.

 [[File:Original-Assignments-Edit.png|none|frame|The original "Assignments Edit" page.]]

 [[File:Modified-Assignments-Edit.png|none|frame|The modified "Assignments Edit" page.]]

 The following screenshots show a comparison of the existing "Participants List" page, alongside a mockup incorporating the new badging system where instructors can view all awarded badges for a given assignment.

 [[File:Original-Participants-List.png|none|frame|The original "Participants List" page.]]

 [[File:Modified-Participants-List.png|none|frame|The modified "Participants List" page.]]

 The following screenshots show a comparison of the existing "Student Task List" page, alongside a mockup incorporating the new badging system where students can view all of the badges they have earned.

 [[File:Original-Student-Task-List.png|none|frame|The original "Student Task List" page.]]

 [[File:Modified-Student-Task-List.png|none|frame|The modified "Student Task List" page.]]

</div>

= Test Plan =
<div style="padding: 10px 25px 25px 25px">

A new badge_system_spec.rb file will be created in the spec/features folder, and will include feature tests that verify the modifications made for the project.

The following will be our test plan for this project:

<pre>
describe 'Good Reviewer Badge Presence' do

it "should appear on the instructor's participant list when threshold is set below score" do

end

it "should appear on the student's task list when threshold is set below score" do

end

it "should appear on the instructor's participant list when score is set above threshold" do

end

it "should appear on the student's task list when score is set above threshold" do

end

end
</pre>
<pre>
describe 'Good Reviewer Badge Absence' do

it "should not appear on the instructor's participant list when threshold is set above score" do

end

it "should not appear on the student's task list when threshold is set above score" do

end

it "should not appear on the instructor's participant list when score is set below threshold" do

end

it "should not appear on the student's task list when score is set below threshold" do

end

end
</pre>
<pre>
describe 'Good Teammate Badge Presence' do

it "should appear on the instructor's participant list when threshold is set below score" do

end

it "should appear on the student's task list when threshold is set below score" do

end

it "should appear on the instructor's participant list when score is set above threshold" do

end

it "should appear on the student's task list when score is set above threshold" do

end

end
</pre>
<pre>
describe 'Good Teammate Badge Absence' do

it "should not appear on the instructor's participant list when threshold is set above score" do

end

it "should not appear on the student's task list when threshold is set above score" do

end

it "should not appear on the instructor's participant list when score is set below threshold" do

end

it "should not appear on the student's task list when score is set below threshold" do

end

end
</pre>

</div>

= Video Demonstrations =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Files Modified =

=== New Files ===

<div style="padding: 10px 25px 25px 25px">

• app/assets/images/badges

        A new directory created to house the new badge image files.

 • app/assets/images/badges/Badge-Good-Reviewer.png

        The image used for the new "Good Reviewer" badge.

 • app/assets/images/badges/Badge-Good-Teammate.png

        The image used for the new "Good Teammate" badge.

 • app/views/assignments/edit/_badges.html.erb

 • spec/features/badge_system_spec.rb

        The file holding the new tests written for the badging system.

 • db/migrate/20171115222415_create_badges.rb

        The migration for the new badges table.

 • db/migrate/20171115224048_create_assignment_badges.rb

        The migration for the new assignment_badges table.

 • db/migrate/20171115230007_create_awarded_badges.rb

        The migration for the new awarded_badges table.

 • app/models/badge.rb

        The model associated with the new badges table.

 • app/models/assignment_badge.rb

        The model associated with the new assignment_badges table.

 • app/models/awarded_badge.rb

        The model associated with the new awarded_badges table.

 • test/fixtures/assignment_badges.yml

 • test/fixtures/awarded_badges.yml

 • test/fixtures/badges.yml

 • test/models/assignment_badge_test.rb

 • test/models/awarded_badge_test.rb

 • test/models/badge_test.rb

</div>

=== Edited Files ===

<div style="padding: 10px 25px 25px 25px">

 • app/controllers/assignment_badges_controller.rb

 • app/controllers/assignments_controller.rb

 • app/controllers/response_controller.rb

 • app/controllers/review_mapping_controller.rb

 • app/models/assignment_form.rb

 • app/models/review_response_map.rb

        The file in which the code for the "Good Reviewer" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/models/teammate_review_response_map.rb

        The file in which the code for the "Good Teammate" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/views/assignments/edit.html.erb

        The UI changes allowing instructors to add and calibrate badges for a given assignment.

 • app/views/assignments/edit/_badges.html.erb

 • app/views/participants/list.html.erb

        The UI changes allowing instructors to view badges for the participants of a given assignment.

 • app/views/participants/_participant.html.erb

 • spec/factories/factories.rb

 • app/views/shared_scripts/_user_list.html.erb

 • app/views/student_task/list.html.erb

        The UI changes allowing students to view their badges for all of their assignments.

 • db/schema.rb

        Incorporating schema changes for the three new badges, assignment_badges, and awarded_badges tables.

</div>

= References =

<div style="padding: 10px 25px 25px 25px">

Videos summarizing the previous team's work on this project topic can be found [https://www.youtube.com/playlist?list=PLdDBHYYDZueeGNdQtzS2FfI-eC0-SK6cb here].

</div>

CSC/ECE 517 Fall 2017/E17A2 Lightweight Badging System

2017-12-02T07:42:49Z

Tmdement: /* Test Plan */

__TOC__

= External Links =

<div style="padding: 10px 25px 25px 25px">

[https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.mo1zn1d9w38l Fall 2017 Final Project Topics]

[https://github.com/pushpendrasp/expertiza/tree/badges Working Repo Branch]

[https://github.com/expertiza/expertiza/pull/1095 Expertiza Pull Request]

</div>

= Team Contact =

<div style="padding: 10px 25px 25px 25px">

; MEMBERS:

:Priyanka Jain: [mailto:pjain15@ncsu.edu pjain15@ncsu.edu]

:Pushpendra Patel: [mailto:ppatel16@ncsu.edu ppatel16@ncsu.edu]

:Tanay Kothari: [mailto:tkothar@ncsu.edu tkothar@ncsu.edu]

:Timothy Dement: [mailto:tmdement@ncsu.edu tmdement@ncsu.edu]

; MENTOR:

:Zhewei Hu: [mailto:zhu6@ncsu.edu zhu6@ncsu.edu]

</div>

= Project Description =

<div style="padding: 10px 25px 25px 25px">


The goal of this project is to create a simple badging system for Expertiza, allowing students to earn badges when they meet certain predefined criteria while using the platform. The full E17A2 project topic description can be found [https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.u6i7q1mdz0zl here]

 

Per the full project topic description, the badges will be designed using [https://credly.com Credly]. Previous work on this project topic revealed that any text included on the badges is too small to read, so all text should be removed from the badges and instead appear when the badges are hovered over.

 

This project is concerned with two preliminary badges — "Good Reviewer" and "Good Teammate" — but the design will be such that the badging system can be easily extended to include more badges in the future. The "Good Reviewer" badge will be awarded to students who receive very high review grades. The "Good Teammate" badge will be awarded to team members who receive very high teammate review scores. By default, the "threshold" for earning these badges will be set to a score of 95, but this value will be configurable on a per-assignment basis by the instructor.

 

A new "Badges" tab will be added for instructors on the "Edit Assignment" page where instructors can add badges and configure the badge criteria for a given assignment. Badges a student has earned can be seen when they view their "Task List" page, and an instructor will be able to view all badges earned by students when they view the "Participants List" page.

 

Please refer to the sections below for further detail.

</div>

= Project Requirements =

<div style="padding: 10px 25px 25px 25px">

1. Create badges using Credly (do not include text)

        1.1. Create the "Good Reviewer" Badge

        1.2. Create the "Good Teammate" Badge

        1.3. Store these badge images in the app/assets/images/badges directory

2. Create tables for the badging system

        2.1. Create a table named badges with the following attributes

                2.1.1. id — primary key

                2.1.2. name — varchar

                2.1.3. description — varchar

        2.2. Create a mapping table named assignment_badges with the following attributes

                2.2.1 id — primary key

                2.2.2 badge_id — foreign key

                2.2.3 assignment_id — foreign key

                2.2.4 threshold — int

        2.3. Create a mapping table named awarded_badges with the following attributes

                2.3.1. id — primary key

                2.3.2. badge_id — foreign key

                2.3.3. participant_id — foreign key

3. Change the UI so that instructors can add, configure, and view badges, and so that students can view their badges

        3.1. Add a new "Badges" tab to the assignments/edit page for instructors to add and configure badges

        3.2. Add badge icons to the participants/list page for instructors to view badges

        3.3. Add badge icons to the student_task/list page for students to view badges

4. Write feature tests to verify the modifications

        4.1. Include tests in the a new badge_system_spec.rb file in the spec/features directory

</div>

= Preliminary Mocks =

=== Badges ===

<div style="padding: 10px 25px 25px 25px">

The following Credly badge will be awarded to students who meet the "Good Reviewer" criterion for a given assignment:

[[File:Badge-Good-Reviewer-Small.png|none|frame|Good Reviewer Badge]]

 The following Credly badge will be awarded to team members who meet the "Good Teammate" criterion for a given assignment:

[[File:Badge-Good-Teammate-Small.png|none|frame|Good Teammate Badge]]

</div>

=== Tables ===

<div style="padding: 10px 25px 25px 25px">

The following is an example of mock data in the badges table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | name (varchar)
! style="padding:10px; text-align: center" | description (varchar)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | Good Reviewer
| style="padding:10px; text-align: center" | This badge is awarded to students who receive very high review grades.
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | Good Teammate
| style="padding:10px; text-align: center" | This badge is awarded to team members who receive very high teammate review scores.
|}

 The following is an example of mock data in the assignment_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | assignment_id (foreign key)
! style="padding:10px; text-align: center" | threshold (int)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 90
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 85
|-
| style="padding:10px; text-align: center" | 5
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 80
|}

The first row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The second row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The third row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 2 with a customized threshold of 90.

The fourth row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 2 with a customized threshold of 85.

The fifth row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 3 with a customized threshold of 80.

 The following is an example of mock data in the awarded_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | participant_id (foreign key)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 3
|}

The first row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The second row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.

The third row represents that the assignment participant with participant_id 2 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The fourth row represents that the assignment participant with participant_id 3 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.
</div>

=== Views ===

<div style="padding:10px 25px 25px 25px">

The following screenshots show a comparison of the existing "Assignments Edit" page, alongside a mockup incorporating the new badging system where instructors can add and configure badges for a given assignment.

 [[File:Original-Assignments-Edit.png|none|frame|The original "Assignments Edit" page.]]

 [[File:Modified-Assignments-Edit.png|none|frame|The modified "Assignments Edit" page.]]

 The following screenshots show a comparison of the existing "Participants List" page, alongside a mockup incorporating the new badging system where instructors can view all awarded badges for a given assignment.

 [[File:Original-Participants-List.png|none|frame|The original "Participants List" page.]]

 [[File:Modified-Participants-List.png|none|frame|The modified "Participants List" page.]]

 The following screenshots show a comparison of the existing "Student Task List" page, alongside a mockup incorporating the new badging system where students can view all of the badges they have earned.

 [[File:Original-Student-Task-List.png|none|frame|The original "Student Task List" page.]]

 [[File:Modified-Student-Task-List.png|none|frame|The modified "Student Task List" page.]]

</div>

= Test Plan =
<div style="padding: 10px 25px 25px 25px">

A new badge_system_spec.rb file will be created in the spec/features folder, and will include feature tests that verify the modifications made for the project.

The following will be our test plan for this project:
<pre>
describe 'Good Reviewer Badge Presence' do

it "should appear on the instructor's participant list when threshold is set below score" do

end

it "should appear on the student's task list when threshold is set below score" do

end

it "should appear on the instructor's participant list when score is set above threshold" do

end

it "should appear on the student's task list when score is set above threshold" do

end

end
</pre>
<pre>
describe 'Good Reviewer Badge Absence' do

it "should not appear on the instructor's participant list when threshold is set above score" do

end

it "should not appear on the student's task list when threshold is set above score" do

end

it "should not appear on the instructor's participant list when score is set below threshold" do

end

it "should not appear on the student's task list when score is set below threshold" do

end

end
</pre>
<pre>
describe 'Good Teammate Badge Presence' do

it "should appear on the instructor's participant list when threshold is set below score" do

end

it "should appear on the student's task list when threshold is set below score" do

end

it "should appear on the instructor's participant list when score is set above threshold" do

end

it "should appear on the student's task list when score is set above threshold" do

end

end
</pre>
<pre>
describe 'Good Teammate Badge Absence' do

it "should not appear on the instructor's participant list when threshold is set above score" do

end

it "should not appear on the student's task list when threshold is set above score" do

end

it "should not appear on the instructor's participant list when score is set below threshold" do

end

it "should not appear on the student's task list when score is set below threshold" do

end

end
</pre>

</div>

= Video Demonstrations =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Files Modified =

=== New Files ===

<div style="padding: 10px 25px 25px 25px">

• app/assets/images/badges

        A new directory created to house the new badge image files.

 • app/assets/images/badges/Badge-Good-Reviewer.png

        The image used for the new "Good Reviewer" badge.

 • app/assets/images/badges/Badge-Good-Teammate.png

        The image used for the new "Good Teammate" badge.

 • app/views/assignments/edit/_badges.html.erb

 • spec/features/badge_system_spec.rb

        The file holding the new tests written for the badging system.

 • db/migrate/20171115222415_create_badges.rb

        The migration for the new badges table.

 • db/migrate/20171115224048_create_assignment_badges.rb

        The migration for the new assignment_badges table.

 • db/migrate/20171115230007_create_awarded_badges.rb

        The migration for the new awarded_badges table.

 • app/models/badge.rb

        The model associated with the new badges table.

 • app/models/assignment_badge.rb

        The model associated with the new assignment_badges table.

 • app/models/awarded_badge.rb

        The model associated with the new awarded_badges table.

 • test/fixtures/assignment_badges.yml

 • test/fixtures/awarded_badges.yml

 • test/fixtures/badges.yml

 • test/models/assignment_badge_test.rb

 • test/models/awarded_badge_test.rb

 • test/models/badge_test.rb

</div>

=== Edited Files ===

<div style="padding: 10px 25px 25px 25px">

 • app/controllers/assignment_badges_controller.rb

 • app/controllers/assignments_controller.rb

 • app/controllers/response_controller.rb

 • app/controllers/review_mapping_controller.rb

 • app/models/assignment_form.rb

 • app/models/review_response_map.rb

        The file in which the code for the "Good Reviewer" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/models/teammate_review_response_map.rb

        The file in which the code for the "Good Teammate" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/views/assignments/edit.html.erb

        The UI changes allowing instructors to add and calibrate badges for a given assignment.

 • app/views/assignments/edit/_badges.html.erb

 • app/views/participants/list.html.erb

        The UI changes allowing instructors to view badges for the participants of a given assignment.

 • app/views/participants/_participant.html.erb

 • spec/factories/factories.rb

 • app/views/shared_scripts/_user_list.html.erb

 • app/views/student_task/list.html.erb

        The UI changes allowing students to view their badges for all of their assignments.

 • db/schema.rb

        Incorporating schema changes for the three new badges, assignment_badges, and awarded_badges tables.

</div>

= References =

<div style="padding: 10px 25px 25px 25px">

Videos summarizing the previous team's work on this project topic can be found [https://www.youtube.com/playlist?list=PLdDBHYYDZueeGNdQtzS2FfI-eC0-SK6cb here].

</div>

CSC/ECE 517 Fall 2017/E17A2 Lightweight Badging System

2017-12-02T07:42:24Z

Tmdement: /* Test Plan */

__TOC__

= External Links =

<div style="padding: 10px 25px 25px 25px">

[https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.mo1zn1d9w38l Fall 2017 Final Project Topics]

[https://github.com/pushpendrasp/expertiza/tree/badges Working Repo Branch]

[https://github.com/expertiza/expertiza/pull/1095 Expertiza Pull Request]

</div>

= Team Contact =

<div style="padding: 10px 25px 25px 25px">

; MEMBERS:

:Priyanka Jain: [mailto:pjain15@ncsu.edu pjain15@ncsu.edu]

:Pushpendra Patel: [mailto:ppatel16@ncsu.edu ppatel16@ncsu.edu]

:Tanay Kothari: [mailto:tkothar@ncsu.edu tkothar@ncsu.edu]

:Timothy Dement: [mailto:tmdement@ncsu.edu tmdement@ncsu.edu]

; MENTOR:

:Zhewei Hu: [mailto:zhu6@ncsu.edu zhu6@ncsu.edu]

</div>

= Project Description =

<div style="padding: 10px 25px 25px 25px">


The goal of this project is to create a simple badging system for Expertiza, allowing students to earn badges when they meet certain predefined criteria while using the platform. The full E17A2 project topic description can be found [https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.u6i7q1mdz0zl here]

 

Per the full project topic description, the badges will be designed using [https://credly.com Credly]. Previous work on this project topic revealed that any text included on the badges is too small to read, so all text should be removed from the badges and instead appear when the badges are hovered over.

 

This project is concerned with two preliminary badges — "Good Reviewer" and "Good Teammate" — but the design will be such that the badging system can be easily extended to include more badges in the future. The "Good Reviewer" badge will be awarded to students who receive very high review grades. The "Good Teammate" badge will be awarded to team members who receive very high teammate review scores. By default, the "threshold" for earning these badges will be set to a score of 95, but this value will be configurable on a per-assignment basis by the instructor.

 

A new "Badges" tab will be added for instructors on the "Edit Assignment" page where instructors can add badges and configure the badge criteria for a given assignment. Badges a student has earned can be seen when they view their "Task List" page, and an instructor will be able to view all badges earned by students when they view the "Participants List" page.

 

Please refer to the sections below for further detail.

</div>

= Project Requirements =

<div style="padding: 10px 25px 25px 25px">

1. Create badges using Credly (do not include text)

        1.1. Create the "Good Reviewer" Badge

        1.2. Create the "Good Teammate" Badge

        1.3. Store these badge images in the app/assets/images/badges directory

2. Create tables for the badging system

        2.1. Create a table named badges with the following attributes

                2.1.1. id — primary key

                2.1.2. name — varchar

                2.1.3. description — varchar

        2.2. Create a mapping table named assignment_badges with the following attributes

                2.2.1 id — primary key

                2.2.2 badge_id — foreign key

                2.2.3 assignment_id — foreign key

                2.2.4 threshold — int

        2.3. Create a mapping table named awarded_badges with the following attributes

                2.3.1. id — primary key

                2.3.2. badge_id — foreign key

                2.3.3. participant_id — foreign key

3. Change the UI so that instructors can add, configure, and view badges, and so that students can view their badges

        3.1. Add a new "Badges" tab to the assignments/edit page for instructors to add and configure badges

        3.2. Add badge icons to the participants/list page for instructors to view badges

        3.3. Add badge icons to the student_task/list page for students to view badges

4. Write feature tests to verify the modifications

        4.1. Include tests in the a new badge_system_spec.rb file in the spec/features directory

</div>

= Preliminary Mocks =

=== Badges ===

<div style="padding: 10px 25px 25px 25px">

The following Credly badge will be awarded to students who meet the "Good Reviewer" criterion for a given assignment:

[[File:Badge-Good-Reviewer-Small.png|none|frame|Good Reviewer Badge]]

 The following Credly badge will be awarded to team members who meet the "Good Teammate" criterion for a given assignment:

[[File:Badge-Good-Teammate-Small.png|none|frame|Good Teammate Badge]]

</div>

=== Tables ===

<div style="padding: 10px 25px 25px 25px">

The following is an example of mock data in the badges table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | name (varchar)
! style="padding:10px; text-align: center" | description (varchar)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | Good Reviewer
| style="padding:10px; text-align: center" | This badge is awarded to students who receive very high review grades.
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | Good Teammate
| style="padding:10px; text-align: center" | This badge is awarded to team members who receive very high teammate review scores.
|}

 The following is an example of mock data in the assignment_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | assignment_id (foreign key)
! style="padding:10px; text-align: center" | threshold (int)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 90
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 85
|-
| style="padding:10px; text-align: center" | 5
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 80
|}

The first row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The second row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The third row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 2 with a customized threshold of 90.

The fourth row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 2 with a customized threshold of 85.

The fifth row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 3 with a customized threshold of 80.

 The following is an example of mock data in the awarded_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | participant_id (foreign key)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 3
|}

The first row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The second row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.

The third row represents that the assignment participant with participant_id 2 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The fourth row represents that the assignment participant with participant_id 3 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.
</div>

=== Views ===

<div style="padding:10px 25px 25px 25px">

The following screenshots show a comparison of the existing "Assignments Edit" page, alongside a mockup incorporating the new badging system where instructors can add and configure badges for a given assignment.

 [[File:Original-Assignments-Edit.png|none|frame|The original "Assignments Edit" page.]]

 [[File:Modified-Assignments-Edit.png|none|frame|The modified "Assignments Edit" page.]]

 The following screenshots show a comparison of the existing "Participants List" page, alongside a mockup incorporating the new badging system where instructors can view all awarded badges for a given assignment.

 [[File:Original-Participants-List.png|none|frame|The original "Participants List" page.]]

 [[File:Modified-Participants-List.png|none|frame|The modified "Participants List" page.]]

 The following screenshots show a comparison of the existing "Student Task List" page, alongside a mockup incorporating the new badging system where students can view all of the badges they have earned.

 [[File:Original-Student-Task-List.png|none|frame|The original "Student Task List" page.]]

 [[File:Modified-Student-Task-List.png|none|frame|The modified "Student Task List" page.]]

</div>

= Test Plan =
<div style="padding: 10px 25px 25px 25px">

The following will be our test plan for this project:
<pre>
describe 'Good Reviewer Badge Presence' do

it "should appear on the instructor's participant list when threshold is set below score" do

end

it "should appear on the student's task list when threshold is set below score" do

end

it "should appear on the instructor's participant list when score is set above threshold" do

end

it "should appear on the student's task list when score is set above threshold" do

end

end
</pre>
<pre>
describe 'Good Reviewer Badge Absence' do

it "should not appear on the instructor's participant list when threshold is set above score" do

end

it "should not appear on the student's task list when threshold is set above score" do

end

it "should not appear on the instructor's participant list when score is set below threshold" do

end

it "should not appear on the student's task list when score is set below threshold" do

end

end
</pre>
<pre>
describe 'Good Teammate Badge Presence' do

it "should appear on the instructor's participant list when threshold is set below score" do

end

it "should appear on the student's task list when threshold is set below score" do

end

it "should appear on the instructor's participant list when score is set above threshold" do

end

it "should appear on the student's task list when score is set above threshold" do

end

end
</pre>
<pre>
describe 'Good Teammate Badge Absence' do

it "should not appear on the instructor's participant list when threshold is set above score" do

end

it "should not appear on the student's task list when threshold is set above score" do

end

it "should not appear on the instructor's participant list when score is set below threshold" do

end

it "should not appear on the student's task list when score is set below threshold" do

end

end
</pre>

A new badge_system_spec.rb file will be created in the spec/features folder, and will include feature tests that verify the modifications made for the project.

NOTE: More information will be included in this section as the project progresses and the tests are written.

</div>

= Video Demonstrations =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Files Modified =

=== New Files ===

<div style="padding: 10px 25px 25px 25px">

• app/assets/images/badges

        A new directory created to house the new badge image files.

 • app/assets/images/badges/Badge-Good-Reviewer.png

        The image used for the new "Good Reviewer" badge.

 • app/assets/images/badges/Badge-Good-Teammate.png

        The image used for the new "Good Teammate" badge.

 • app/views/assignments/edit/_badges.html.erb

 • spec/features/badge_system_spec.rb

        The file holding the new tests written for the badging system.

 • db/migrate/20171115222415_create_badges.rb

        The migration for the new badges table.

 • db/migrate/20171115224048_create_assignment_badges.rb

        The migration for the new assignment_badges table.

 • db/migrate/20171115230007_create_awarded_badges.rb

        The migration for the new awarded_badges table.

 • app/models/badge.rb

        The model associated with the new badges table.

 • app/models/assignment_badge.rb

        The model associated with the new assignment_badges table.

 • app/models/awarded_badge.rb

        The model associated with the new awarded_badges table.

 • test/fixtures/assignment_badges.yml

 • test/fixtures/awarded_badges.yml

 • test/fixtures/badges.yml

 • test/models/assignment_badge_test.rb

 • test/models/awarded_badge_test.rb

 • test/models/badge_test.rb

</div>

=== Edited Files ===

<div style="padding: 10px 25px 25px 25px">

 • app/controllers/assignment_badges_controller.rb

 • app/controllers/assignments_controller.rb

 • app/controllers/response_controller.rb

 • app/controllers/review_mapping_controller.rb

 • app/models/assignment_form.rb

 • app/models/review_response_map.rb

        The file in which the code for the "Good Reviewer" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/models/teammate_review_response_map.rb

        The file in which the code for the "Good Teammate" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/views/assignments/edit.html.erb

        The UI changes allowing instructors to add and calibrate badges for a given assignment.

 • app/views/assignments/edit/_badges.html.erb

 • app/views/participants/list.html.erb

        The UI changes allowing instructors to view badges for the participants of a given assignment.

 • app/views/participants/_participant.html.erb

 • spec/factories/factories.rb

 • app/views/shared_scripts/_user_list.html.erb

 • app/views/student_task/list.html.erb

        The UI changes allowing students to view their badges for all of their assignments.

 • db/schema.rb

        Incorporating schema changes for the three new badges, assignment_badges, and awarded_badges tables.

</div>

= References =

<div style="padding: 10px 25px 25px 25px">

Videos summarizing the previous team's work on this project topic can be found [https://www.youtube.com/playlist?list=PLdDBHYYDZueeGNdQtzS2FfI-eC0-SK6cb here].

</div>

CSC/ECE 517 Fall 2017/E17A2 Lightweight Badging System

2017-11-16T01:12:15Z

Tmdement:

__TOC__

= External Links =

<div style="padding: 10px 25px 25px 25px">

[https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.mo1zn1d9w38l Fall 2017 Final Project Topics]

[https://github.com/pushpendrasp/expertiza/tree/badges Working Repo Branch]

[https://github.com/expertiza/expertiza/pull/1095 Expertiza Pull Request]

</div>

= Team Contact =

<div style="padding: 10px 25px 25px 25px">

; MEMBERS:

:Priyanka Jain: [mailto:pjain15@ncsu.edu pjain15@ncsu.edu]

:Pushpendra Patel: [mailto:ppatel16@ncsu.edu ppatel16@ncsu.edu]

:Tanay Kothari: [mailto:tkothar@ncsu.edu tkothar@ncsu.edu]

:Timothy Dement: [mailto:tmdement@ncsu.edu tmdement@ncsu.edu]

; MENTOR:

:Zhewei Hu: [mailto:zhu6@ncsu.edu zhu6@ncsu.edu]

</div>

= Project Description =

<div style="padding: 10px 25px 25px 25px">


The goal of this project is to create a simple badging system for Expertiza, allowing students to earn badges when they meet certain predefined criteria while using the platform. The full E17A2 project topic description can be found [https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.u6i7q1mdz0zl here]

 

Per the full project topic description, the badges will be designed using [https://credly.com Credly]. Previous work on this project topic revealed that any text included on the badges is too small to read, so all text should be removed from the badges and instead appear when the badges are hovered over.

 

This project is concerned with two preliminary badges — "Good Reviewer" and "Good Teammate" — but the design will be such that the badging system can be easily extended to include more badges in the future. The "Good Reviewer" badge will be awarded to students who receive very high review grades. The "Good Teammate" badge will be awarded to team members who receive very high teammate review scores. By default, the "threshold" for earning these badges will be set to a score of 95, but this value will be configurable on a per-assignment basis by the instructor.

 

A new "Badges" tab will be added for instructors on the "Edit Assignment" page where instructors can add badges and configure the badge criteria for a given assignment. Badges a student has earned can be seen when they view their "Task List" page, and an instructor will be able to view all badges earned by students when they view the "Participants List" page.

 

Please refer to the sections below for further detail.

</div>

= Project Requirements =

<div style="padding: 10px 25px 25px 25px">

1. Create badges using Credly (do not include text)

        1.1. Create the "Good Reviewer" Badge

        1.2. Create the "Good Teammate" Badge

        1.3. Store these badge images in the app/assets/images/badges directory

2. Create tables for the badging system

        2.1. Create a table named badges with the following attributes

                2.1.1. id — primary key

                2.1.2. name — varchar

                2.1.3. description — varchar

        2.2. Create a mapping table named assignment_badges with the following attributes

                2.2.1 id — primary key

                2.2.2 badge_id — foreign key

                2.2.3 assignment_id — foreign key

                2.2.4 threshold — int

        2.3. Create a mapping table named awarded_badges with the following attributes

                2.3.1. id — primary key

                2.3.2. badge_id — foreign key

                2.3.3. participant_id — foreign key

3. Change the UI so that instructors can add, configure, and view badges, and so that students can view their badges

        3.1. Add a new "Badges" tab to the assignments/edit page for instructors to add and configure badges

        3.2. Add badge icons to the participants/list page for instructors to view badges

        3.3. Add badge icons to the student_task/list page for students to view badges

4. Write feature tests to verify the modifications

        4.1. Include tests in the a new badge_system_spec.rb file in the spec/features directory

</div>

= Preliminary Mocks =

=== Badges ===

<div style="padding: 10px 25px 25px 25px">

The following Credly badge will be awarded to students who meet the "Good Reviewer" criterion for a given assignment:

[[File:Badge-Good-Reviewer-Small.png|none|frame|Good Reviewer Badge]]

 The following Credly badge will be awarded to team members who meet the "Good Teammate" criterion for a given assignment:

[[File:Badge-Good-Teammate-Small.png|none|frame|Good Teammate Badge]]

</div>

=== Tables ===

<div style="padding: 10px 25px 25px 25px">

The following is an example of mock data in the badges table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | name (varchar)
! style="padding:10px; text-align: center" | description (varchar)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | Good Reviewer
| style="padding:10px; text-align: center" | This badge is awarded to students who receive very high review grades.
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | Good Teammate
| style="padding:10px; text-align: center" | This badge is awarded to team members who receive very high teammate review scores.
|}

 The following is an example of mock data in the assignment_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | assignment_id (foreign key)
! style="padding:10px; text-align: center" | threshold (int)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 90
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 85
|-
| style="padding:10px; text-align: center" | 5
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 80
|}

The first row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The second row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The third row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 2 with a customized threshold of 90.

The fourth row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 2 with a customized threshold of 85.

The fifth row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 3 with a customized threshold of 80.

 The following is an example of mock data in the awarded_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | participant_id (foreign key)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 3
|}

The first row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The second row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.

The third row represents that the assignment participant with participant_id 2 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The fourth row represents that the assignment participant with participant_id 3 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.
</div>

=== Views ===

<div style="padding:10px 25px 25px 25px">

The following screenshots show a comparison of the existing "Assignments Edit" page, alongside a mockup incorporating the new badging system where instructors can add and configure badges for a given assignment.

 [[File:Original-Assignments-Edit.png|none|frame|The original "Assignments Edit" page.]]

 [[File:Modified-Assignments-Edit.png|none|frame|The modified "Assignments Edit" page.]]

 The following screenshots show a comparison of the existing "Participants List" page, alongside a mockup incorporating the new badging system where instructors can view all awarded badges for a given assignment.

 [[File:Original-Participants-List.png|none|frame|The original "Participants List" page.]]

 [[File:Modified-Participants-List.png|none|frame|The modified "Participants List" page.]]

 The following screenshots show a comparison of the existing "Student Task List" page, alongside a mockup incorporating the new badging system where students can view all of the badges they have earned.

 [[File:Original-Student-Task-List.png|none|frame|The original "Student Task List" page.]]

 [[File:Modified-Student-Task-List.png|none|frame|The modified "Student Task List" page.]]

</div>

= Overview of Work Completed =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Testing =

<div style="padding: 10px 25px 25px 25px">

A new badge_system_spec.rb file will be created in the spec/features folder, and will include feature tests that verify the modifications made for the project.

NOTE: More information will be included in this section as the project progresses and the tests are written.

</div>

= Video Demonstrations =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Files Modified =

=== New Files ===

<div style="padding: 10px 25px 25px 25px">

• app/assets/images/badges

        A new directory created to house the new badge image files.

 • app/assets/images/badges/Badge-Good-Reviewer.png

        The image used for the new "Good Reviewer" badge.

 • app/assets/images/badges/Badge-Good-Teammate.png

        The image used for the new "Good Teammate" badge.

 • spec/features/badge_system_spec.rb

        The file holding the new tests written for the badging system.

 • db/migrate/20171115222415_create_badges.rb

        The migration for the new badges table.

 • db/migrate/20171115224048_create_assignment_badges.rb

        The migration for the new assignment_badges table.

 • db/migrate/20171115230007_create_awarded_badges.rb

        The migration for the new awarded_badges table.

 • app/models/badge.rb

        The model associated with the new badges table.

 • app/models/assignment_badge.rb

        The model associated with the new assignment_badges table.

 • app/models/awarded_badge.rb

        The model associated with the new awarded_badges table.

</div>

=== Edited Files ===

<div style="padding: 10px 25px 25px 25px">

• app/models/review_response_map.rb

        The file in which the code for the "Good Reviewer" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/models/teammate_review_response_map.rb

        The file in which the code for the "Good Teammate" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/views/assignments/edit.html.erb

        The UI changes allowing instructors to add and calibrate badges for a given assignment.

 • app/views/participants/list.html.erb

        The UI changes allowing instructors to view badges for the participants of a given assignment.

 • app/views/student_task/list.html.erb

        The UI changes allowing students to view their badges for all of their assignments.

 • db/schema.rb

        Incorporating schema changes for the three new badges, assignment_badges, and awarded_badges tables.

</div>

= References =

<div style="padding: 10px 25px 25px 25px">

Videos summarizing the previous team's work on this project topic can be found [https://www.youtube.com/playlist?list=PLdDBHYYDZueeGNdQtzS2FfI-eC0-SK6cb here].

</div>

CSC/ECE 517 Fall 2017/E17A2 Lightweight Badging System

2017-11-15T23:46:24Z

Tmdement: /* New Files */

__TOC__

= Team Contact =

<div style="padding: 10px 25px 25px 25px">

; MEMBERS:

:Priyanka Jain: [mailto:pjain15@ncsu.edu pjain15@ncsu.edu]

:Pushpendra Patel: [mailto:ppatel16@ncsu.edu ppatel16@ncsu.edu]

:Tanay Kothari: [mailto:tkothar@ncsu.edu tkothar@ncsu.edu]

:Timothy Dement: [mailto:tmdement@ncsu.edu tmdement@ncsu.edu]

; MENTOR:

:Zhewei Hu: [mailto:zhu6@ncsu.edu zhu6@ncsu.edu]

</div>

= Project Description =

<div style="padding: 10px 25px 25px 25px">


The goal of this project is to create a simple badging system for Expertiza, allowing students to earn badges when they meet certain predefined criteria while using the platform. The full E17A2 project topic description can be found [https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.u6i7q1mdz0zl here]

 

Per the full project topic description, the badges will be designed using [https://credly.com Credly]. Previous work on this project topic revealed that any text included on the badges is too small to read, so all text should be removed from the badges and instead appear when the badges are hovered over.

 

This project is concerned with two preliminary badges — "Good Reviewer" and "Good Teammate" — but the design will be such that the badging system can be easily extended to include more badges in the future. The "Good Reviewer" badge will be awarded to students who receive very high review grades. The "Good Teammate" badge will be awarded to team members who receive very high teammate review scores. By default, the "threshold" for earning these badges will be set to a score of 95, but this value will be configurable on a per-assignment basis by the instructor.

 

A new "Badges" tab will be added for instructors on the "Edit Assignment" page where instructors can add badges and configure the badge criteria for a given assignment. Badges a student has earned can be seen when they view their "Task List" page, and an instructor will be able to view all badges earned by students when they view the "Participants List" page.

 

Please refer to the sections below for further detail.

</div>

= Project Requirements =

<div style="padding: 10px 25px 25px 25px">

1. Create badges using Credly (do not include text)

        1.1. Create the "Good Reviewer" Badge

        1.2. Create the "Good Teammate" Badge

        1.3. Store these badge images in the app/assets/images/badges directory

2. Create tables for the badging system

        2.1. Create a table named badges with the following attributes

                2.1.1. id — primary key

                2.1.2. name — varchar

                2.1.3. description — varchar

        2.2. Create a mapping table named assignment_badges with the following attributes

                2.2.1 id — primary key

                2.2.2 badge_id — foreign key

                2.2.3 assignment_id — foreign key

                2.2.4 threshold — int

        2.3. Create a mapping table named awarded_badges with the following attributes

                2.3.1. id — primary key

                2.3.2. badge_id — foreign key

                2.3.3. participant_id — foreign key

3. Change the UI so that instructors can add, configure, and view badges, and so that students can view their badges

        3.1. Add a new "Badges" tab to the assignments/edit page for instructors to add and configure badges

        3.2. Add badge icons to the participants/list page for instructors to view badges

        3.3. Add badge icons to the student_task/list page for students to view badges

4. Write feature tests to verify the modifications

        4.1. Include tests in the a new badge_system_spec.rb file in the spec/features directory

</div>

= Preliminary Mocks =

=== Badges ===

<div style="padding: 10px 25px 25px 25px">

The following Credly badge will be awarded to students who meet the "Good Reviewer" criterion for a given assignment:

[[File:Badge-Good-Reviewer-Small.png|none|frame|Good Reviewer Badge]]

 The following Credly badge will be awarded to team members who meet the "Good Teammate" criterion for a given assignment:

[[File:Badge-Good-Teammate-Small.png|none|frame|Good Teammate Badge]]

</div>

=== Tables ===

<div style="padding: 10px 25px 25px 25px">

The following is an example of mock data in the badges table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | name (varchar)
! style="padding:10px; text-align: center" | description (varchar)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | Good Reviewer
| style="padding:10px; text-align: center" | This badge is awarded to students who receive very high review grades.
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | Good Teammate
| style="padding:10px; text-align: center" | This badge is awarded to team members who receive very high teammate review scores.
|}

 The following is an example of mock data in the assignment_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | assignment_id (foreign key)
! style="padding:10px; text-align: center" | threshold (int)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 90
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 85
|-
| style="padding:10px; text-align: center" | 5
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 80
|}

The first row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The second row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The third row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 2 with a customized threshold of 90.

The fourth row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 2 with a customized threshold of 85.

The fifth row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 3 with a customized threshold of 80.

 The following is an example of mock data in the awarded_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | participant_id (foreign key)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 3
|}

The first row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The second row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.

The third row represents that the assignment participant with participant_id 2 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The fourth row represents that the assignment participant with participant_id 3 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.
</div>

=== Views ===

<div style="padding:10px 25px 25px 25px">

The following screenshots show a comparison of the existing "Assignments Edit" page, alongside a mockup incorporating the new badging system where instructors can add and configure badges for a given assignment.

 [[File:Original-Assignments-Edit.png|none|frame|The original "Assignments Edit" page.]]

 [[File:Modified-Assignments-Edit.png|none|frame|The modified "Assignments Edit" page.]]

 The following screenshots show a comparison of the existing "Participants List" page, alongside a mockup incorporating the new badging system where instructors can view all awarded badges for a given assignment.

 [[File:Original-Participants-List.png|none|frame|The original "Participants List" page.]]

 [[File:Modified-Participants-List.png|none|frame|The modified "Participants List" page.]]

 The following screenshots show a comparison of the existing "Student Task List" page, alongside a mockup incorporating the new badging system where students can view all of the badges they have earned.

 [[File:Original-Student-Task-List.png|none|frame|The original "Student Task List" page.]]

 [[File:Modified-Student-Task-List.png|none|frame|The modified "Student Task List" page.]]

</div>

= Overview of Work Completed =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Testing =

<div style="padding: 10px 25px 25px 25px">

A new badge_system_spec.rb file will be created in the spec/features folder, and will include feature tests that verify the modifications made for the project.

NOTE: More information will be included in this section as the project progresses and the tests are written.

</div>

= Video Demonstrations =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Files Modified =

=== New Files ===

<div style="padding: 10px 25px 25px 25px">

• app/assets/images/badges

        A new directory created to house the new badge image files.

 • app/assets/images/badges/Badge-Good-Reviewer.png

        The image used for the new "Good Reviewer" badge.

 • app/assets/images/badges/Badge-Good-Teammate.png

        The image used for the new "Good Teammate" badge.

 • spec/features/badge_system_spec.rb

        The file holding the new tests written for the badging system.

 • db/migrate/20171115222415_create_badges.rb

        The migration for the new badges table.

 • db/migrate/20171115224048_create_assignment_badges.rb

        The migration for the new assignment_badges table.

 • db/migrate/20171115230007_create_awarded_badges.rb

        The migration for the new awarded_badges table.

 • app/models/badge.rb

        The model associated with the new badges table.

 • app/models/assignment_badge.rb

        The model associated with the new assignment_badges table.

 • app/models/awarded_badge.rb

        The model associated with the new awarded_badges table.

</div>

=== Edited Files ===

<div style="padding: 10px 25px 25px 25px">

• app/models/review_response_map.rb

        The file in which the code for the "Good Reviewer" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/models/teammate_review_response_map.rb

        The file in which the code for the "Good Teammate" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/views/assignments/edit.html.erb

        The UI changes allowing instructors to add and calibrate badges for a given assignment.

 • app/views/participants/list.html.erb

        The UI changes allowing instructors to view badges for the participants of a given assignment.

 • app/views/student_task/list.html.erb

        The UI changes allowing students to view their badges for all of their assignments.

 • db/schema.rb

        Incorporating schema changes for the three new badges, assignment_badges, and awarded_badges tables.

</div>

= References =

<div style="padding: 10px 25px 25px 25px">

Videos summarizing the previous team's work on this project topic can be found [https://www.youtube.com/playlist?list=PLdDBHYYDZueeGNdQtzS2FfI-eC0-SK6cb here].

</div>

CSC/ECE 517 Fall 2017/E17A2 Lightweight Badging System

2017-11-15T23:41:00Z

Tmdement: /* New Files */

__TOC__

= Team Contact =

<div style="padding: 10px 25px 25px 25px">

; MEMBERS:

:Priyanka Jain: [mailto:pjain15@ncsu.edu pjain15@ncsu.edu]

:Pushpendra Patel: [mailto:ppatel16@ncsu.edu ppatel16@ncsu.edu]

:Tanay Kothari: [mailto:tkothar@ncsu.edu tkothar@ncsu.edu]

:Timothy Dement: [mailto:tmdement@ncsu.edu tmdement@ncsu.edu]

; MENTOR:

:Zhewei Hu: [mailto:zhu6@ncsu.edu zhu6@ncsu.edu]

</div>

= Project Description =

<div style="padding: 10px 25px 25px 25px">


The goal of this project is to create a simple badging system for Expertiza, allowing students to earn badges when they meet certain predefined criteria while using the platform. The full E17A2 project topic description can be found [https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.u6i7q1mdz0zl here]

 

Per the full project topic description, the badges will be designed using [https://credly.com Credly]. Previous work on this project topic revealed that any text included on the badges is too small to read, so all text should be removed from the badges and instead appear when the badges are hovered over.

 

This project is concerned with two preliminary badges — "Good Reviewer" and "Good Teammate" — but the design will be such that the badging system can be easily extended to include more badges in the future. The "Good Reviewer" badge will be awarded to students who receive very high review grades. The "Good Teammate" badge will be awarded to team members who receive very high teammate review scores. By default, the "threshold" for earning these badges will be set to a score of 95, but this value will be configurable on a per-assignment basis by the instructor.

 

A new "Badges" tab will be added for instructors on the "Edit Assignment" page where instructors can add badges and configure the badge criteria for a given assignment. Badges a student has earned can be seen when they view their "Task List" page, and an instructor will be able to view all badges earned by students when they view the "Participants List" page.

 

Please refer to the sections below for further detail.

</div>

= Project Requirements =

<div style="padding: 10px 25px 25px 25px">

1. Create badges using Credly (do not include text)

        1.1. Create the "Good Reviewer" Badge

        1.2. Create the "Good Teammate" Badge

        1.3. Store these badge images in the app/assets/images/badges directory

2. Create tables for the badging system

        2.1. Create a table named badges with the following attributes

                2.1.1. id — primary key

                2.1.2. name — varchar

                2.1.3. description — varchar

        2.2. Create a mapping table named assignment_badges with the following attributes

                2.2.1 id — primary key

                2.2.2 badge_id — foreign key

                2.2.3 assignment_id — foreign key

                2.2.4 threshold — int

        2.3. Create a mapping table named awarded_badges with the following attributes

                2.3.1. id — primary key

                2.3.2. badge_id — foreign key

                2.3.3. participant_id — foreign key

3. Change the UI so that instructors can add, configure, and view badges, and so that students can view their badges

        3.1. Add a new "Badges" tab to the assignments/edit page for instructors to add and configure badges

        3.2. Add badge icons to the participants/list page for instructors to view badges

        3.3. Add badge icons to the student_task/list page for students to view badges

4. Write feature tests to verify the modifications

        4.1. Include tests in the a new badge_system_spec.rb file in the spec/features directory

</div>

= Preliminary Mocks =

=== Badges ===

<div style="padding: 10px 25px 25px 25px">

The following Credly badge will be awarded to students who meet the "Good Reviewer" criterion for a given assignment:

[[File:Badge-Good-Reviewer-Small.png|none|frame|Good Reviewer Badge]]

 The following Credly badge will be awarded to team members who meet the "Good Teammate" criterion for a given assignment:

[[File:Badge-Good-Teammate-Small.png|none|frame|Good Teammate Badge]]

</div>

=== Tables ===

<div style="padding: 10px 25px 25px 25px">

The following is an example of mock data in the badges table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | name (varchar)
! style="padding:10px; text-align: center" | description (varchar)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | Good Reviewer
| style="padding:10px; text-align: center" | This badge is awarded to students who receive very high review grades.
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | Good Teammate
| style="padding:10px; text-align: center" | This badge is awarded to team members who receive very high teammate review scores.
|}

 The following is an example of mock data in the assignment_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | assignment_id (foreign key)
! style="padding:10px; text-align: center" | threshold (int)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 90
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 85
|-
| style="padding:10px; text-align: center" | 5
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 80
|}

The first row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The second row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The third row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 2 with a customized threshold of 90.

The fourth row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 2 with a customized threshold of 85.

The fifth row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 3 with a customized threshold of 80.

 The following is an example of mock data in the awarded_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | participant_id (foreign key)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 3
|}

The first row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The second row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.

The third row represents that the assignment participant with participant_id 2 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The fourth row represents that the assignment participant with participant_id 3 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.
</div>

=== Views ===

<div style="padding:10px 25px 25px 25px">

The following screenshots show a comparison of the existing "Assignments Edit" page, alongside a mockup incorporating the new badging system where instructors can add and configure badges for a given assignment.

 [[File:Original-Assignments-Edit.png|none|frame|The original "Assignments Edit" page.]]

 [[File:Modified-Assignments-Edit.png|none|frame|The modified "Assignments Edit" page.]]

 The following screenshots show a comparison of the existing "Participants List" page, alongside a mockup incorporating the new badging system where instructors can view all awarded badges for a given assignment.

 [[File:Original-Participants-List.png|none|frame|The original "Participants List" page.]]

 [[File:Modified-Participants-List.png|none|frame|The modified "Participants List" page.]]

 The following screenshots show a comparison of the existing "Student Task List" page, alongside a mockup incorporating the new badging system where students can view all of the badges they have earned.

 [[File:Original-Student-Task-List.png|none|frame|The original "Student Task List" page.]]

 [[File:Modified-Student-Task-List.png|none|frame|The modified "Student Task List" page.]]

</div>

= Overview of Work Completed =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Testing =

<div style="padding: 10px 25px 25px 25px">

A new badge_system_spec.rb file will be created in the spec/features folder, and will include feature tests that verify the modifications made for the project.

NOTE: More information will be included in this section as the project progresses and the tests are written.

</div>

= Video Demonstrations =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Files Modified =

=== New Files ===

<div style="padding: 10px 25px 25px 25px">

• app/assets/images/badges

        A new directory created to house the new badge image files.

 • app/assets/images/badges/Badge-Good-Reviewer.png

        The image used for the new "Good Reviewer" badge.

 • app/assets/images/badges/Badge-Good-Teammate.png

        The image used for the new "Good Teammate" badge.

 • spec/features/badge_system_spec.rb

        The file holding the new tests written for the badging system.

 • db/migrate/20171115222415_create_badges.rb

        TBD: The migration for the new badges table.

 • db/migrate/20171115224048_create_assignment_badges.rb

        TBD: The migration for the new assignment_badges table.

 • db/migrate/20171115230007_create_awarded_badges.rb

        TBD: The migration for the new awarded_badges table.
</div>

=== Edited Files ===

<div style="padding: 10px 25px 25px 25px">

• app/models/review_response_map.rb

        The file in which the code for the "Good Reviewer" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/models/teammate_review_response_map.rb

        The file in which the code for the "Good Teammate" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/views/assignments/edit.html.erb

        The UI changes allowing instructors to add and calibrate badges for a given assignment.

 • app/views/participants/list.html.erb

        The UI changes allowing instructors to view badges for the participants of a given assignment.

 • app/views/student_task/list.html.erb

        The UI changes allowing students to view their badges for all of their assignments.

 • db/schema.rb

        Incorporating schema changes for the three new badges, assignment_badges, and awarded_badges tables.

</div>

= References =

<div style="padding: 10px 25px 25px 25px">

Videos summarizing the previous team's work on this project topic can be found [https://www.youtube.com/playlist?list=PLdDBHYYDZueeGNdQtzS2FfI-eC0-SK6cb here].

</div>

CSC/ECE 517 Fall 2017/E17A2 Lightweight Badging System

2017-11-13T03:09:43Z

Tmdement: /* Views */

__TOC__

= Team Contact =

<div style="padding: 10px 25px 25px 25px">

; MEMBERS:

:Priyanka Jain: [mailto:pjain15@ncsu.edu pjain15@ncsu.edu]

:Pushpendra Patel: [mailto:ppatel16@ncsu.edu ppatel16@ncsu.edu]

:Tanay Kothari: [mailto:tkothar@ncsu.edu tkothar@ncsu.edu]

:Timothy Dement: [mailto:tmdement@ncsu.edu tmdement@ncsu.edu]

; MENTOR:

:Zhewei Hu: [mailto:zhu6@ncsu.edu zhu6@ncsu.edu]

</div>

= Project Description =

<div style="padding: 10px 25px 25px 25px">


The goal of this project is to create a simple badging system for Expertiza, allowing students to earn badges when they meet certain predefined criteria while using the platform. The full E17A2 project topic description can be found [https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.u6i7q1mdz0zl here]

 

Per the full project topic description, the badges will be designed using [https://credly.com Credly]. Previous work on this project topic revealed that any text included on the badges is too small to read, so all text should be removed from the badges and instead appear when the badges are hovered over.

 

This project is concerned with two preliminary badges — "Good Reviewer" and "Good Teammate" — but the design will be such that the badging system can be easily extended to include more badges in the future. The "Good Reviewer" badge will be awarded to students who receive very high review grades. The "Good Teammate" badge will be awarded to team members who receive very high teammate review scores. By default, the "threshold" for earning these badges will be set to a score of 95, but this value will be configurable on a per-assignment basis by the instructor.

 

A new "Badges" tab will be added for instructors on the "Edit Assignment" page where instructors can add badges and configure the badge criteria for a given assignment. Badges a student has earned can be seen when they view their "Task List" page, and an instructor will be able to view all badges earned by students when they view the "Participants List" page.

 

Please refer to the sections below for further detail.

</div>

= Project Requirements =

<div style="padding: 10px 25px 25px 25px">

1. Create badges using Credly (do not include text)

        1.1. Create the "Good Reviewer" Badge

        1.2. Create the "Good Teammate" Badge

        1.3. Store these badge images in the app/assets/images/badges directory

2. Create tables for the badging system

        2.1. Create a table named badges with the following attributes

                2.1.1. id — primary key

                2.1.2. name — varchar

                2.1.3. description — varchar

        2.2. Create a mapping table named assignment_badges with the following attributes

                2.2.1 id — primary key

                2.2.2 badge_id — foreign key

                2.2.3 assignment_id — foreign key

                2.2.4 threshold — int

        2.3. Create a mapping table named awarded_badges with the following attributes

                2.3.1. id — primary key

                2.3.2. badge_id — foreign key

                2.3.3. participant_id — foreign key

3. Change the UI so that instructors can add, configure, and view badges, and so that students can view their badges

        3.1. Add a new "Badges" tab to the assignments/edit page for instructors to add and configure badges

        3.2. Add badge icons to the participants/list page for instructors to view badges

        3.3. Add badge icons to the student_task/list page for students to view badges

4. Write feature tests to verify the modifications

        4.1. Include tests in the a new badge_system_spec.rb file in the spec/features directory

</div>

= Preliminary Mocks =

=== Badges ===

<div style="padding: 10px 25px 25px 25px">

The following Credly badge will be awarded to students who meet the "Good Reviewer" criterion for a given assignment:

[[File:Badge-Good-Reviewer-Small.png|none|frame|Good Reviewer Badge]]

 The following Credly badge will be awarded to team members who meet the "Good Teammate" criterion for a given assignment:

[[File:Badge-Good-Teammate-Small.png|none|frame|Good Teammate Badge]]

</div>

=== Tables ===

<div style="padding: 10px 25px 25px 25px">

The following is an example of mock data in the badges table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | name (varchar)
! style="padding:10px; text-align: center" | description (varchar)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | Good Reviewer
| style="padding:10px; text-align: center" | This badge is awarded to students who receive very high review grades.
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | Good Teammate
| style="padding:10px; text-align: center" | This badge is awarded to team members who receive very high teammate review scores.
|}

 The following is an example of mock data in the assignment_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | assignment_id (foreign key)
! style="padding:10px; text-align: center" | threshold (int)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 90
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 85
|-
| style="padding:10px; text-align: center" | 5
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 80
|}

The first row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The second row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The third row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 2 with a customized threshold of 90.

The fourth row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 2 with a customized threshold of 85.

The fifth row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 3 with a customized threshold of 80.

 The following is an example of mock data in the awarded_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | participant_id (foreign key)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 3
|}

The first row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The second row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.

The third row represents that the assignment participant with participant_id 2 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The fourth row represents that the assignment participant with participant_id 3 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.
</div>

=== Views ===

<div style="padding:10px 25px 25px 25px">

The following screenshots show a comparison of the existing "Assignments Edit" page, alongside a mockup incorporating the new badging system where instructors can add and configure badges for a given assignment.

 [[File:Original-Assignments-Edit.png|none|frame|The original "Assignments Edit" page.]]

 [[File:Modified-Assignments-Edit.png|none|frame|The modified "Assignments Edit" page.]]

 The following screenshots show a comparison of the existing "Participants List" page, alongside a mockup incorporating the new badging system where instructors can view all awarded badges for a given assignment.

 [[File:Original-Participants-List.png|none|frame|The original "Participants List" page.]]

 [[File:Modified-Participants-List.png|none|frame|The modified "Participants List" page.]]

 The following screenshots show a comparison of the existing "Student Task List" page, alongside a mockup incorporating the new badging system where students can view all of the badges they have earned.

 [[File:Original-Student-Task-List.png|none|frame|The original "Student Task List" page.]]

 [[File:Modified-Student-Task-List.png|none|frame|The modified "Student Task List" page.]]

</div>

= Overview of Work Completed =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Testing =

<div style="padding: 10px 25px 25px 25px">

A new badge_system_spec.rb file will be created in the spec/features folder, and will include feature tests that verify the modifications made for the project.

NOTE: More information will be included in this section as the project progresses and the tests are written.

</div>

= Video Demonstrations =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Files Modified =

=== New Files ===

<div style="padding: 10px 25px 25px 25px">

• app/assets/images/badges

        A new directory created to house the new badge image files.

 • app/assets/images/badges/Badge-Good-Reviewer.png

        The image used for the new "Good Reviewer" badge.

 • app/assets/images/badges/Badge-Good-Teammate.png

        The image used for the new "Good Teammate" badge.

 • spec/features/badge_system_spec.rb

        The file holding the new tests written for the badging system.

 • db/migrate/...

        TBD: The migration for the new badges table.

 • db/migrate/...

        TBD: The migration for the new assignment_badges table.

 • db/migrate/...

        TBD: The migration for the new awarded_badges table.
</div>

=== Edited Files ===

<div style="padding: 10px 25px 25px 25px">

• app/models/review_response_map.rb

        The file in which the code for the "Good Reviewer" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/models/teammate_review_response_map.rb

        The file in which the code for the "Good Teammate" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/views/assignments/edit.html.erb

        The UI changes allowing instructors to add and calibrate badges for a given assignment.

 • app/views/participants/list.html.erb

        The UI changes allowing instructors to view badges for the participants of a given assignment.

 • app/views/student_task/list.html.erb

        The UI changes allowing students to view their badges for all of their assignments.

 • db/schema.rb

        Incorporating schema changes for the three new badges, assignment_badges, and awarded_badges tables.

</div>

= References =

<div style="padding: 10px 25px 25px 25px">

Videos summarizing the previous team's work on this project topic can be found [https://www.youtube.com/playlist?list=PLdDBHYYDZueeGNdQtzS2FfI-eC0-SK6cb here].

</div>

File:Modified-Participants-List.png

2017-11-13T03:09:04Z

Tmdement:

File:Original-Participants-List.png

2017-11-13T03:08:53Z

Tmdement: uploaded a new version of "File:Original-Participants-List.png"

File:Modified-Assignments-Edit.png

2017-11-13T02:48:10Z

Tmdement:

CSC/ECE 517 Fall 2017/E17A2 Lightweight Badging System

2017-11-13T02:47:47Z

Tmdement: /* Views */

__TOC__

= Team Contact =

<div style="padding: 10px 25px 25px 25px">

; MEMBERS:

:Priyanka Jain: [mailto:pjain15@ncsu.edu pjain15@ncsu.edu]

:Pushpendra Patel: [mailto:ppatel16@ncsu.edu ppatel16@ncsu.edu]

:Tanay Kothari: [mailto:tkothar@ncsu.edu tkothar@ncsu.edu]

:Timothy Dement: [mailto:tmdement@ncsu.edu tmdement@ncsu.edu]

; MENTOR:

:Zhewei Hu: [mailto:zhu6@ncsu.edu zhu6@ncsu.edu]

</div>

= Project Description =

<div style="padding: 10px 25px 25px 25px">


The goal of this project is to create a simple badging system for Expertiza, allowing students to earn badges when they meet certain predefined criteria while using the platform. The full E17A2 project topic description can be found [https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.u6i7q1mdz0zl here]

 

Per the full project topic description, the badges will be designed using [https://credly.com Credly]. Previous work on this project topic revealed that any text included on the badges is too small to read, so all text should be removed from the badges and instead appear when the badges are hovered over.

 

This project is concerned with two preliminary badges — "Good Reviewer" and "Good Teammate" — but the design will be such that the badging system can be easily extended to include more badges in the future. The "Good Reviewer" badge will be awarded to students who receive very high review grades. The "Good Teammate" badge will be awarded to team members who receive very high teammate review scores. By default, the "threshold" for earning these badges will be set to a score of 95, but this value will be configurable on a per-assignment basis by the instructor.

 

A new "Badges" tab will be added for instructors on the "Edit Assignment" page where instructors can add badges and configure the badge criteria for a given assignment. Badges a student has earned can be seen when they view their "Task List" page, and an instructor will be able to view all badges earned by students when they view the "Participants List" page.

 

Please refer to the sections below for further detail.

</div>

= Project Requirements =

<div style="padding: 10px 25px 25px 25px">

1. Create badges using Credly (do not include text)

        1.1. Create the "Good Reviewer" Badge

        1.2. Create the "Good Teammate" Badge

        1.3. Store these badge images in the app/assets/images/badges directory

2. Create tables for the badging system

        2.1. Create a table named badges with the following attributes

                2.1.1. id — primary key

                2.1.2. name — varchar

                2.1.3. description — varchar

        2.2. Create a mapping table named assignment_badges with the following attributes

                2.2.1 id — primary key

                2.2.2 badge_id — foreign key

                2.2.3 assignment_id — foreign key

                2.2.4 threshold — int

        2.3. Create a mapping table named awarded_badges with the following attributes

                2.3.1. id — primary key

                2.3.2. badge_id — foreign key

                2.3.3. participant_id — foreign key

3. Change the UI so that instructors can add, configure, and view badges, and so that students can view their badges

        3.1. Add a new "Badges" tab to the assignments/edit page for instructors to add and configure badges

        3.2. Add badge icons to the participants/list page for instructors to view badges

        3.3. Add badge icons to the student_task/list page for students to view badges

4. Write feature tests to verify the modifications

        4.1. Include tests in the a new badge_system_spec.rb file in the spec/features directory

</div>

= Preliminary Mocks =

=== Badges ===

<div style="padding: 10px 25px 25px 25px">

The following Credly badge will be awarded to students who meet the "Good Reviewer" criterion for a given assignment:

[[File:Badge-Good-Reviewer-Small.png|none|frame|Good Reviewer Badge]]

 The following Credly badge will be awarded to team members who meet the "Good Teammate" criterion for a given assignment:

[[File:Badge-Good-Teammate-Small.png|none|frame|Good Teammate Badge]]

</div>

=== Tables ===

<div style="padding: 10px 25px 25px 25px">

The following is an example of mock data in the badges table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | name (varchar)
! style="padding:10px; text-align: center" | description (varchar)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | Good Reviewer
| style="padding:10px; text-align: center" | This badge is awarded to students who receive very high review grades.
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | Good Teammate
| style="padding:10px; text-align: center" | This badge is awarded to team members who receive very high teammate review scores.
|}

 The following is an example of mock data in the assignment_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | assignment_id (foreign key)
! style="padding:10px; text-align: center" | threshold (int)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 90
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 85
|-
| style="padding:10px; text-align: center" | 5
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 80
|}

The first row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The second row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The third row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 2 with a customized threshold of 90.

The fourth row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 2 with a customized threshold of 85.

The fifth row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 3 with a customized threshold of 80.

 The following is an example of mock data in the awarded_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | participant_id (foreign key)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 3
|}

The first row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The second row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.

The third row represents that the assignment participant with participant_id 2 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The fourth row represents that the assignment participant with participant_id 3 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.
</div>

=== Views ===

<div style="padding:10px 25px 25px 25px">

The following screenshots show a comparison of the existing "Assignments Edit" page, alongside a mockup incorporating the new badging system where instructors can add and configure badges for a given assignment.

 [[File:Original-Assignments-Edit.png|none|frame|The original "Assignments Edit" page.]]

 [[File:Modified-Assignments-Edit.png|none|frame|The modified "Assignments Edit" page.]]

 The following screenshots show a comparison of the existing "Participants List" page, alongside a mockup incorporating the new badging system where instructors can view all awarded badges for a given assignment.

 [[File:Original-Participants-List.png|none|frame|The original "Participants List" page.]]

 INCLUDE MOCKUP HERE

 The following screenshots show a comparison of the existing "Student Task List" page, alongside a mockup incorporating the new badging system where students can view all of the badges they have earned.

 [[File:Original-Student-Task-List.png|none|frame|The original "Student Task List" page.]]

 [[File:Modified-Student-Task-List.png|none|frame|The modified "Student Task List" page.]]

</div>

= Overview of Work Completed =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Testing =

<div style="padding: 10px 25px 25px 25px">

A new badge_system_spec.rb file will be created in the spec/features folder, and will include feature tests that verify the modifications made for the project.

NOTE: More information will be included in this section as the project progresses and the tests are written.

</div>

= Video Demonstrations =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Files Modified =

=== New Files ===

<div style="padding: 10px 25px 25px 25px">

• app/assets/images/badges

        A new directory created to house the new badge image files.

 • app/assets/images/badges/Badge-Good-Reviewer.png

        The image used for the new "Good Reviewer" badge.

 • app/assets/images/badges/Badge-Good-Teammate.png

        The image used for the new "Good Teammate" badge.

 • spec/features/badge_system_spec.rb

        The file holding the new tests written for the badging system.

 • db/migrate/...

        TBD: The migration for the new badges table.

 • db/migrate/...

        TBD: The migration for the new assignment_badges table.

 • db/migrate/...

        TBD: The migration for the new awarded_badges table.
</div>

=== Edited Files ===

<div style="padding: 10px 25px 25px 25px">

• app/models/review_response_map.rb

        The file in which the code for the "Good Reviewer" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/models/teammate_review_response_map.rb

        The file in which the code for the "Good Teammate" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/views/assignments/edit.html.erb

        The UI changes allowing instructors to add and calibrate badges for a given assignment.

 • app/views/participants/list.html.erb

        The UI changes allowing instructors to view badges for the participants of a given assignment.

 • app/views/student_task/list.html.erb

        The UI changes allowing students to view their badges for all of their assignments.

 • db/schema.rb

        Incorporating schema changes for the three new badges, assignment_badges, and awarded_badges tables.

</div>

= References =

<div style="padding: 10px 25px 25px 25px">

Videos summarizing the previous team's work on this project topic can be found [https://www.youtube.com/playlist?list=PLdDBHYYDZueeGNdQtzS2FfI-eC0-SK6cb here].

</div>

File:Original-Assignments-Edit.png

2017-11-13T02:17:22Z

Tmdement:

CSC/ECE 517 Fall 2017/E17A2 Lightweight Badging System

2017-11-13T02:16:44Z

Tmdement: /* Views */

__TOC__

= Team Contact =

<div style="padding: 10px 25px 25px 25px">

; MEMBERS:

:Priyanka Jain: [mailto:pjain15@ncsu.edu pjain15@ncsu.edu]

:Pushpendra Patel: [mailto:ppatel16@ncsu.edu ppatel16@ncsu.edu]

:Tanay Kothari: [mailto:tkothar@ncsu.edu tkothar@ncsu.edu]

:Timothy Dement: [mailto:tmdement@ncsu.edu tmdement@ncsu.edu]

; MENTOR:

:Zhewei Hu: [mailto:zhu6@ncsu.edu zhu6@ncsu.edu]

</div>

= Project Description =

<div style="padding: 10px 25px 25px 25px">


The goal of this project is to create a simple badging system for Expertiza, allowing students to earn badges when they meet certain predefined criteria while using the platform. The full E17A2 project topic description can be found [https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.u6i7q1mdz0zl here]

 

Per the full project topic description, the badges will be designed using [https://credly.com Credly]. Previous work on this project topic revealed that any text included on the badges is too small to read, so all text should be removed from the badges and instead appear when the badges are hovered over.

 

This project is concerned with two preliminary badges — "Good Reviewer" and "Good Teammate" — but the design will be such that the badging system can be easily extended to include more badges in the future. The "Good Reviewer" badge will be awarded to students who receive very high review grades. The "Good Teammate" badge will be awarded to team members who receive very high teammate review scores. By default, the "threshold" for earning these badges will be set to a score of 95, but this value will be configurable on a per-assignment basis by the instructor.

 

A new "Badges" tab will be added for instructors on the "Edit Assignment" page where instructors can add badges and configure the badge criteria for a given assignment. Badges a student has earned can be seen when they view their "Task List" page, and an instructor will be able to view all badges earned by students when they view the "Participants List" page.

 

Please refer to the sections below for further detail.

</div>

= Project Requirements =

<div style="padding: 10px 25px 25px 25px">

1. Create badges using Credly (do not include text)

        1.1. Create the "Good Reviewer" Badge

        1.2. Create the "Good Teammate" Badge

        1.3. Store these badge images in the app/assets/images/badges directory

2. Create tables for the badging system

        2.1. Create a table named badges with the following attributes

                2.1.1. id — primary key

                2.1.2. name — varchar

                2.1.3. description — varchar

        2.2. Create a mapping table named assignment_badges with the following attributes

                2.2.1 id — primary key

                2.2.2 badge_id — foreign key

                2.2.3 assignment_id — foreign key

                2.2.4 threshold — int

        2.3. Create a mapping table named awarded_badges with the following attributes

                2.3.1. id — primary key

                2.3.2. badge_id — foreign key

                2.3.3. participant_id — foreign key

3. Change the UI so that instructors can add, configure, and view badges, and so that students can view their badges

        3.1. Add a new "Badges" tab to the assignments/edit page for instructors to add and configure badges

        3.2. Add badge icons to the participants/list page for instructors to view badges

        3.3. Add badge icons to the student_task/list page for students to view badges

4. Write feature tests to verify the modifications

        4.1. Include tests in the a new badge_system_spec.rb file in the spec/features directory

</div>

= Preliminary Mocks =

=== Badges ===

<div style="padding: 10px 25px 25px 25px">

The following Credly badge will be awarded to students who meet the "Good Reviewer" criterion for a given assignment:

[[File:Badge-Good-Reviewer-Small.png|none|frame|Good Reviewer Badge]]

 The following Credly badge will be awarded to team members who meet the "Good Teammate" criterion for a given assignment:

[[File:Badge-Good-Teammate-Small.png|none|frame|Good Teammate Badge]]

</div>

=== Tables ===

<div style="padding: 10px 25px 25px 25px">

The following is an example of mock data in the badges table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | name (varchar)
! style="padding:10px; text-align: center" | description (varchar)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | Good Reviewer
| style="padding:10px; text-align: center" | This badge is awarded to students who receive very high review grades.
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | Good Teammate
| style="padding:10px; text-align: center" | This badge is awarded to team members who receive very high teammate review scores.
|}

 The following is an example of mock data in the assignment_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | assignment_id (foreign key)
! style="padding:10px; text-align: center" | threshold (int)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 90
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 85
|-
| style="padding:10px; text-align: center" | 5
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 80
|}

The first row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The second row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The third row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 2 with a customized threshold of 90.

The fourth row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 2 with a customized threshold of 85.

The fifth row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 3 with a customized threshold of 80.

 The following is an example of mock data in the awarded_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | participant_id (foreign key)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 3
|}

The first row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The second row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.

The third row represents that the assignment participant with participant_id 2 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The fourth row represents that the assignment participant with participant_id 3 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.
</div>

=== Views ===

<div style="padding:10px 25px 25px 25px">

The following screenshots show a comparison of the existing "Assignments Edit" page, alongside a mockup incorporating the new badging system where instructors can add and configure badges for a given assignment.

 [[File:Original-Assignments-Edit.png|none|frame|The original "Assignments Edit" page.]]

 INCLUDE MOCKUP HERE

 The following screenshots show a comparison of the existing "Participants List" page, alongside a mockup incorporating the new badging system where instructors can view all awarded badges for a given assignment.

 [[File:Original-Participants-List.png|none|frame|The original "Participants List" page.]]

 INCLUDE MOCKUP HERE

 The following screenshots show a comparison of the existing "Student Task List" page, alongside a mockup incorporating the new badging system where students can view all of the badges they have earned.

 [[File:Original-Student-Task-List.png|none|frame|The original "Student Task List" page.]]

 [[File:Modified-Student-Task-List.png|none|frame|The modified "Student Task List" page.]]

</div>

= Overview of Work Completed =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Testing =

<div style="padding: 10px 25px 25px 25px">

A new badge_system_spec.rb file will be created in the spec/features folder, and will include feature tests that verify the modifications made for the project.

NOTE: More information will be included in this section as the project progresses and the tests are written.

</div>

= Video Demonstrations =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Files Modified =

=== New Files ===

<div style="padding: 10px 25px 25px 25px">

• app/assets/images/badges

        A new directory created to house the new badge image files.

 • app/assets/images/badges/Badge-Good-Reviewer.png

        The image used for the new "Good Reviewer" badge.

 • app/assets/images/badges/Badge-Good-Teammate.png

        The image used for the new "Good Teammate" badge.

 • spec/features/badge_system_spec.rb

        The file holding the new tests written for the badging system.

 • db/migrate/...

        TBD: The migration for the new badges table.

 • db/migrate/...

        TBD: The migration for the new assignment_badges table.

 • db/migrate/...

        TBD: The migration for the new awarded_badges table.
</div>

=== Edited Files ===

<div style="padding: 10px 25px 25px 25px">

• app/models/review_response_map.rb

        The file in which the code for the "Good Reviewer" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/models/teammate_review_response_map.rb

        The file in which the code for the "Good Teammate" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/views/assignments/edit.html.erb

        The UI changes allowing instructors to add and calibrate badges for a given assignment.

 • app/views/participants/list.html.erb

        The UI changes allowing instructors to view badges for the participants of a given assignment.

 • app/views/student_task/list.html.erb

        The UI changes allowing students to view their badges for all of their assignments.

 • db/schema.rb

        Incorporating schema changes for the three new badges, assignment_badges, and awarded_badges tables.

</div>

= References =

<div style="padding: 10px 25px 25px 25px">

Videos summarizing the previous team's work on this project topic can be found [https://www.youtube.com/playlist?list=PLdDBHYYDZueeGNdQtzS2FfI-eC0-SK6cb here].

</div>

File:Modified-Student-Task-List.png

2017-11-13T02:15:17Z

Tmdement: -

CSC/ECE 517 Fall 2017/E17A2 Lightweight Badging System

2017-11-13T02:14:15Z

Tmdement: /* Views */

__TOC__

= Team Contact =

<div style="padding: 10px 25px 25px 25px">

; MEMBERS:

:Priyanka Jain: [mailto:pjain15@ncsu.edu pjain15@ncsu.edu]

:Pushpendra Patel: [mailto:ppatel16@ncsu.edu ppatel16@ncsu.edu]

:Tanay Kothari: [mailto:tkothar@ncsu.edu tkothar@ncsu.edu]

:Timothy Dement: [mailto:tmdement@ncsu.edu tmdement@ncsu.edu]

; MENTOR:

:Zhewei Hu: [mailto:zhu6@ncsu.edu zhu6@ncsu.edu]

</div>

= Project Description =

<div style="padding: 10px 25px 25px 25px">


The goal of this project is to create a simple badging system for Expertiza, allowing students to earn badges when they meet certain predefined criteria while using the platform. The full E17A2 project topic description can be found [https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.u6i7q1mdz0zl here]

 

Per the full project topic description, the badges will be designed using [https://credly.com Credly]. Previous work on this project topic revealed that any text included on the badges is too small to read, so all text should be removed from the badges and instead appear when the badges are hovered over.

 

This project is concerned with two preliminary badges — "Good Reviewer" and "Good Teammate" — but the design will be such that the badging system can be easily extended to include more badges in the future. The "Good Reviewer" badge will be awarded to students who receive very high review grades. The "Good Teammate" badge will be awarded to team members who receive very high teammate review scores. By default, the "threshold" for earning these badges will be set to a score of 95, but this value will be configurable on a per-assignment basis by the instructor.

 

A new "Badges" tab will be added for instructors on the "Edit Assignment" page where instructors can add badges and configure the badge criteria for a given assignment. Badges a student has earned can be seen when they view their "Task List" page, and an instructor will be able to view all badges earned by students when they view the "Participants List" page.

 

Please refer to the sections below for further detail.

</div>

= Project Requirements =

<div style="padding: 10px 25px 25px 25px">

1. Create badges using Credly (do not include text)

        1.1. Create the "Good Reviewer" Badge

        1.2. Create the "Good Teammate" Badge

        1.3. Store these badge images in the app/assets/images/badges directory

2. Create tables for the badging system

        2.1. Create a table named badges with the following attributes

                2.1.1. id — primary key

                2.1.2. name — varchar

                2.1.3. description — varchar

        2.2. Create a mapping table named assignment_badges with the following attributes

                2.2.1 id — primary key

                2.2.2 badge_id — foreign key

                2.2.3 assignment_id — foreign key

                2.2.4 threshold — int

        2.3. Create a mapping table named awarded_badges with the following attributes

                2.3.1. id — primary key

                2.3.2. badge_id — foreign key

                2.3.3. participant_id — foreign key

3. Change the UI so that instructors can add, configure, and view badges, and so that students can view their badges

        3.1. Add a new "Badges" tab to the assignments/edit page for instructors to add and configure badges

        3.2. Add badge icons to the participants/list page for instructors to view badges

        3.3. Add badge icons to the student_task/list page for students to view badges

4. Write feature tests to verify the modifications

        4.1. Include tests in the a new badge_system_spec.rb file in the spec/features directory

</div>

= Preliminary Mocks =

=== Badges ===

<div style="padding: 10px 25px 25px 25px">

The following Credly badge will be awarded to students who meet the "Good Reviewer" criterion for a given assignment:

[[File:Badge-Good-Reviewer-Small.png|none|frame|Good Reviewer Badge]]

 The following Credly badge will be awarded to team members who meet the "Good Teammate" criterion for a given assignment:

[[File:Badge-Good-Teammate-Small.png|none|frame|Good Teammate Badge]]

</div>

=== Tables ===

<div style="padding: 10px 25px 25px 25px">

The following is an example of mock data in the badges table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | name (varchar)
! style="padding:10px; text-align: center" | description (varchar)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | Good Reviewer
| style="padding:10px; text-align: center" | This badge is awarded to students who receive very high review grades.
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | Good Teammate
| style="padding:10px; text-align: center" | This badge is awarded to team members who receive very high teammate review scores.
|}

 The following is an example of mock data in the assignment_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | assignment_id (foreign key)
! style="padding:10px; text-align: center" | threshold (int)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 90
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 85
|-
| style="padding:10px; text-align: center" | 5
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 80
|}

The first row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The second row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The third row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 2 with a customized threshold of 90.

The fourth row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 2 with a customized threshold of 85.

The fifth row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 3 with a customized threshold of 80.

 The following is an example of mock data in the awarded_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | participant_id (foreign key)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 3
|}

The first row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The second row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.

The third row represents that the assignment participant with participant_id 2 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The fourth row represents that the assignment participant with participant_id 3 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.
</div>

=== Views ===

<div style="padding:10px 25px 25px 25px">

The following screenshots show a comparison of the existing "Assignments Edit" page, alongside a mockup incorporating the new badging system where instructors can add and configure badges for a given assignment.

 [[File:Original-Assignment-Edit.png|none|frame|The original "Assignments Edit" page.]]

 INCLUDE MOCKUP HERE

 The following screenshots show a comparison of the existing "Participants List" page, alongside a mockup incorporating the new badging system where instructors can view all awarded badges for a given assignment.

 [[File:Original-Participants-List.png|none|frame|The original "Participants List" page.]]

 INCLUDE MOCKUP HERE

 The following screenshots show a comparison of the existing "Student Task List" page, alongside a mockup incorporating the new badging system where students can view all of the badges they have earned.

 [[File:Original-Student-Task-List.png|none|frame|The original "Student Task List" page.]]

 [[File:Modified-Student-Task-List.png|none|frame|The modified "Student Task List" page.]]

</div>

= Overview of Work Completed =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Testing =

<div style="padding: 10px 25px 25px 25px">

A new badge_system_spec.rb file will be created in the spec/features folder, and will include feature tests that verify the modifications made for the project.

NOTE: More information will be included in this section as the project progresses and the tests are written.

</div>

= Video Demonstrations =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Files Modified =

=== New Files ===

<div style="padding: 10px 25px 25px 25px">

• app/assets/images/badges

        A new directory created to house the new badge image files.

 • app/assets/images/badges/Badge-Good-Reviewer.png

        The image used for the new "Good Reviewer" badge.

 • app/assets/images/badges/Badge-Good-Teammate.png

        The image used for the new "Good Teammate" badge.

 • spec/features/badge_system_spec.rb

        The file holding the new tests written for the badging system.

 • db/migrate/...

        TBD: The migration for the new badges table.

 • db/migrate/...

        TBD: The migration for the new assignment_badges table.

 • db/migrate/...

        TBD: The migration for the new awarded_badges table.
</div>

=== Edited Files ===

<div style="padding: 10px 25px 25px 25px">

• app/models/review_response_map.rb

        The file in which the code for the "Good Reviewer" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/models/teammate_review_response_map.rb

        The file in which the code for the "Good Teammate" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/views/assignments/edit.html.erb

        The UI changes allowing instructors to add and calibrate badges for a given assignment.

 • app/views/participants/list.html.erb

        The UI changes allowing instructors to view badges for the participants of a given assignment.

 • app/views/student_task/list.html.erb

        The UI changes allowing students to view their badges for all of their assignments.

 • db/schema.rb

        Incorporating schema changes for the three new badges, assignment_badges, and awarded_badges tables.

</div>

= References =

<div style="padding: 10px 25px 25px 25px">

Videos summarizing the previous team's work on this project topic can be found [https://www.youtube.com/playlist?list=PLdDBHYYDZueeGNdQtzS2FfI-eC0-SK6cb here].

</div>

File:Modified-Assignment-Edit.png

2017-11-13T02:13:35Z

Tmdement:

CSC/ECE 517 Fall 2017/E17A2 Lightweight Badging System

2017-11-13T02:12:33Z

Tmdement: /* Views */

__TOC__

= Team Contact =

<div style="padding: 10px 25px 25px 25px">

; MEMBERS:

:Priyanka Jain: [mailto:pjain15@ncsu.edu pjain15@ncsu.edu]

:Pushpendra Patel: [mailto:ppatel16@ncsu.edu ppatel16@ncsu.edu]

:Tanay Kothari: [mailto:tkothar@ncsu.edu tkothar@ncsu.edu]

:Timothy Dement: [mailto:tmdement@ncsu.edu tmdement@ncsu.edu]

; MENTOR:

:Zhewei Hu: [mailto:zhu6@ncsu.edu zhu6@ncsu.edu]

</div>

= Project Description =

<div style="padding: 10px 25px 25px 25px">


The goal of this project is to create a simple badging system for Expertiza, allowing students to earn badges when they meet certain predefined criteria while using the platform. The full E17A2 project topic description can be found [https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.u6i7q1mdz0zl here]

 

Per the full project topic description, the badges will be designed using [https://credly.com Credly]. Previous work on this project topic revealed that any text included on the badges is too small to read, so all text should be removed from the badges and instead appear when the badges are hovered over.

 

This project is concerned with two preliminary badges — "Good Reviewer" and "Good Teammate" — but the design will be such that the badging system can be easily extended to include more badges in the future. The "Good Reviewer" badge will be awarded to students who receive very high review grades. The "Good Teammate" badge will be awarded to team members who receive very high teammate review scores. By default, the "threshold" for earning these badges will be set to a score of 95, but this value will be configurable on a per-assignment basis by the instructor.

 

A new "Badges" tab will be added for instructors on the "Edit Assignment" page where instructors can add badges and configure the badge criteria for a given assignment. Badges a student has earned can be seen when they view their "Task List" page, and an instructor will be able to view all badges earned by students when they view the "Participants List" page.

 

Please refer to the sections below for further detail.

</div>

= Project Requirements =

<div style="padding: 10px 25px 25px 25px">

1. Create badges using Credly (do not include text)

        1.1. Create the "Good Reviewer" Badge

        1.2. Create the "Good Teammate" Badge

        1.3. Store these badge images in the app/assets/images/badges directory

2. Create tables for the badging system

        2.1. Create a table named badges with the following attributes

                2.1.1. id — primary key

                2.1.2. name — varchar

                2.1.3. description — varchar

        2.2. Create a mapping table named assignment_badges with the following attributes

                2.2.1 id — primary key

                2.2.2 badge_id — foreign key

                2.2.3 assignment_id — foreign key

                2.2.4 threshold — int

        2.3. Create a mapping table named awarded_badges with the following attributes

                2.3.1. id — primary key

                2.3.2. badge_id — foreign key

                2.3.3. participant_id — foreign key

3. Change the UI so that instructors can add, configure, and view badges, and so that students can view their badges

        3.1. Add a new "Badges" tab to the assignments/edit page for instructors to add and configure badges

        3.2. Add badge icons to the participants/list page for instructors to view badges

        3.3. Add badge icons to the student_task/list page for students to view badges

4. Write feature tests to verify the modifications

        4.1. Include tests in the a new badge_system_spec.rb file in the spec/features directory

</div>

= Preliminary Mocks =

=== Badges ===

<div style="padding: 10px 25px 25px 25px">

The following Credly badge will be awarded to students who meet the "Good Reviewer" criterion for a given assignment:

[[File:Badge-Good-Reviewer-Small.png|none|frame|Good Reviewer Badge]]

 The following Credly badge will be awarded to team members who meet the "Good Teammate" criterion for a given assignment:

[[File:Badge-Good-Teammate-Small.png|none|frame|Good Teammate Badge]]

</div>

=== Tables ===

<div style="padding: 10px 25px 25px 25px">

The following is an example of mock data in the badges table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | name (varchar)
! style="padding:10px; text-align: center" | description (varchar)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | Good Reviewer
| style="padding:10px; text-align: center" | This badge is awarded to students who receive very high review grades.
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | Good Teammate
| style="padding:10px; text-align: center" | This badge is awarded to team members who receive very high teammate review scores.
|}

 The following is an example of mock data in the assignment_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | assignment_id (foreign key)
! style="padding:10px; text-align: center" | threshold (int)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 90
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 85
|-
| style="padding:10px; text-align: center" | 5
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 80
|}

The first row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The second row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The third row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 2 with a customized threshold of 90.

The fourth row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 2 with a customized threshold of 85.

The fifth row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 3 with a customized threshold of 80.

 The following is an example of mock data in the awarded_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | participant_id (foreign key)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 3
|}

The first row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The second row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.

The third row represents that the assignment participant with participant_id 2 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The fourth row represents that the assignment participant with participant_id 3 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.
</div>

=== Views ===

<div style="padding:10px 25px 25px 25px">

The following screenshots show a comparison of the existing "Assignments Edit" page, alongside a mockup incorporating the new badging system where instructors can add and configure badges for a given assignment.

 [[File:Original-Assignment-Edit.png|none|frame|The original "Assignments Edit" page.]]

 INCLUDE MOCKUP HERE

 The following screenshots show a comparison of the existing "Participants List" page, alongside a mockup incorporating the new badging system where instructors can view all awarded badges for a given assignment.

 [[File:Original-Participants-List.png|none|frame|The original "Participants List" page.]]

 INCLUDE MOCKUP HERE

 The following screenshots show a comparison of the existing "Student Task List" page, alongside a mockup incorporating the new badging system where students can view all of the badges they have earned.

 [[File:Original-Student-Task-List.png|none|frame|The original "Student Task List" page.]]

 INCLUDE MOCKUP HERE

</div>

= Overview of Work Completed =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Testing =

<div style="padding: 10px 25px 25px 25px">

A new badge_system_spec.rb file will be created in the spec/features folder, and will include feature tests that verify the modifications made for the project.

NOTE: More information will be included in this section as the project progresses and the tests are written.

</div>

= Video Demonstrations =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Files Modified =

=== New Files ===

<div style="padding: 10px 25px 25px 25px">

• app/assets/images/badges

        A new directory created to house the new badge image files.

 • app/assets/images/badges/Badge-Good-Reviewer.png

        The image used for the new "Good Reviewer" badge.

 • app/assets/images/badges/Badge-Good-Teammate.png

        The image used for the new "Good Teammate" badge.

 • spec/features/badge_system_spec.rb

        The file holding the new tests written for the badging system.

 • db/migrate/...

        TBD: The migration for the new badges table.

 • db/migrate/...

        TBD: The migration for the new assignment_badges table.

 • db/migrate/...

        TBD: The migration for the new awarded_badges table.
</div>

=== Edited Files ===

<div style="padding: 10px 25px 25px 25px">

• app/models/review_response_map.rb

        The file in which the code for the "Good Reviewer" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/models/teammate_review_response_map.rb

        The file in which the code for the "Good Teammate" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/views/assignments/edit.html.erb

        The UI changes allowing instructors to add and calibrate badges for a given assignment.

 • app/views/participants/list.html.erb

        The UI changes allowing instructors to view badges for the participants of a given assignment.

 • app/views/student_task/list.html.erb

        The UI changes allowing students to view their badges for all of their assignments.

 • db/schema.rb

        Incorporating schema changes for the three new badges, assignment_badges, and awarded_badges tables.

</div>

= References =

<div style="padding: 10px 25px 25px 25px">

Videos summarizing the previous team's work on this project topic can be found [https://www.youtube.com/playlist?list=PLdDBHYYDZueeGNdQtzS2FfI-eC0-SK6cb here].

</div>

CSC/ECE 517 Fall 2017/E17A2 Lightweight Badging System

2017-11-13T02:11:28Z

Tmdement: /* Views */

__TOC__

= Team Contact =

<div style="padding: 10px 25px 25px 25px">

; MEMBERS:

:Priyanka Jain: [mailto:pjain15@ncsu.edu pjain15@ncsu.edu]

:Pushpendra Patel: [mailto:ppatel16@ncsu.edu ppatel16@ncsu.edu]

:Tanay Kothari: [mailto:tkothar@ncsu.edu tkothar@ncsu.edu]

:Timothy Dement: [mailto:tmdement@ncsu.edu tmdement@ncsu.edu]

; MENTOR:

:Zhewei Hu: [mailto:zhu6@ncsu.edu zhu6@ncsu.edu]

</div>

= Project Description =

<div style="padding: 10px 25px 25px 25px">


The goal of this project is to create a simple badging system for Expertiza, allowing students to earn badges when they meet certain predefined criteria while using the platform. The full E17A2 project topic description can be found [https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.u6i7q1mdz0zl here]

 

Per the full project topic description, the badges will be designed using [https://credly.com Credly]. Previous work on this project topic revealed that any text included on the badges is too small to read, so all text should be removed from the badges and instead appear when the badges are hovered over.

 

This project is concerned with two preliminary badges — "Good Reviewer" and "Good Teammate" — but the design will be such that the badging system can be easily extended to include more badges in the future. The "Good Reviewer" badge will be awarded to students who receive very high review grades. The "Good Teammate" badge will be awarded to team members who receive very high teammate review scores. By default, the "threshold" for earning these badges will be set to a score of 95, but this value will be configurable on a per-assignment basis by the instructor.

 

A new "Badges" tab will be added for instructors on the "Edit Assignment" page where instructors can add badges and configure the badge criteria for a given assignment. Badges a student has earned can be seen when they view their "Task List" page, and an instructor will be able to view all badges earned by students when they view the "Participants List" page.

 

Please refer to the sections below for further detail.

</div>

= Project Requirements =

<div style="padding: 10px 25px 25px 25px">

1. Create badges using Credly (do not include text)

        1.1. Create the "Good Reviewer" Badge

        1.2. Create the "Good Teammate" Badge

        1.3. Store these badge images in the app/assets/images/badges directory

2. Create tables for the badging system

        2.1. Create a table named badges with the following attributes

                2.1.1. id — primary key

                2.1.2. name — varchar

                2.1.3. description — varchar

        2.2. Create a mapping table named assignment_badges with the following attributes

                2.2.1 id — primary key

                2.2.2 badge_id — foreign key

                2.2.3 assignment_id — foreign key

                2.2.4 threshold — int

        2.3. Create a mapping table named awarded_badges with the following attributes

                2.3.1. id — primary key

                2.3.2. badge_id — foreign key

                2.3.3. participant_id — foreign key

3. Change the UI so that instructors can add, configure, and view badges, and so that students can view their badges

        3.1. Add a new "Badges" tab to the assignments/edit page for instructors to add and configure badges

        3.2. Add badge icons to the participants/list page for instructors to view badges

        3.3. Add badge icons to the student_task/list page for students to view badges

4. Write feature tests to verify the modifications

        4.1. Include tests in the a new badge_system_spec.rb file in the spec/features directory

</div>

= Preliminary Mocks =

=== Badges ===

<div style="padding: 10px 25px 25px 25px">

The following Credly badge will be awarded to students who meet the "Good Reviewer" criterion for a given assignment:

[[File:Badge-Good-Reviewer-Small.png|none|frame|Good Reviewer Badge]]

 The following Credly badge will be awarded to team members who meet the "Good Teammate" criterion for a given assignment:

[[File:Badge-Good-Teammate-Small.png|none|frame|Good Teammate Badge]]

</div>

=== Tables ===

<div style="padding: 10px 25px 25px 25px">

The following is an example of mock data in the badges table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | name (varchar)
! style="padding:10px; text-align: center" | description (varchar)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | Good Reviewer
| style="padding:10px; text-align: center" | This badge is awarded to students who receive very high review grades.
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | Good Teammate
| style="padding:10px; text-align: center" | This badge is awarded to team members who receive very high teammate review scores.
|}

 The following is an example of mock data in the assignment_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | assignment_id (foreign key)
! style="padding:10px; text-align: center" | threshold (int)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 90
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 85
|-
| style="padding:10px; text-align: center" | 5
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 80
|}

The first row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The second row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The third row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 2 with a customized threshold of 90.

The fourth row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 2 with a customized threshold of 85.

The fifth row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 3 with a customized threshold of 80.

 The following is an example of mock data in the awarded_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | participant_id (foreign key)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 3
|}

The first row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The second row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.

The third row represents that the assignment participant with participant_id 2 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The fourth row represents that the assignment participant with participant_id 3 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.
</div>

=== Views ===

<div style="padding:10px 25px 25px 25px">

The following screenshots show a comparison of the existing "Assignments Edit" page, alongside a mockup incorporating the new badging system where instructors can add and configure badges for a given assignment.

 [[File:Original-Assignments-Edit.png|none|frame|The original "Assignments Edit" page.]]

 INCLUDE MOCKUP HERE

 The following screenshots show a comparison of the existing "Participants List" page, alongside a mockup incorporating the new badging system where instructors can view all awarded badges for a given assignment.

 [[File:Original-Participants-List.png|none|frame|The original "Participants List" page.]]

 INCLUDE MOCKUP HERE

 The following screenshots show a comparison of the existing "Student Task List" page, alongside a mockup incorporating the new badging system where students can view all of the badges they have earned.

 [[File:Original-Student-Task-List.png|none|frame|The original "Student Task List" page.]]

 INCLUDE MOCKUP HERE

</div>

= Overview of Work Completed =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Testing =

<div style="padding: 10px 25px 25px 25px">

A new badge_system_spec.rb file will be created in the spec/features folder, and will include feature tests that verify the modifications made for the project.

NOTE: More information will be included in this section as the project progresses and the tests are written.

</div>

= Video Demonstrations =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Files Modified =

=== New Files ===

<div style="padding: 10px 25px 25px 25px">

• app/assets/images/badges

        A new directory created to house the new badge image files.

 • app/assets/images/badges/Badge-Good-Reviewer.png

        The image used for the new "Good Reviewer" badge.

 • app/assets/images/badges/Badge-Good-Teammate.png

        The image used for the new "Good Teammate" badge.

 • spec/features/badge_system_spec.rb

        The file holding the new tests written for the badging system.

 • db/migrate/...

        TBD: The migration for the new badges table.

 • db/migrate/...

        TBD: The migration for the new assignment_badges table.

 • db/migrate/...

        TBD: The migration for the new awarded_badges table.
</div>

=== Edited Files ===

<div style="padding: 10px 25px 25px 25px">

• app/models/review_response_map.rb

        The file in which the code for the "Good Reviewer" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/models/teammate_review_response_map.rb

        The file in which the code for the "Good Teammate" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/views/assignments/edit.html.erb

        The UI changes allowing instructors to add and calibrate badges for a given assignment.

 • app/views/participants/list.html.erb

        The UI changes allowing instructors to view badges for the participants of a given assignment.

 • app/views/student_task/list.html.erb

        The UI changes allowing students to view their badges for all of their assignments.

 • db/schema.rb

        Incorporating schema changes for the three new badges, assignment_badges, and awarded_badges tables.

</div>

= References =

<div style="padding: 10px 25px 25px 25px">

Videos summarizing the previous team's work on this project topic can be found [https://www.youtube.com/playlist?list=PLdDBHYYDZueeGNdQtzS2FfI-eC0-SK6cb here].

</div>

CSC/ECE 517 Fall 2017/E17A2 Lightweight Badging System

2017-11-13T01:46:41Z

Tmdement: /* Views */

__TOC__

= Team Contact =

<div style="padding: 10px 25px 25px 25px">

; MEMBERS:

:Priyanka Jain: [mailto:pjain15@ncsu.edu pjain15@ncsu.edu]

:Pushpendra Patel: [mailto:ppatel16@ncsu.edu ppatel16@ncsu.edu]

:Tanay Kothari: [mailto:tkothar@ncsu.edu tkothar@ncsu.edu]

:Timothy Dement: [mailto:tmdement@ncsu.edu tmdement@ncsu.edu]

; MENTOR:

:Zhewei Hu: [mailto:zhu6@ncsu.edu zhu6@ncsu.edu]

</div>

= Project Description =

<div style="padding: 10px 25px 25px 25px">


The goal of this project is to create a simple badging system for Expertiza, allowing students to earn badges when they meet certain predefined criteria while using the platform. The full E17A2 project topic description can be found [https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.u6i7q1mdz0zl here]

 

Per the full project topic description, the badges will be designed using [https://credly.com Credly]. Previous work on this project topic revealed that any text included on the badges is too small to read, so all text should be removed from the badges and instead appear when the badges are hovered over.

 

This project is concerned with two preliminary badges — "Good Reviewer" and "Good Teammate" — but the design will be such that the badging system can be easily extended to include more badges in the future. The "Good Reviewer" badge will be awarded to students who receive very high review grades. The "Good Teammate" badge will be awarded to team members who receive very high teammate review scores. By default, the "threshold" for earning these badges will be set to a score of 95, but this value will be configurable on a per-assignment basis by the instructor.

 

A new "Badges" tab will be added for instructors on the "Edit Assignment" page where instructors can add badges and configure the badge criteria for a given assignment. Badges a student has earned can be seen when they view their "Task List" page, and an instructor will be able to view all badges earned by students when they view the "Participants List" page.

 

Please refer to the sections below for further detail.

</div>

= Project Requirements =

<div style="padding: 10px 25px 25px 25px">

1. Create badges using Credly (do not include text)

        1.1. Create the "Good Reviewer" Badge

        1.2. Create the "Good Teammate" Badge

        1.3. Store these badge images in the app/assets/images/badges directory

2. Create tables for the badging system

        2.1. Create a table named badges with the following attributes

                2.1.1. id — primary key

                2.1.2. name — varchar

                2.1.3. description — varchar

        2.2. Create a mapping table named assignment_badges with the following attributes

                2.2.1 id — primary key

                2.2.2 badge_id — foreign key

                2.2.3 assignment_id — foreign key

                2.2.4 threshold — int

        2.3. Create a mapping table named awarded_badges with the following attributes

                2.3.1. id — primary key

                2.3.2. badge_id — foreign key

                2.3.3. participant_id — foreign key

3. Change the UI so that instructors can add, configure, and view badges, and so that students can view their badges

        3.1. Add a new "Badges" tab to the assignments/edit page for instructors to add and configure badges

        3.2. Add badge icons to the participants/list page for instructors to view badges

        3.3. Add badge icons to the student_task/list page for students to view badges

4. Write feature tests to verify the modifications

        4.1. Include tests in the a new badge_system_spec.rb file in the spec/features directory

</div>

= Preliminary Mocks =

=== Badges ===

<div style="padding: 10px 25px 25px 25px">

The following Credly badge will be awarded to students who meet the "Good Reviewer" criterion for a given assignment:

[[File:Badge-Good-Reviewer-Small.png|none|frame|Good Reviewer Badge]]

 The following Credly badge will be awarded to team members who meet the "Good Teammate" criterion for a given assignment:

[[File:Badge-Good-Teammate-Small.png|none|frame|Good Teammate Badge]]

</div>

=== Tables ===

<div style="padding: 10px 25px 25px 25px">

The following is an example of mock data in the badges table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | name (varchar)
! style="padding:10px; text-align: center" | description (varchar)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | Good Reviewer
| style="padding:10px; text-align: center" | This badge is awarded to students who receive very high review grades.
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | Good Teammate
| style="padding:10px; text-align: center" | This badge is awarded to team members who receive very high teammate review scores.
|}

 The following is an example of mock data in the assignment_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | assignment_id (foreign key)
! style="padding:10px; text-align: center" | threshold (int)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 90
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 85
|-
| style="padding:10px; text-align: center" | 5
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 80
|}

The first row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The second row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The third row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 2 with a customized threshold of 90.

The fourth row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 2 with a customized threshold of 85.

The fifth row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 3 with a customized threshold of 80.

 The following is an example of mock data in the awarded_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | participant_id (foreign key)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 3
|}

The first row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The second row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.

The third row represents that the assignment participant with participant_id 2 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The fourth row represents that the assignment participant with participant_id 3 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.
</div>

=== Views ===

<div style="padding:10px 25px 25px 25px">

The following screenshots show a comparison of the existing "Assignments Edit" page, alongside a mockup incorporating the new badging system where instructors can add and configure badges for a given assignment.

 [[File:Original-Assignment-Edit.png|none|frame|The original "Assignments Edit" page.]]

 INCLUDE MOCKUP HERE

 The following screenshots show a comparison of the existing "Participants List" page, alongside a mockup incorporating the new badging system where instructors can view all awarded badges for a given assignment.

 [[File:Original-Participants-List.png|none|frame|The original "Participants List" page.]]

 INCLUDE MOCKUP HERE

 The following screenshots show a comparison of the existing "Student Task List" page, alongside a mockup incorporating the new badging system where students can view all of the badges they have earned.

 [[File:Original-Student-Task-List.png|none|frame|The original "Student Task List" page.]]

 INCLUDE MOCKUP HERE

</div>

= Overview of Work Completed =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Testing =

<div style="padding: 10px 25px 25px 25px">

A new badge_system_spec.rb file will be created in the spec/features folder, and will include feature tests that verify the modifications made for the project.

NOTE: More information will be included in this section as the project progresses and the tests are written.

</div>

= Video Demonstrations =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Files Modified =

=== New Files ===

<div style="padding: 10px 25px 25px 25px">

• app/assets/images/badges

        A new directory created to house the new badge image files.

 • app/assets/images/badges/Badge-Good-Reviewer.png

        The image used for the new "Good Reviewer" badge.

 • app/assets/images/badges/Badge-Good-Teammate.png

        The image used for the new "Good Teammate" badge.

 • spec/features/badge_system_spec.rb

        The file holding the new tests written for the badging system.

 • db/migrate/...

        TBD: The migration for the new badges table.

 • db/migrate/...

        TBD: The migration for the new assignment_badges table.

 • db/migrate/...

        TBD: The migration for the new awarded_badges table.
</div>

=== Edited Files ===

<div style="padding: 10px 25px 25px 25px">

• app/models/review_response_map.rb

        The file in which the code for the "Good Reviewer" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/models/teammate_review_response_map.rb

        The file in which the code for the "Good Teammate" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/views/assignments/edit.html.erb

        The UI changes allowing instructors to add and calibrate badges for a given assignment.

 • app/views/participants/list.html.erb

        The UI changes allowing instructors to view badges for the participants of a given assignment.

 • app/views/student_task/list.html.erb

        The UI changes allowing students to view their badges for all of their assignments.

 • db/schema.rb

        Incorporating schema changes for the three new badges, assignment_badges, and awarded_badges tables.

</div>

= References =

<div style="padding: 10px 25px 25px 25px">

Videos summarizing the previous team's work on this project topic can be found [https://www.youtube.com/playlist?list=PLdDBHYYDZueeGNdQtzS2FfI-eC0-SK6cb here].

</div>

CSC/ECE 517 Fall 2017/E17A2 Lightweight Badging System

2017-11-13T01:46:22Z

Tmdement: /* Views */

__TOC__

= Team Contact =

<div style="padding: 10px 25px 25px 25px">

; MEMBERS:

:Priyanka Jain: [mailto:pjain15@ncsu.edu pjain15@ncsu.edu]

:Pushpendra Patel: [mailto:ppatel16@ncsu.edu ppatel16@ncsu.edu]

:Tanay Kothari: [mailto:tkothar@ncsu.edu tkothar@ncsu.edu]

:Timothy Dement: [mailto:tmdement@ncsu.edu tmdement@ncsu.edu]

; MENTOR:

:Zhewei Hu: [mailto:zhu6@ncsu.edu zhu6@ncsu.edu]

</div>

= Project Description =

<div style="padding: 10px 25px 25px 25px">


The goal of this project is to create a simple badging system for Expertiza, allowing students to earn badges when they meet certain predefined criteria while using the platform. The full E17A2 project topic description can be found [https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.u6i7q1mdz0zl here]

 

Per the full project topic description, the badges will be designed using [https://credly.com Credly]. Previous work on this project topic revealed that any text included on the badges is too small to read, so all text should be removed from the badges and instead appear when the badges are hovered over.

 

This project is concerned with two preliminary badges — "Good Reviewer" and "Good Teammate" — but the design will be such that the badging system can be easily extended to include more badges in the future. The "Good Reviewer" badge will be awarded to students who receive very high review grades. The "Good Teammate" badge will be awarded to team members who receive very high teammate review scores. By default, the "threshold" for earning these badges will be set to a score of 95, but this value will be configurable on a per-assignment basis by the instructor.

 

A new "Badges" tab will be added for instructors on the "Edit Assignment" page where instructors can add badges and configure the badge criteria for a given assignment. Badges a student has earned can be seen when they view their "Task List" page, and an instructor will be able to view all badges earned by students when they view the "Participants List" page.

 

Please refer to the sections below for further detail.

</div>

= Project Requirements =

<div style="padding: 10px 25px 25px 25px">

1. Create badges using Credly (do not include text)

        1.1. Create the "Good Reviewer" Badge

        1.2. Create the "Good Teammate" Badge

        1.3. Store these badge images in the app/assets/images/badges directory

2. Create tables for the badging system

        2.1. Create a table named badges with the following attributes

                2.1.1. id — primary key

                2.1.2. name — varchar

                2.1.3. description — varchar

        2.2. Create a mapping table named assignment_badges with the following attributes

                2.2.1 id — primary key

                2.2.2 badge_id — foreign key

                2.2.3 assignment_id — foreign key

                2.2.4 threshold — int

        2.3. Create a mapping table named awarded_badges with the following attributes

                2.3.1. id — primary key

                2.3.2. badge_id — foreign key

                2.3.3. participant_id — foreign key

3. Change the UI so that instructors can add, configure, and view badges, and so that students can view their badges

        3.1. Add a new "Badges" tab to the assignments/edit page for instructors to add and configure badges

        3.2. Add badge icons to the participants/list page for instructors to view badges

        3.3. Add badge icons to the student_task/list page for students to view badges

4. Write feature tests to verify the modifications

        4.1. Include tests in the a new badge_system_spec.rb file in the spec/features directory

</div>

= Preliminary Mocks =

=== Badges ===

<div style="padding: 10px 25px 25px 25px">

The following Credly badge will be awarded to students who meet the "Good Reviewer" criterion for a given assignment:

[[File:Badge-Good-Reviewer-Small.png|none|frame|Good Reviewer Badge]]

 The following Credly badge will be awarded to team members who meet the "Good Teammate" criterion for a given assignment:

[[File:Badge-Good-Teammate-Small.png|none|frame|Good Teammate Badge]]

</div>

=== Tables ===

<div style="padding: 10px 25px 25px 25px">

The following is an example of mock data in the badges table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | name (varchar)
! style="padding:10px; text-align: center" | description (varchar)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | Good Reviewer
| style="padding:10px; text-align: center" | This badge is awarded to students who receive very high review grades.
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | Good Teammate
| style="padding:10px; text-align: center" | This badge is awarded to team members who receive very high teammate review scores.
|}

 The following is an example of mock data in the assignment_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | assignment_id (foreign key)
! style="padding:10px; text-align: center" | threshold (int)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 90
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 85
|-
| style="padding:10px; text-align: center" | 5
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 80
|}

The first row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The second row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The third row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 2 with a customized threshold of 90.

The fourth row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 2 with a customized threshold of 85.

The fifth row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 3 with a customized threshold of 80.

 The following is an example of mock data in the awarded_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | participant_id (foreign key)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 3
|}

The first row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The second row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.

The third row represents that the assignment participant with participant_id 2 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The fourth row represents that the assignment participant with participant_id 3 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.
</div>

=== Views ===

<div style="padding:10px 25px 25px 25px">

The following screenshots show a comparison of the existing "Assignments Edit" page, alongside a mockup incorporating the new badging system where instructors can add and configure badges for a given assignment.

 [[File:Original-Assignment-Edit.png|none|frame|The original "Assignments Edit" page.]]

 INCLUDE MOCKUP HERE

 The following screenshots show a comparison of the existing "Participants List" page, alongside a mockup incorporating the new badging system where instructors can view all awarded badges for a given assignment.

 [[File:Original-Participants-List.png|none|frame|The original "Participants List" page.]]

 INCLUDE MOCKUP HERE

 The following screenshots show a comparison of the existing "Student Task List" page, alongside a mockup incorporating the new badging system where students can view all of the badges they have earned.

 [[File:Original-Student-Task-List.png|none|frame|The original "Student Task List" page.]]

 INCLUDE MOCKUP HERE

</div>

= Overview of Work Completed =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Testing =

<div style="padding: 10px 25px 25px 25px">

A new badge_system_spec.rb file will be created in the spec/features folder, and will include feature tests that verify the modifications made for the project.

NOTE: More information will be included in this section as the project progresses and the tests are written.

</div>

= Video Demonstrations =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Files Modified =

=== New Files ===

<div style="padding: 10px 25px 25px 25px">

• app/assets/images/badges

        A new directory created to house the new badge image files.

 • app/assets/images/badges/Badge-Good-Reviewer.png

        The image used for the new "Good Reviewer" badge.

 • app/assets/images/badges/Badge-Good-Teammate.png

        The image used for the new "Good Teammate" badge.

 • spec/features/badge_system_spec.rb

        The file holding the new tests written for the badging system.

 • db/migrate/...

        TBD: The migration for the new badges table.

 • db/migrate/...

        TBD: The migration for the new assignment_badges table.

 • db/migrate/...

        TBD: The migration for the new awarded_badges table.
</div>

=== Edited Files ===

<div style="padding: 10px 25px 25px 25px">

• app/models/review_response_map.rb

        The file in which the code for the "Good Reviewer" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/models/teammate_review_response_map.rb

        The file in which the code for the "Good Teammate" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/views/assignments/edit.html.erb

        The UI changes allowing instructors to add and calibrate badges for a given assignment.

 • app/views/participants/list.html.erb

        The UI changes allowing instructors to view badges for the participants of a given assignment.

 • app/views/student_task/list.html.erb

        The UI changes allowing students to view their badges for all of their assignments.

 • db/schema.rb

        Incorporating schema changes for the three new badges, assignment_badges, and awarded_badges tables.

</div>

= References =

<div style="padding: 10px 25px 25px 25px">

Videos summarizing the previous team's work on this project topic can be found [https://www.youtube.com/playlist?list=PLdDBHYYDZueeGNdQtzS2FfI-eC0-SK6cb here].

</div>

CSC/ECE 517 Fall 2017/E17A2 Lightweight Badging System

2017-11-13T01:45:29Z

Tmdement: /* Views */

__TOC__

= Team Contact =

<div style="padding: 10px 25px 25px 25px">

; MEMBERS:

:Priyanka Jain: [mailto:pjain15@ncsu.edu pjain15@ncsu.edu]

:Pushpendra Patel: [mailto:ppatel16@ncsu.edu ppatel16@ncsu.edu]

:Tanay Kothari: [mailto:tkothar@ncsu.edu tkothar@ncsu.edu]

:Timothy Dement: [mailto:tmdement@ncsu.edu tmdement@ncsu.edu]

; MENTOR:

:Zhewei Hu: [mailto:zhu6@ncsu.edu zhu6@ncsu.edu]

</div>

= Project Description =

<div style="padding: 10px 25px 25px 25px">


The goal of this project is to create a simple badging system for Expertiza, allowing students to earn badges when they meet certain predefined criteria while using the platform. The full E17A2 project topic description can be found [https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.u6i7q1mdz0zl here]

 

Per the full project topic description, the badges will be designed using [https://credly.com Credly]. Previous work on this project topic revealed that any text included on the badges is too small to read, so all text should be removed from the badges and instead appear when the badges are hovered over.

 

This project is concerned with two preliminary badges — "Good Reviewer" and "Good Teammate" — but the design will be such that the badging system can be easily extended to include more badges in the future. The "Good Reviewer" badge will be awarded to students who receive very high review grades. The "Good Teammate" badge will be awarded to team members who receive very high teammate review scores. By default, the "threshold" for earning these badges will be set to a score of 95, but this value will be configurable on a per-assignment basis by the instructor.

 

A new "Badges" tab will be added for instructors on the "Edit Assignment" page where instructors can add badges and configure the badge criteria for a given assignment. Badges a student has earned can be seen when they view their "Task List" page, and an instructor will be able to view all badges earned by students when they view the "Participants List" page.

 

Please refer to the sections below for further detail.

</div>

= Project Requirements =

<div style="padding: 10px 25px 25px 25px">

1. Create badges using Credly (do not include text)

        1.1. Create the "Good Reviewer" Badge

        1.2. Create the "Good Teammate" Badge

        1.3. Store these badge images in the app/assets/images/badges directory

2. Create tables for the badging system

        2.1. Create a table named badges with the following attributes

                2.1.1. id — primary key

                2.1.2. name — varchar

                2.1.3. description — varchar

        2.2. Create a mapping table named assignment_badges with the following attributes

                2.2.1 id — primary key

                2.2.2 badge_id — foreign key

                2.2.3 assignment_id — foreign key

                2.2.4 threshold — int

        2.3. Create a mapping table named awarded_badges with the following attributes

                2.3.1. id — primary key

                2.3.2. badge_id — foreign key

                2.3.3. participant_id — foreign key

3. Change the UI so that instructors can add, configure, and view badges, and so that students can view their badges

        3.1. Add a new "Badges" tab to the assignments/edit page for instructors to add and configure badges

        3.2. Add badge icons to the participants/list page for instructors to view badges

        3.3. Add badge icons to the student_task/list page for students to view badges

4. Write feature tests to verify the modifications

        4.1. Include tests in the a new badge_system_spec.rb file in the spec/features directory

</div>

= Preliminary Mocks =

=== Badges ===

<div style="padding: 10px 25px 25px 25px">

The following Credly badge will be awarded to students who meet the "Good Reviewer" criterion for a given assignment:

[[File:Badge-Good-Reviewer-Small.png|none|frame|Good Reviewer Badge]]

 The following Credly badge will be awarded to team members who meet the "Good Teammate" criterion for a given assignment:

[[File:Badge-Good-Teammate-Small.png|none|frame|Good Teammate Badge]]

</div>

=== Tables ===

<div style="padding: 10px 25px 25px 25px">

The following is an example of mock data in the badges table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | name (varchar)
! style="padding:10px; text-align: center" | description (varchar)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | Good Reviewer
| style="padding:10px; text-align: center" | This badge is awarded to students who receive very high review grades.
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | Good Teammate
| style="padding:10px; text-align: center" | This badge is awarded to team members who receive very high teammate review scores.
|}

 The following is an example of mock data in the assignment_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | assignment_id (foreign key)
! style="padding:10px; text-align: center" | threshold (int)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 90
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 85
|-
| style="padding:10px; text-align: center" | 5
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 80
|}

The first row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The second row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The third row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 2 with a customized threshold of 90.

The fourth row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 2 with a customized threshold of 85.

The fifth row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 3 with a customized threshold of 80.

 The following is an example of mock data in the awarded_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | participant_id (foreign key)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 3
|}

The first row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The second row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.

The third row represents that the assignment participant with participant_id 2 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The fourth row represents that the assignment participant with participant_id 3 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.
</div>

=== Views ===

<div style="padding:10px 25px 25px 25px">

The following screenshots show a comparison of the existing "Assignments Edit" page, alongside a mockup incorporating the new badging system where instructors can add and configure badges for a given assignment.

 [[File:Original-Assignment-Edit.png|none|frame|The original "Assignments Edit" page.]]

 The following screenshots show a comparison of the existing "Participants List" page, alongside a mockup incorporating the new badging system where instructors can view all awarded badges for a given assignment.

 [[File:Original-Participants-List.png|none|frame|The original "Participants List" page.]]

 The following screenshots show a comparison of the existing "Student Task List" page, alongside a mockup incorporating the new badging system where students can view all of the badges they have earned.

 [[File:Original-Student-Task-List.png|none|frame|The original "Student Task List" page.]]

</div>

= Overview of Work Completed =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Testing =

<div style="padding: 10px 25px 25px 25px">

A new badge_system_spec.rb file will be created in the spec/features folder, and will include feature tests that verify the modifications made for the project.

NOTE: More information will be included in this section as the project progresses and the tests are written.

</div>

= Video Demonstrations =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Files Modified =

=== New Files ===

<div style="padding: 10px 25px 25px 25px">

• app/assets/images/badges

        A new directory created to house the new badge image files.

 • app/assets/images/badges/Badge-Good-Reviewer.png

        The image used for the new "Good Reviewer" badge.

 • app/assets/images/badges/Badge-Good-Teammate.png

        The image used for the new "Good Teammate" badge.

 • spec/features/badge_system_spec.rb

        The file holding the new tests written for the badging system.

 • db/migrate/...

        TBD: The migration for the new badges table.

 • db/migrate/...

        TBD: The migration for the new assignment_badges table.

 • db/migrate/...

        TBD: The migration for the new awarded_badges table.
</div>

=== Edited Files ===

<div style="padding: 10px 25px 25px 25px">

• app/models/review_response_map.rb

        The file in which the code for the "Good Reviewer" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/models/teammate_review_response_map.rb

        The file in which the code for the "Good Teammate" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/views/assignments/edit.html.erb

        The UI changes allowing instructors to add and calibrate badges for a given assignment.

 • app/views/participants/list.html.erb

        The UI changes allowing instructors to view badges for the participants of a given assignment.

 • app/views/student_task/list.html.erb

        The UI changes allowing students to view their badges for all of their assignments.

 • db/schema.rb

        Incorporating schema changes for the three new badges, assignment_badges, and awarded_badges tables.

</div>

= References =

<div style="padding: 10px 25px 25px 25px">

Videos summarizing the previous team's work on this project topic can be found [https://www.youtube.com/playlist?list=PLdDBHYYDZueeGNdQtzS2FfI-eC0-SK6cb here].

</div>

CSC/ECE 517 Fall 2017/E17A2 Lightweight Badging System

2017-11-13T01:45:16Z

Tmdement: /* Views */

__TOC__

= Team Contact =

<div style="padding: 10px 25px 25px 25px">

; MEMBERS:

:Priyanka Jain: [mailto:pjain15@ncsu.edu pjain15@ncsu.edu]

:Pushpendra Patel: [mailto:ppatel16@ncsu.edu ppatel16@ncsu.edu]

:Tanay Kothari: [mailto:tkothar@ncsu.edu tkothar@ncsu.edu]

:Timothy Dement: [mailto:tmdement@ncsu.edu tmdement@ncsu.edu]

; MENTOR:

:Zhewei Hu: [mailto:zhu6@ncsu.edu zhu6@ncsu.edu]

</div>

= Project Description =

<div style="padding: 10px 25px 25px 25px">


The goal of this project is to create a simple badging system for Expertiza, allowing students to earn badges when they meet certain predefined criteria while using the platform. The full E17A2 project topic description can be found [https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.u6i7q1mdz0zl here]

 

Per the full project topic description, the badges will be designed using [https://credly.com Credly]. Previous work on this project topic revealed that any text included on the badges is too small to read, so all text should be removed from the badges and instead appear when the badges are hovered over.

 

This project is concerned with two preliminary badges — "Good Reviewer" and "Good Teammate" — but the design will be such that the badging system can be easily extended to include more badges in the future. The "Good Reviewer" badge will be awarded to students who receive very high review grades. The "Good Teammate" badge will be awarded to team members who receive very high teammate review scores. By default, the "threshold" for earning these badges will be set to a score of 95, but this value will be configurable on a per-assignment basis by the instructor.

 

A new "Badges" tab will be added for instructors on the "Edit Assignment" page where instructors can add badges and configure the badge criteria for a given assignment. Badges a student has earned can be seen when they view their "Task List" page, and an instructor will be able to view all badges earned by students when they view the "Participants List" page.

 

Please refer to the sections below for further detail.

</div>

= Project Requirements =

<div style="padding: 10px 25px 25px 25px">

1. Create badges using Credly (do not include text)

        1.1. Create the "Good Reviewer" Badge

        1.2. Create the "Good Teammate" Badge

        1.3. Store these badge images in the app/assets/images/badges directory

2. Create tables for the badging system

        2.1. Create a table named badges with the following attributes

                2.1.1. id — primary key

                2.1.2. name — varchar

                2.1.3. description — varchar

        2.2. Create a mapping table named assignment_badges with the following attributes

                2.2.1 id — primary key

                2.2.2 badge_id — foreign key

                2.2.3 assignment_id — foreign key

                2.2.4 threshold — int

        2.3. Create a mapping table named awarded_badges with the following attributes

                2.3.1. id — primary key

                2.3.2. badge_id — foreign key

                2.3.3. participant_id — foreign key

3. Change the UI so that instructors can add, configure, and view badges, and so that students can view their badges

        3.1. Add a new "Badges" tab to the assignments/edit page for instructors to add and configure badges

        3.2. Add badge icons to the participants/list page for instructors to view badges

        3.3. Add badge icons to the student_task/list page for students to view badges

4. Write feature tests to verify the modifications

        4.1. Include tests in the a new badge_system_spec.rb file in the spec/features directory

</div>

= Preliminary Mocks =

=== Badges ===

<div style="padding: 10px 25px 25px 25px">

The following Credly badge will be awarded to students who meet the "Good Reviewer" criterion for a given assignment:

[[File:Badge-Good-Reviewer-Small.png|none|frame|Good Reviewer Badge]]

 The following Credly badge will be awarded to team members who meet the "Good Teammate" criterion for a given assignment:

[[File:Badge-Good-Teammate-Small.png|none|frame|Good Teammate Badge]]

</div>

=== Tables ===

<div style="padding: 10px 25px 25px 25px">

The following is an example of mock data in the badges table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | name (varchar)
! style="padding:10px; text-align: center" | description (varchar)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | Good Reviewer
| style="padding:10px; text-align: center" | This badge is awarded to students who receive very high review grades.
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | Good Teammate
| style="padding:10px; text-align: center" | This badge is awarded to team members who receive very high teammate review scores.
|}

 The following is an example of mock data in the assignment_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | assignment_id (foreign key)
! style="padding:10px; text-align: center" | threshold (int)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 90
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 85
|-
| style="padding:10px; text-align: center" | 5
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 80
|}

The first row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The second row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The third row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 2 with a customized threshold of 90.

The fourth row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 2 with a customized threshold of 85.

The fifth row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 3 with a customized threshold of 80.

 The following is an example of mock data in the awarded_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | participant_id (foreign key)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 3
|}

The first row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The second row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.

The third row represents that the assignment participant with participant_id 2 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The fourth row represents that the assignment participant with participant_id 3 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.
</div>

=== Views ===

<div style="padding:10px 25px 25px 25px">

The following screenshots show a comparison of the existing "Assignments Edit" page, alongside a mockup incorporating the new badging system where instructors can add and configure badges for a given assignment.

 [[File:Original-Assignment-Edit.png|none|frame|The original "Assignments Edit" page.]]

 The following screenshots show a comparison of the existing "Participants List" page, alongside a mockup incorporating the new badging system where instructors can view all awarded badges for a given assignment.

[[File:Original-Participants-List.png|none|frame|The original "Participants List" page.]]

 The following screenshots show a comparison of the existing "Student Task List" page, alongside a mockup incorporating the new badging system where students can view all of the badges they have earned.

[[File:Original-Student-Task-List.png|none|frame|The original "Student Task List" page.]]

</div>

= Overview of Work Completed =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Testing =

<div style="padding: 10px 25px 25px 25px">

A new badge_system_spec.rb file will be created in the spec/features folder, and will include feature tests that verify the modifications made for the project.

NOTE: More information will be included in this section as the project progresses and the tests are written.

</div>

= Video Demonstrations =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Files Modified =

=== New Files ===

<div style="padding: 10px 25px 25px 25px">

• app/assets/images/badges

        A new directory created to house the new badge image files.

 • app/assets/images/badges/Badge-Good-Reviewer.png

        The image used for the new "Good Reviewer" badge.

 • app/assets/images/badges/Badge-Good-Teammate.png

        The image used for the new "Good Teammate" badge.

 • spec/features/badge_system_spec.rb

        The file holding the new tests written for the badging system.

 • db/migrate/...

        TBD: The migration for the new badges table.

 • db/migrate/...

        TBD: The migration for the new assignment_badges table.

 • db/migrate/...

        TBD: The migration for the new awarded_badges table.
</div>

=== Edited Files ===

<div style="padding: 10px 25px 25px 25px">

• app/models/review_response_map.rb

        The file in which the code for the "Good Reviewer" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/models/teammate_review_response_map.rb

        The file in which the code for the "Good Teammate" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/views/assignments/edit.html.erb

        The UI changes allowing instructors to add and calibrate badges for a given assignment.

 • app/views/participants/list.html.erb

        The UI changes allowing instructors to view badges for the participants of a given assignment.

 • app/views/student_task/list.html.erb

        The UI changes allowing students to view their badges for all of their assignments.

 • db/schema.rb

        Incorporating schema changes for the three new badges, assignment_badges, and awarded_badges tables.

</div>

= References =

<div style="padding: 10px 25px 25px 25px">

Videos summarizing the previous team's work on this project topic can be found [https://www.youtube.com/playlist?list=PLdDBHYYDZueeGNdQtzS2FfI-eC0-SK6cb here].

</div>

CSC/ECE 517 Fall 2017/E17A2 Lightweight Badging System

2017-11-13T01:44:46Z

Tmdement: /* Views */

__TOC__

= Team Contact =

<div style="padding: 10px 25px 25px 25px">

; MEMBERS:

:Priyanka Jain: [mailto:pjain15@ncsu.edu pjain15@ncsu.edu]

:Pushpendra Patel: [mailto:ppatel16@ncsu.edu ppatel16@ncsu.edu]

:Tanay Kothari: [mailto:tkothar@ncsu.edu tkothar@ncsu.edu]

:Timothy Dement: [mailto:tmdement@ncsu.edu tmdement@ncsu.edu]

; MENTOR:

:Zhewei Hu: [mailto:zhu6@ncsu.edu zhu6@ncsu.edu]

</div>

= Project Description =

<div style="padding: 10px 25px 25px 25px">


The goal of this project is to create a simple badging system for Expertiza, allowing students to earn badges when they meet certain predefined criteria while using the platform. The full E17A2 project topic description can be found [https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.u6i7q1mdz0zl here]

 

Per the full project topic description, the badges will be designed using [https://credly.com Credly]. Previous work on this project topic revealed that any text included on the badges is too small to read, so all text should be removed from the badges and instead appear when the badges are hovered over.

 

This project is concerned with two preliminary badges — "Good Reviewer" and "Good Teammate" — but the design will be such that the badging system can be easily extended to include more badges in the future. The "Good Reviewer" badge will be awarded to students who receive very high review grades. The "Good Teammate" badge will be awarded to team members who receive very high teammate review scores. By default, the "threshold" for earning these badges will be set to a score of 95, but this value will be configurable on a per-assignment basis by the instructor.

 

A new "Badges" tab will be added for instructors on the "Edit Assignment" page where instructors can add badges and configure the badge criteria for a given assignment. Badges a student has earned can be seen when they view their "Task List" page, and an instructor will be able to view all badges earned by students when they view the "Participants List" page.

 

Please refer to the sections below for further detail.

</div>

= Project Requirements =

<div style="padding: 10px 25px 25px 25px">

1. Create badges using Credly (do not include text)

        1.1. Create the "Good Reviewer" Badge

        1.2. Create the "Good Teammate" Badge

        1.3. Store these badge images in the app/assets/images/badges directory

2. Create tables for the badging system

        2.1. Create a table named badges with the following attributes

                2.1.1. id — primary key

                2.1.2. name — varchar

                2.1.3. description — varchar

        2.2. Create a mapping table named assignment_badges with the following attributes

                2.2.1 id — primary key

                2.2.2 badge_id — foreign key

                2.2.3 assignment_id — foreign key

                2.2.4 threshold — int

        2.3. Create a mapping table named awarded_badges with the following attributes

                2.3.1. id — primary key

                2.3.2. badge_id — foreign key

                2.3.3. participant_id — foreign key

3. Change the UI so that instructors can add, configure, and view badges, and so that students can view their badges

        3.1. Add a new "Badges" tab to the assignments/edit page for instructors to add and configure badges

        3.2. Add badge icons to the participants/list page for instructors to view badges

        3.3. Add badge icons to the student_task/list page for students to view badges

4. Write feature tests to verify the modifications

        4.1. Include tests in the a new badge_system_spec.rb file in the spec/features directory

</div>

= Preliminary Mocks =

=== Badges ===

<div style="padding: 10px 25px 25px 25px">

The following Credly badge will be awarded to students who meet the "Good Reviewer" criterion for a given assignment:

[[File:Badge-Good-Reviewer-Small.png|none|frame|Good Reviewer Badge]]

 The following Credly badge will be awarded to team members who meet the "Good Teammate" criterion for a given assignment:

[[File:Badge-Good-Teammate-Small.png|none|frame|Good Teammate Badge]]

</div>

=== Tables ===

<div style="padding: 10px 25px 25px 25px">

The following is an example of mock data in the badges table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | name (varchar)
! style="padding:10px; text-align: center" | description (varchar)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | Good Reviewer
| style="padding:10px; text-align: center" | This badge is awarded to students who receive very high review grades.
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | Good Teammate
| style="padding:10px; text-align: center" | This badge is awarded to team members who receive very high teammate review scores.
|}

 The following is an example of mock data in the assignment_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | assignment_id (foreign key)
! style="padding:10px; text-align: center" | threshold (int)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 90
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 85
|-
| style="padding:10px; text-align: center" | 5
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 80
|}

The first row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The second row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The third row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 2 with a customized threshold of 90.

The fourth row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 2 with a customized threshold of 85.

The fifth row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 3 with a customized threshold of 80.

 The following is an example of mock data in the awarded_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | participant_id (foreign key)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 3
|}

The first row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The second row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.

The third row represents that the assignment participant with participant_id 2 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The fourth row represents that the assignment participant with participant_id 3 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.
</div>

=== Views ===

<div style="padding:10px 25px 25px 25px">

The following screenshots show a comparison of the existing "Assignments Edit" page, alongside a mockup incorporating the new badging system where instructors can add and configure badges for a given assignment.

[[File:Original-Assignment-Edit.png|none|frame|The original "Assignments Edit" page.]]

 The following screenshots show a comparison of the existing "Participants List" page, alongside a mockup incorporating the new badging system where instructors can view all awarded badges for a given assignment.

[[File:Original-Participants-List.png|none|frame|The original "Participants List" page.]]

 The following screenshots show a comparison of the existing "Student Task List" page, alongside a mockup incorporating the new badging system where students can view all of the badges they have earned.

[[File:Original-Student-Task-List.png|none|frame|The original "Student Task List" page.]]

</div>

= Overview of Work Completed =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Testing =

<div style="padding: 10px 25px 25px 25px">

A new badge_system_spec.rb file will be created in the spec/features folder, and will include feature tests that verify the modifications made for the project.

NOTE: More information will be included in this section as the project progresses and the tests are written.

</div>

= Video Demonstrations =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Files Modified =

=== New Files ===

<div style="padding: 10px 25px 25px 25px">

• app/assets/images/badges

        A new directory created to house the new badge image files.

 • app/assets/images/badges/Badge-Good-Reviewer.png

        The image used for the new "Good Reviewer" badge.

 • app/assets/images/badges/Badge-Good-Teammate.png

        The image used for the new "Good Teammate" badge.

 • spec/features/badge_system_spec.rb

        The file holding the new tests written for the badging system.

 • db/migrate/...

        TBD: The migration for the new badges table.

 • db/migrate/...

        TBD: The migration for the new assignment_badges table.

 • db/migrate/...

        TBD: The migration for the new awarded_badges table.
</div>

=== Edited Files ===

<div style="padding: 10px 25px 25px 25px">

• app/models/review_response_map.rb

        The file in which the code for the "Good Reviewer" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/models/teammate_review_response_map.rb

        The file in which the code for the "Good Teammate" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/views/assignments/edit.html.erb

        The UI changes allowing instructors to add and calibrate badges for a given assignment.

 • app/views/participants/list.html.erb

        The UI changes allowing instructors to view badges for the participants of a given assignment.

 • app/views/student_task/list.html.erb

        The UI changes allowing students to view their badges for all of their assignments.

 • db/schema.rb

        Incorporating schema changes for the three new badges, assignment_badges, and awarded_badges tables.

</div>

= References =

<div style="padding: 10px 25px 25px 25px">

Videos summarizing the previous team's work on this project topic can be found [https://www.youtube.com/playlist?list=PLdDBHYYDZueeGNdQtzS2FfI-eC0-SK6cb here].

</div>

CSC/ECE 517 Fall 2017/E17A2 Lightweight Badging System

2017-11-13T01:40:59Z

Tmdement: /* Views */

__TOC__

= Team Contact =

<div style="padding: 10px 25px 25px 25px">

; MEMBERS:

:Priyanka Jain: [mailto:pjain15@ncsu.edu pjain15@ncsu.edu]

:Pushpendra Patel: [mailto:ppatel16@ncsu.edu ppatel16@ncsu.edu]

:Tanay Kothari: [mailto:tkothar@ncsu.edu tkothar@ncsu.edu]

:Timothy Dement: [mailto:tmdement@ncsu.edu tmdement@ncsu.edu]

; MENTOR:

:Zhewei Hu: [mailto:zhu6@ncsu.edu zhu6@ncsu.edu]

</div>

= Project Description =

<div style="padding: 10px 25px 25px 25px">


The goal of this project is to create a simple badging system for Expertiza, allowing students to earn badges when they meet certain predefined criteria while using the platform. The full E17A2 project topic description can be found [https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.u6i7q1mdz0zl here]

 

Per the full project topic description, the badges will be designed using [https://credly.com Credly]. Previous work on this project topic revealed that any text included on the badges is too small to read, so all text should be removed from the badges and instead appear when the badges are hovered over.

 

This project is concerned with two preliminary badges — "Good Reviewer" and "Good Teammate" — but the design will be such that the badging system can be easily extended to include more badges in the future. The "Good Reviewer" badge will be awarded to students who receive very high review grades. The "Good Teammate" badge will be awarded to team members who receive very high teammate review scores. By default, the "threshold" for earning these badges will be set to a score of 95, but this value will be configurable on a per-assignment basis by the instructor.

 

A new "Badges" tab will be added for instructors on the "Edit Assignment" page where instructors can add badges and configure the badge criteria for a given assignment. Badges a student has earned can be seen when they view their "Task List" page, and an instructor will be able to view all badges earned by students when they view the "Participants List" page.

 

Please refer to the sections below for further detail.

</div>

= Project Requirements =

<div style="padding: 10px 25px 25px 25px">

1. Create badges using Credly (do not include text)

        1.1. Create the "Good Reviewer" Badge

        1.2. Create the "Good Teammate" Badge

        1.3. Store these badge images in the app/assets/images/badges directory

2. Create tables for the badging system

        2.1. Create a table named badges with the following attributes

                2.1.1. id — primary key

                2.1.2. name — varchar

                2.1.3. description — varchar

        2.2. Create a mapping table named assignment_badges with the following attributes

                2.2.1 id — primary key

                2.2.2 badge_id — foreign key

                2.2.3 assignment_id — foreign key

                2.2.4 threshold — int

        2.3. Create a mapping table named awarded_badges with the following attributes

                2.3.1. id — primary key

                2.3.2. badge_id — foreign key

                2.3.3. participant_id — foreign key

3. Change the UI so that instructors can add, configure, and view badges, and so that students can view their badges

        3.1. Add a new "Badges" tab to the assignments/edit page for instructors to add and configure badges

        3.2. Add badge icons to the participants/list page for instructors to view badges

        3.3. Add badge icons to the student_task/list page for students to view badges

4. Write feature tests to verify the modifications

        4.1. Include tests in the a new badge_system_spec.rb file in the spec/features directory

</div>

= Preliminary Mocks =

=== Badges ===

<div style="padding: 10px 25px 25px 25px">

The following Credly badge will be awarded to students who meet the "Good Reviewer" criterion for a given assignment:

[[File:Badge-Good-Reviewer-Small.png|none|frame|Good Reviewer Badge]]

 The following Credly badge will be awarded to team members who meet the "Good Teammate" criterion for a given assignment:

[[File:Badge-Good-Teammate-Small.png|none|frame|Good Teammate Badge]]

</div>

=== Tables ===

<div style="padding: 10px 25px 25px 25px">

The following is an example of mock data in the badges table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | name (varchar)
! style="padding:10px; text-align: center" | description (varchar)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | Good Reviewer
| style="padding:10px; text-align: center" | This badge is awarded to students who receive very high review grades.
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | Good Teammate
| style="padding:10px; text-align: center" | This badge is awarded to team members who receive very high teammate review scores.
|}

 The following is an example of mock data in the assignment_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | assignment_id (foreign key)
! style="padding:10px; text-align: center" | threshold (int)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 90
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 85
|-
| style="padding:10px; text-align: center" | 5
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 80
|}

The first row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The second row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The third row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 2 with a customized threshold of 90.

The fourth row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 2 with a customized threshold of 85.

The fifth row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 3 with a customized threshold of 80.

 The following is an example of mock data in the awarded_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | participant_id (foreign key)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 3
|}

The first row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The second row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.

The third row represents that the assignment participant with participant_id 2 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The fourth row represents that the assignment participant with participant_id 3 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.
</div>

=== Views ===

<div style="padding:10px 25px 25px 25px">

The following screenshots show a comparison of the existing _____ page, alongside a mockup incorporating the new badging system ______.

[[File:Original-Assignment-Edit.png|none|frame|...]]

 The following screenshots show a comparison of the existing ____ page, alongside a mockup incorporating the new badging system _____.

[[File:Original-Participants-List.png|none|frame|...]]

 The following screenshots show a comparison of the existing ____ page, alongside a mockup incorporating the new badging system _____.

[[File:Original-Student-Task-List.png|none|frame|...]]

</div>

= Overview of Work Completed =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Testing =

<div style="padding: 10px 25px 25px 25px">

A new badge_system_spec.rb file will be created in the spec/features folder, and will include feature tests that verify the modifications made for the project.

NOTE: More information will be included in this section as the project progresses and the tests are written.

</div>

= Video Demonstrations =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Files Modified =

=== New Files ===

<div style="padding: 10px 25px 25px 25px">

• app/assets/images/badges

        A new directory created to house the new badge image files.

 • app/assets/images/badges/Badge-Good-Reviewer.png

        The image used for the new "Good Reviewer" badge.

 • app/assets/images/badges/Badge-Good-Teammate.png

        The image used for the new "Good Teammate" badge.

 • spec/features/badge_system_spec.rb

        The file holding the new tests written for the badging system.

 • db/migrate/...

        TBD: The migration for the new badges table.

 • db/migrate/...

        TBD: The migration for the new assignment_badges table.

 • db/migrate/...

        TBD: The migration for the new awarded_badges table.
</div>

=== Edited Files ===

<div style="padding: 10px 25px 25px 25px">

• app/models/review_response_map.rb

        The file in which the code for the "Good Reviewer" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/models/teammate_review_response_map.rb

        The file in which the code for the "Good Teammate" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/views/assignments/edit.html.erb

        The UI changes allowing instructors to add and calibrate badges for a given assignment.

 • app/views/participants/list.html.erb

        The UI changes allowing instructors to view badges for the participants of a given assignment.

 • app/views/student_task/list.html.erb

        The UI changes allowing students to view their badges for all of their assignments.

 • db/schema.rb

        Incorporating schema changes for the three new badges, assignment_badges, and awarded_badges tables.

</div>

= References =

<div style="padding: 10px 25px 25px 25px">

Videos summarizing the previous team's work on this project topic can be found [https://www.youtube.com/playlist?list=PLdDBHYYDZueeGNdQtzS2FfI-eC0-SK6cb here].

</div>

CSC/ECE 517 Fall 2017/E17A2 Lightweight Badging System

2017-11-13T01:40:34Z

Tmdement: /* Views */

__TOC__

= Team Contact =

<div style="padding: 10px 25px 25px 25px">

; MEMBERS:

:Priyanka Jain: [mailto:pjain15@ncsu.edu pjain15@ncsu.edu]

:Pushpendra Patel: [mailto:ppatel16@ncsu.edu ppatel16@ncsu.edu]

:Tanay Kothari: [mailto:tkothar@ncsu.edu tkothar@ncsu.edu]

:Timothy Dement: [mailto:tmdement@ncsu.edu tmdement@ncsu.edu]

; MENTOR:

:Zhewei Hu: [mailto:zhu6@ncsu.edu zhu6@ncsu.edu]

</div>

= Project Description =

<div style="padding: 10px 25px 25px 25px">


The goal of this project is to create a simple badging system for Expertiza, allowing students to earn badges when they meet certain predefined criteria while using the platform. The full E17A2 project topic description can be found [https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.u6i7q1mdz0zl here]

 

Per the full project topic description, the badges will be designed using [https://credly.com Credly]. Previous work on this project topic revealed that any text included on the badges is too small to read, so all text should be removed from the badges and instead appear when the badges are hovered over.

 

This project is concerned with two preliminary badges — "Good Reviewer" and "Good Teammate" — but the design will be such that the badging system can be easily extended to include more badges in the future. The "Good Reviewer" badge will be awarded to students who receive very high review grades. The "Good Teammate" badge will be awarded to team members who receive very high teammate review scores. By default, the "threshold" for earning these badges will be set to a score of 95, but this value will be configurable on a per-assignment basis by the instructor.

 

A new "Badges" tab will be added for instructors on the "Edit Assignment" page where instructors can add badges and configure the badge criteria for a given assignment. Badges a student has earned can be seen when they view their "Task List" page, and an instructor will be able to view all badges earned by students when they view the "Participants List" page.

 

Please refer to the sections below for further detail.

</div>

= Project Requirements =

<div style="padding: 10px 25px 25px 25px">

1. Create badges using Credly (do not include text)

        1.1. Create the "Good Reviewer" Badge

        1.2. Create the "Good Teammate" Badge

        1.3. Store these badge images in the app/assets/images/badges directory

2. Create tables for the badging system

        2.1. Create a table named badges with the following attributes

                2.1.1. id — primary key

                2.1.2. name — varchar

                2.1.3. description — varchar

        2.2. Create a mapping table named assignment_badges with the following attributes

                2.2.1 id — primary key

                2.2.2 badge_id — foreign key

                2.2.3 assignment_id — foreign key

                2.2.4 threshold — int

        2.3. Create a mapping table named awarded_badges with the following attributes

                2.3.1. id — primary key

                2.3.2. badge_id — foreign key

                2.3.3. participant_id — foreign key

3. Change the UI so that instructors can add, configure, and view badges, and so that students can view their badges

        3.1. Add a new "Badges" tab to the assignments/edit page for instructors to add and configure badges

        3.2. Add badge icons to the participants/list page for instructors to view badges

        3.3. Add badge icons to the student_task/list page for students to view badges

4. Write feature tests to verify the modifications

        4.1. Include tests in the a new badge_system_spec.rb file in the spec/features directory

</div>

= Preliminary Mocks =

=== Badges ===

<div style="padding: 10px 25px 25px 25px">

The following Credly badge will be awarded to students who meet the "Good Reviewer" criterion for a given assignment:

[[File:Badge-Good-Reviewer-Small.png|none|frame|Good Reviewer Badge]]

 The following Credly badge will be awarded to team members who meet the "Good Teammate" criterion for a given assignment:

[[File:Badge-Good-Teammate-Small.png|none|frame|Good Teammate Badge]]

</div>

=== Tables ===

<div style="padding: 10px 25px 25px 25px">

The following is an example of mock data in the badges table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | name (varchar)
! style="padding:10px; text-align: center" | description (varchar)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | Good Reviewer
| style="padding:10px; text-align: center" | This badge is awarded to students who receive very high review grades.
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | Good Teammate
| style="padding:10px; text-align: center" | This badge is awarded to team members who receive very high teammate review scores.
|}

 The following is an example of mock data in the assignment_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | assignment_id (foreign key)
! style="padding:10px; text-align: center" | threshold (int)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 90
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 85
|-
| style="padding:10px; text-align: center" | 5
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 80
|}

The first row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The second row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The third row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 2 with a customized threshold of 90.

The fourth row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 2 with a customized threshold of 85.

The fifth row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 3 with a customized threshold of 80.

 The following is an example of mock data in the awarded_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | participant_id (foreign key)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 3
|}

The first row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The second row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.

The third row represents that the assignment participant with participant_id 2 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The fourth row represents that the assignment participant with participant_id 3 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.
</div>

=== Views ===

<div style="padding:10px 25px 25px 25px">

The following screenshots show a comparison of the existing _____ page, alongside a mockup incorporating the new badging system ______.

[[File:Original-Assignment-Edit.png|none|frame|...]]

The following screenshots show a comparison of the existing ____ page, alongside a mockup incorporating the new badging system _____.

[[File:Original-Participants-List.png|none|frame|...]]

The following screenshots show a comparison of the existing ____ page, alongside a mockup incorporating the new badging system _____.

[[File:Original-Student-Task-List.png|none|frame|...]]

</div>

= Overview of Work Completed =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Testing =

<div style="padding: 10px 25px 25px 25px">

A new badge_system_spec.rb file will be created in the spec/features folder, and will include feature tests that verify the modifications made for the project.

NOTE: More information will be included in this section as the project progresses and the tests are written.

</div>

= Video Demonstrations =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Files Modified =

=== New Files ===

<div style="padding: 10px 25px 25px 25px">

• app/assets/images/badges

        A new directory created to house the new badge image files.

 • app/assets/images/badges/Badge-Good-Reviewer.png

        The image used for the new "Good Reviewer" badge.

 • app/assets/images/badges/Badge-Good-Teammate.png

        The image used for the new "Good Teammate" badge.

 • spec/features/badge_system_spec.rb

        The file holding the new tests written for the badging system.

 • db/migrate/...

        TBD: The migration for the new badges table.

 • db/migrate/...

        TBD: The migration for the new assignment_badges table.

 • db/migrate/...

        TBD: The migration for the new awarded_badges table.
</div>

=== Edited Files ===

<div style="padding: 10px 25px 25px 25px">

• app/models/review_response_map.rb

        The file in which the code for the "Good Reviewer" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/models/teammate_review_response_map.rb

        The file in which the code for the "Good Teammate" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/views/assignments/edit.html.erb

        The UI changes allowing instructors to add and calibrate badges for a given assignment.

 • app/views/participants/list.html.erb

        The UI changes allowing instructors to view badges for the participants of a given assignment.

 • app/views/student_task/list.html.erb

        The UI changes allowing students to view their badges for all of their assignments.

 • db/schema.rb

        Incorporating schema changes for the three new badges, assignment_badges, and awarded_badges tables.

</div>

= References =

<div style="padding: 10px 25px 25px 25px">

Videos summarizing the previous team's work on this project topic can be found [https://www.youtube.com/playlist?list=PLdDBHYYDZueeGNdQtzS2FfI-eC0-SK6cb here].

</div>

File:Original-Student-Task-List.png

2017-11-13T01:37:44Z

Tmdement:

File:Original-Participants-List.png

2017-11-13T01:37:35Z

Tmdement:

CSC/ECE 517 Fall 2017/E17A2 Lightweight Badging System

2017-11-13T01:35:55Z

Tmdement: /* Views */

__TOC__

= Team Contact =

<div style="padding: 10px 25px 25px 25px">

; MEMBERS:

:Priyanka Jain: [mailto:pjain15@ncsu.edu pjain15@ncsu.edu]

:Pushpendra Patel: [mailto:ppatel16@ncsu.edu ppatel16@ncsu.edu]

:Tanay Kothari: [mailto:tkothar@ncsu.edu tkothar@ncsu.edu]

:Timothy Dement: [mailto:tmdement@ncsu.edu tmdement@ncsu.edu]

; MENTOR:

:Zhewei Hu: [mailto:zhu6@ncsu.edu zhu6@ncsu.edu]

</div>

= Project Description =

<div style="padding: 10px 25px 25px 25px">


The goal of this project is to create a simple badging system for Expertiza, allowing students to earn badges when they meet certain predefined criteria while using the platform. The full E17A2 project topic description can be found [https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.u6i7q1mdz0zl here]

 

Per the full project topic description, the badges will be designed using [https://credly.com Credly]. Previous work on this project topic revealed that any text included on the badges is too small to read, so all text should be removed from the badges and instead appear when the badges are hovered over.

 

This project is concerned with two preliminary badges — "Good Reviewer" and "Good Teammate" — but the design will be such that the badging system can be easily extended to include more badges in the future. The "Good Reviewer" badge will be awarded to students who receive very high review grades. The "Good Teammate" badge will be awarded to team members who receive very high teammate review scores. By default, the "threshold" for earning these badges will be set to a score of 95, but this value will be configurable on a per-assignment basis by the instructor.

 

A new "Badges" tab will be added for instructors on the "Edit Assignment" page where instructors can add badges and configure the badge criteria for a given assignment. Badges a student has earned can be seen when they view their "Task List" page, and an instructor will be able to view all badges earned by students when they view the "Participants List" page.

 

Please refer to the sections below for further detail.

</div>

= Project Requirements =

<div style="padding: 10px 25px 25px 25px">

1. Create badges using Credly (do not include text)

        1.1. Create the "Good Reviewer" Badge

        1.2. Create the "Good Teammate" Badge

        1.3. Store these badge images in the app/assets/images/badges directory

2. Create tables for the badging system

        2.1. Create a table named badges with the following attributes

                2.1.1. id — primary key

                2.1.2. name — varchar

                2.1.3. description — varchar

        2.2. Create a mapping table named assignment_badges with the following attributes

                2.2.1 id — primary key

                2.2.2 badge_id — foreign key

                2.2.3 assignment_id — foreign key

                2.2.4 threshold — int

        2.3. Create a mapping table named awarded_badges with the following attributes

                2.3.1. id — primary key

                2.3.2. badge_id — foreign key

                2.3.3. participant_id — foreign key

3. Change the UI so that instructors can add, configure, and view badges, and so that students can view their badges

        3.1. Add a new "Badges" tab to the assignments/edit page for instructors to add and configure badges

        3.2. Add badge icons to the participants/list page for instructors to view badges

        3.3. Add badge icons to the student_task/list page for students to view badges

4. Write feature tests to verify the modifications

        4.1. Include tests in the a new badge_system_spec.rb file in the spec/features directory

</div>

= Preliminary Mocks =

=== Badges ===

<div style="padding: 10px 25px 25px 25px">

The following Credly badge will be awarded to students who meet the "Good Reviewer" criterion for a given assignment:

[[File:Badge-Good-Reviewer-Small.png|none|frame|Good Reviewer Badge]]

 The following Credly badge will be awarded to team members who meet the "Good Teammate" criterion for a given assignment:

[[File:Badge-Good-Teammate-Small.png|none|frame|Good Teammate Badge]]

</div>

=== Tables ===

<div style="padding: 10px 25px 25px 25px">

The following is an example of mock data in the badges table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | name (varchar)
! style="padding:10px; text-align: center" | description (varchar)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | Good Reviewer
| style="padding:10px; text-align: center" | This badge is awarded to students who receive very high review grades.
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | Good Teammate
| style="padding:10px; text-align: center" | This badge is awarded to team members who receive very high teammate review scores.
|}

 The following is an example of mock data in the assignment_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | assignment_id (foreign key)
! style="padding:10px; text-align: center" | threshold (int)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 90
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 85
|-
| style="padding:10px; text-align: center" | 5
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 80
|}

The first row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The second row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The third row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 2 with a customized threshold of 90.

The fourth row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 2 with a customized threshold of 85.

The fifth row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 3 with a customized threshold of 80.

 The following is an example of mock data in the awarded_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | participant_id (foreign key)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 3
|}

The first row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The second row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.

The third row represents that the assignment participant with participant_id 2 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The fourth row represents that the assignment participant with participant_id 3 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.
</div>

=== Views ===

<div style="padding:10px 25px 25px 25px">

The following screenshots show a comparison of the existing _____ page, alongside a mockup incorporating the new badging system ______.

[[File:Original-Assignment-Edit.png|none|frame|...]]

The following screenshots show a comparison of the existing ____ page, alongside a mockup incorporating the new badging system _____.

The following screenshots show a comparison of the existing ____ page, alongside a mockup incorporating the new badging system _____.

</div>

= Overview of Work Completed =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Testing =

<div style="padding: 10px 25px 25px 25px">

A new badge_system_spec.rb file will be created in the spec/features folder, and will include feature tests that verify the modifications made for the project.

NOTE: More information will be included in this section as the project progresses and the tests are written.

</div>

= Video Demonstrations =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Files Modified =

=== New Files ===

<div style="padding: 10px 25px 25px 25px">

• app/assets/images/badges

        A new directory created to house the new badge image files.

 • app/assets/images/badges/Badge-Good-Reviewer.png

        The image used for the new "Good Reviewer" badge.

 • app/assets/images/badges/Badge-Good-Teammate.png

        The image used for the new "Good Teammate" badge.

 • spec/features/badge_system_spec.rb

        The file holding the new tests written for the badging system.

 • db/migrate/...

        TBD: The migration for the new badges table.

 • db/migrate/...

        TBD: The migration for the new assignment_badges table.

 • db/migrate/...

        TBD: The migration for the new awarded_badges table.
</div>

=== Edited Files ===

<div style="padding: 10px 25px 25px 25px">

• app/models/review_response_map.rb

        The file in which the code for the "Good Reviewer" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/models/teammate_review_response_map.rb

        The file in which the code for the "Good Teammate" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/views/assignments/edit.html.erb

        The UI changes allowing instructors to add and calibrate badges for a given assignment.

 • app/views/participants/list.html.erb

        The UI changes allowing instructors to view badges for the participants of a given assignment.

 • app/views/student_task/list.html.erb

        The UI changes allowing students to view their badges for all of their assignments.

 • db/schema.rb

        Incorporating schema changes for the three new badges, assignment_badges, and awarded_badges tables.

</div>

= References =

<div style="padding: 10px 25px 25px 25px">

Videos summarizing the previous team's work on this project topic can be found [https://www.youtube.com/playlist?list=PLdDBHYYDZueeGNdQtzS2FfI-eC0-SK6cb here].

</div>

CSC/ECE 517 Fall 2017/E17A2 Lightweight Badging System

2017-11-13T01:35:37Z

Tmdement: /* Views */

__TOC__

= Team Contact =

<div style="padding: 10px 25px 25px 25px">

; MEMBERS:

:Priyanka Jain: [mailto:pjain15@ncsu.edu pjain15@ncsu.edu]

:Pushpendra Patel: [mailto:ppatel16@ncsu.edu ppatel16@ncsu.edu]

:Tanay Kothari: [mailto:tkothar@ncsu.edu tkothar@ncsu.edu]

:Timothy Dement: [mailto:tmdement@ncsu.edu tmdement@ncsu.edu]

; MENTOR:

:Zhewei Hu: [mailto:zhu6@ncsu.edu zhu6@ncsu.edu]

</div>

= Project Description =

<div style="padding: 10px 25px 25px 25px">


The goal of this project is to create a simple badging system for Expertiza, allowing students to earn badges when they meet certain predefined criteria while using the platform. The full E17A2 project topic description can be found [https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.u6i7q1mdz0zl here]

 

Per the full project topic description, the badges will be designed using [https://credly.com Credly]. Previous work on this project topic revealed that any text included on the badges is too small to read, so all text should be removed from the badges and instead appear when the badges are hovered over.

 

This project is concerned with two preliminary badges — "Good Reviewer" and "Good Teammate" — but the design will be such that the badging system can be easily extended to include more badges in the future. The "Good Reviewer" badge will be awarded to students who receive very high review grades. The "Good Teammate" badge will be awarded to team members who receive very high teammate review scores. By default, the "threshold" for earning these badges will be set to a score of 95, but this value will be configurable on a per-assignment basis by the instructor.

 

A new "Badges" tab will be added for instructors on the "Edit Assignment" page where instructors can add badges and configure the badge criteria for a given assignment. Badges a student has earned can be seen when they view their "Task List" page, and an instructor will be able to view all badges earned by students when they view the "Participants List" page.

 

Please refer to the sections below for further detail.

</div>

= Project Requirements =

<div style="padding: 10px 25px 25px 25px">

1. Create badges using Credly (do not include text)

        1.1. Create the "Good Reviewer" Badge

        1.2. Create the "Good Teammate" Badge

        1.3. Store these badge images in the app/assets/images/badges directory

2. Create tables for the badging system

        2.1. Create a table named badges with the following attributes

                2.1.1. id — primary key

                2.1.2. name — varchar

                2.1.3. description — varchar

        2.2. Create a mapping table named assignment_badges with the following attributes

                2.2.1 id — primary key

                2.2.2 badge_id — foreign key

                2.2.3 assignment_id — foreign key

                2.2.4 threshold — int

        2.3. Create a mapping table named awarded_badges with the following attributes

                2.3.1. id — primary key

                2.3.2. badge_id — foreign key

                2.3.3. participant_id — foreign key

3. Change the UI so that instructors can add, configure, and view badges, and so that students can view their badges

        3.1. Add a new "Badges" tab to the assignments/edit page for instructors to add and configure badges

        3.2. Add badge icons to the participants/list page for instructors to view badges

        3.3. Add badge icons to the student_task/list page for students to view badges

4. Write feature tests to verify the modifications

        4.1. Include tests in the a new badge_system_spec.rb file in the spec/features directory

</div>

= Preliminary Mocks =

=== Badges ===

<div style="padding: 10px 25px 25px 25px">

The following Credly badge will be awarded to students who meet the "Good Reviewer" criterion for a given assignment:

[[File:Badge-Good-Reviewer-Small.png|none|frame|Good Reviewer Badge]]

 The following Credly badge will be awarded to team members who meet the "Good Teammate" criterion for a given assignment:

[[File:Badge-Good-Teammate-Small.png|none|frame|Good Teammate Badge]]

</div>

=== Tables ===

<div style="padding: 10px 25px 25px 25px">

The following is an example of mock data in the badges table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | name (varchar)
! style="padding:10px; text-align: center" | description (varchar)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | Good Reviewer
| style="padding:10px; text-align: center" | This badge is awarded to students who receive very high review grades.
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | Good Teammate
| style="padding:10px; text-align: center" | This badge is awarded to team members who receive very high teammate review scores.
|}

 The following is an example of mock data in the assignment_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | assignment_id (foreign key)
! style="padding:10px; text-align: center" | threshold (int)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 90
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 85
|-
| style="padding:10px; text-align: center" | 5
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 80
|}

The first row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The second row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The third row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 2 with a customized threshold of 90.

The fourth row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 2 with a customized threshold of 85.

The fifth row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 3 with a customized threshold of 80.

 The following is an example of mock data in the awarded_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | participant_id (foreign key)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 3
|}

The first row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The second row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.

The third row represents that the assignment participant with participant_id 2 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The fourth row represents that the assignment participant with participant_id 3 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.
</div>

=== Views ===

<div style="padding:10px 25px 25px 25px">

The following screenshots show a comparison of the existing _____ page, alongside a mockup incorporating the new badging system ______.

[[File:Original-Assignment-Edit.png|left]]

The following screenshots show a comparison of the existing ____ page, alongside a mockup incorporating the new badging system _____.

The following screenshots show a comparison of the existing ____ page, alongside a mockup incorporating the new badging system _____.

</div>

= Overview of Work Completed =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Testing =

<div style="padding: 10px 25px 25px 25px">

A new badge_system_spec.rb file will be created in the spec/features folder, and will include feature tests that verify the modifications made for the project.

NOTE: More information will be included in this section as the project progresses and the tests are written.

</div>

= Video Demonstrations =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Files Modified =

=== New Files ===

<div style="padding: 10px 25px 25px 25px">

• app/assets/images/badges

        A new directory created to house the new badge image files.

 • app/assets/images/badges/Badge-Good-Reviewer.png

        The image used for the new "Good Reviewer" badge.

 • app/assets/images/badges/Badge-Good-Teammate.png

        The image used for the new "Good Teammate" badge.

 • spec/features/badge_system_spec.rb

        The file holding the new tests written for the badging system.

 • db/migrate/...

        TBD: The migration for the new badges table.

 • db/migrate/...

        TBD: The migration for the new assignment_badges table.

 • db/migrate/...

        TBD: The migration for the new awarded_badges table.
</div>

=== Edited Files ===

<div style="padding: 10px 25px 25px 25px">

• app/models/review_response_map.rb

        The file in which the code for the "Good Reviewer" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/models/teammate_review_response_map.rb

        The file in which the code for the "Good Teammate" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/views/assignments/edit.html.erb

        The UI changes allowing instructors to add and calibrate badges for a given assignment.

 • app/views/participants/list.html.erb

        The UI changes allowing instructors to view badges for the participants of a given assignment.

 • app/views/student_task/list.html.erb

        The UI changes allowing students to view their badges for all of their assignments.

 • db/schema.rb

        Incorporating schema changes for the three new badges, assignment_badges, and awarded_badges tables.

</div>

= References =

<div style="padding: 10px 25px 25px 25px">

Videos summarizing the previous team's work on this project topic can be found [https://www.youtube.com/playlist?list=PLdDBHYYDZueeGNdQtzS2FfI-eC0-SK6cb here].

</div>

File:Original-Assignment-Edit.png

2017-11-13T01:35:25Z

Tmdement: uploaded a new version of "File:Original-Assignment-Edit.png"

CSC/ECE 517 Fall 2017/E17A2 Lightweight Badging System

2017-11-13T01:34:16Z

Tmdement: /* Views */

__TOC__

= Team Contact =

<div style="padding: 10px 25px 25px 25px">

; MEMBERS:

:Priyanka Jain: [mailto:pjain15@ncsu.edu pjain15@ncsu.edu]

:Pushpendra Patel: [mailto:ppatel16@ncsu.edu ppatel16@ncsu.edu]

:Tanay Kothari: [mailto:tkothar@ncsu.edu tkothar@ncsu.edu]

:Timothy Dement: [mailto:tmdement@ncsu.edu tmdement@ncsu.edu]

; MENTOR:

:Zhewei Hu: [mailto:zhu6@ncsu.edu zhu6@ncsu.edu]

</div>

= Project Description =

<div style="padding: 10px 25px 25px 25px">


The goal of this project is to create a simple badging system for Expertiza, allowing students to earn badges when they meet certain predefined criteria while using the platform. The full E17A2 project topic description can be found [https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.u6i7q1mdz0zl here]

 

Per the full project topic description, the badges will be designed using [https://credly.com Credly]. Previous work on this project topic revealed that any text included on the badges is too small to read, so all text should be removed from the badges and instead appear when the badges are hovered over.

 

This project is concerned with two preliminary badges — "Good Reviewer" and "Good Teammate" — but the design will be such that the badging system can be easily extended to include more badges in the future. The "Good Reviewer" badge will be awarded to students who receive very high review grades. The "Good Teammate" badge will be awarded to team members who receive very high teammate review scores. By default, the "threshold" for earning these badges will be set to a score of 95, but this value will be configurable on a per-assignment basis by the instructor.

 

A new "Badges" tab will be added for instructors on the "Edit Assignment" page where instructors can add badges and configure the badge criteria for a given assignment. Badges a student has earned can be seen when they view their "Task List" page, and an instructor will be able to view all badges earned by students when they view the "Participants List" page.

 

Please refer to the sections below for further detail.

</div>

= Project Requirements =

<div style="padding: 10px 25px 25px 25px">

1. Create badges using Credly (do not include text)

        1.1. Create the "Good Reviewer" Badge

        1.2. Create the "Good Teammate" Badge

        1.3. Store these badge images in the app/assets/images/badges directory

2. Create tables for the badging system

        2.1. Create a table named badges with the following attributes

                2.1.1. id — primary key

                2.1.2. name — varchar

                2.1.3. description — varchar

        2.2. Create a mapping table named assignment_badges with the following attributes

                2.2.1 id — primary key

                2.2.2 badge_id — foreign key

                2.2.3 assignment_id — foreign key

                2.2.4 threshold — int

        2.3. Create a mapping table named awarded_badges with the following attributes

                2.3.1. id — primary key

                2.3.2. badge_id — foreign key

                2.3.3. participant_id — foreign key

3. Change the UI so that instructors can add, configure, and view badges, and so that students can view their badges

        3.1. Add a new "Badges" tab to the assignments/edit page for instructors to add and configure badges

        3.2. Add badge icons to the participants/list page for instructors to view badges

        3.3. Add badge icons to the student_task/list page for students to view badges

4. Write feature tests to verify the modifications

        4.1. Include tests in the a new badge_system_spec.rb file in the spec/features directory

</div>

= Preliminary Mocks =

=== Badges ===

<div style="padding: 10px 25px 25px 25px">

The following Credly badge will be awarded to students who meet the "Good Reviewer" criterion for a given assignment:

[[File:Badge-Good-Reviewer-Small.png|none|frame|Good Reviewer Badge]]

 The following Credly badge will be awarded to team members who meet the "Good Teammate" criterion for a given assignment:

[[File:Badge-Good-Teammate-Small.png|none|frame|Good Teammate Badge]]

</div>

=== Tables ===

<div style="padding: 10px 25px 25px 25px">

The following is an example of mock data in the badges table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | name (varchar)
! style="padding:10px; text-align: center" | description (varchar)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | Good Reviewer
| style="padding:10px; text-align: center" | This badge is awarded to students who receive very high review grades.
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | Good Teammate
| style="padding:10px; text-align: center" | This badge is awarded to team members who receive very high teammate review scores.
|}

 The following is an example of mock data in the assignment_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | assignment_id (foreign key)
! style="padding:10px; text-align: center" | threshold (int)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 90
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 85
|-
| style="padding:10px; text-align: center" | 5
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 80
|}

The first row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The second row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The third row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 2 with a customized threshold of 90.

The fourth row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 2 with a customized threshold of 85.

The fifth row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 3 with a customized threshold of 80.

 The following is an example of mock data in the awarded_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | participant_id (foreign key)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 3
|}

The first row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The second row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.

The third row represents that the assignment participant with participant_id 2 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The fourth row represents that the assignment participant with participant_id 3 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.
</div>

=== Views ===

<div style="padding:10px 25px 25px 25px">

The following screenshots show a comparison of the existing _____ page, alongside a mockup incorporating the new badging system ______.

[[File:Original-Assignment-Edit-Medium.png|left]]

The following screenshots show a comparison of the existing ____ page, alongside a mockup incorporating the new badging system _____.

The following screenshots show a comparison of the existing ____ page, alongside a mockup incorporating the new badging system _____.

</div>

= Overview of Work Completed =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Testing =

<div style="padding: 10px 25px 25px 25px">

A new badge_system_spec.rb file will be created in the spec/features folder, and will include feature tests that verify the modifications made for the project.

NOTE: More information will be included in this section as the project progresses and the tests are written.

</div>

= Video Demonstrations =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Files Modified =

=== New Files ===

<div style="padding: 10px 25px 25px 25px">

• app/assets/images/badges

        A new directory created to house the new badge image files.

 • app/assets/images/badges/Badge-Good-Reviewer.png

        The image used for the new "Good Reviewer" badge.

 • app/assets/images/badges/Badge-Good-Teammate.png

        The image used for the new "Good Teammate" badge.

 • spec/features/badge_system_spec.rb

        The file holding the new tests written for the badging system.

 • db/migrate/...

        TBD: The migration for the new badges table.

 • db/migrate/...

        TBD: The migration for the new assignment_badges table.

 • db/migrate/...

        TBD: The migration for the new awarded_badges table.
</div>

=== Edited Files ===

<div style="padding: 10px 25px 25px 25px">

• app/models/review_response_map.rb

        The file in which the code for the "Good Reviewer" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/models/teammate_review_response_map.rb

        The file in which the code for the "Good Teammate" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/views/assignments/edit.html.erb

        The UI changes allowing instructors to add and calibrate badges for a given assignment.

 • app/views/participants/list.html.erb

        The UI changes allowing instructors to view badges for the participants of a given assignment.

 • app/views/student_task/list.html.erb

        The UI changes allowing students to view their badges for all of their assignments.

 • db/schema.rb

        Incorporating schema changes for the three new badges, assignment_badges, and awarded_badges tables.

</div>

= References =

<div style="padding: 10px 25px 25px 25px">

Videos summarizing the previous team's work on this project topic can be found [https://www.youtube.com/playlist?list=PLdDBHYYDZueeGNdQtzS2FfI-eC0-SK6cb here].

</div>

CSC/ECE 517 Fall 2017/E17A2 Lightweight Badging System

2017-11-13T01:34:02Z

Tmdement: /* Views */

__TOC__

= Team Contact =

<div style="padding: 10px 25px 25px 25px">

; MEMBERS:

:Priyanka Jain: [mailto:pjain15@ncsu.edu pjain15@ncsu.edu]

:Pushpendra Patel: [mailto:ppatel16@ncsu.edu ppatel16@ncsu.edu]

:Tanay Kothari: [mailto:tkothar@ncsu.edu tkothar@ncsu.edu]

:Timothy Dement: [mailto:tmdement@ncsu.edu tmdement@ncsu.edu]

; MENTOR:

:Zhewei Hu: [mailto:zhu6@ncsu.edu zhu6@ncsu.edu]

</div>

= Project Description =

<div style="padding: 10px 25px 25px 25px">


The goal of this project is to create a simple badging system for Expertiza, allowing students to earn badges when they meet certain predefined criteria while using the platform. The full E17A2 project topic description can be found [https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.u6i7q1mdz0zl here]

 

Per the full project topic description, the badges will be designed using [https://credly.com Credly]. Previous work on this project topic revealed that any text included on the badges is too small to read, so all text should be removed from the badges and instead appear when the badges are hovered over.

 

This project is concerned with two preliminary badges — "Good Reviewer" and "Good Teammate" — but the design will be such that the badging system can be easily extended to include more badges in the future. The "Good Reviewer" badge will be awarded to students who receive very high review grades. The "Good Teammate" badge will be awarded to team members who receive very high teammate review scores. By default, the "threshold" for earning these badges will be set to a score of 95, but this value will be configurable on a per-assignment basis by the instructor.

 

A new "Badges" tab will be added for instructors on the "Edit Assignment" page where instructors can add badges and configure the badge criteria for a given assignment. Badges a student has earned can be seen when they view their "Task List" page, and an instructor will be able to view all badges earned by students when they view the "Participants List" page.

 

Please refer to the sections below for further detail.

</div>

= Project Requirements =

<div style="padding: 10px 25px 25px 25px">

1. Create badges using Credly (do not include text)

        1.1. Create the "Good Reviewer" Badge

        1.2. Create the "Good Teammate" Badge

        1.3. Store these badge images in the app/assets/images/badges directory

2. Create tables for the badging system

        2.1. Create a table named badges with the following attributes

                2.1.1. id — primary key

                2.1.2. name — varchar

                2.1.3. description — varchar

        2.2. Create a mapping table named assignment_badges with the following attributes

                2.2.1 id — primary key

                2.2.2 badge_id — foreign key

                2.2.3 assignment_id — foreign key

                2.2.4 threshold — int

        2.3. Create a mapping table named awarded_badges with the following attributes

                2.3.1. id — primary key

                2.3.2. badge_id — foreign key

                2.3.3. participant_id — foreign key

3. Change the UI so that instructors can add, configure, and view badges, and so that students can view their badges

        3.1. Add a new "Badges" tab to the assignments/edit page for instructors to add and configure badges

        3.2. Add badge icons to the participants/list page for instructors to view badges

        3.3. Add badge icons to the student_task/list page for students to view badges

4. Write feature tests to verify the modifications

        4.1. Include tests in the a new badge_system_spec.rb file in the spec/features directory

</div>

= Preliminary Mocks =

=== Badges ===

<div style="padding: 10px 25px 25px 25px">

The following Credly badge will be awarded to students who meet the "Good Reviewer" criterion for a given assignment:

[[File:Badge-Good-Reviewer-Small.png|none|frame|Good Reviewer Badge]]

 The following Credly badge will be awarded to team members who meet the "Good Teammate" criterion for a given assignment:

[[File:Badge-Good-Teammate-Small.png|none|frame|Good Teammate Badge]]

</div>

=== Tables ===

<div style="padding: 10px 25px 25px 25px">

The following is an example of mock data in the badges table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | name (varchar)
! style="padding:10px; text-align: center" | description (varchar)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | Good Reviewer
| style="padding:10px; text-align: center" | This badge is awarded to students who receive very high review grades.
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | Good Teammate
| style="padding:10px; text-align: center" | This badge is awarded to team members who receive very high teammate review scores.
|}

 The following is an example of mock data in the assignment_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | assignment_id (foreign key)
! style="padding:10px; text-align: center" | threshold (int)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 90
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 85
|-
| style="padding:10px; text-align: center" | 5
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 80
|}

The first row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The second row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The third row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 2 with a customized threshold of 90.

The fourth row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 2 with a customized threshold of 85.

The fifth row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 3 with a customized threshold of 80.

 The following is an example of mock data in the awarded_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | participant_id (foreign key)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 3
|}

The first row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The second row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.

The third row represents that the assignment participant with participant_id 2 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The fourth row represents that the assignment participant with participant_id 3 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.
</div>

=== Views ===

<div style="padding:10px 25px 25px 25px">

The following screenshots show a comparison of the existing _____ page, alongside a mockup incorporating the new badging system ______.

[[File:Original-Assignment-Edit-Medium.png|none]]

The following screenshots show a comparison of the existing ____ page, alongside a mockup incorporating the new badging system _____.

The following screenshots show a comparison of the existing ____ page, alongside a mockup incorporating the new badging system _____.

</div>

= Overview of Work Completed =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Testing =

<div style="padding: 10px 25px 25px 25px">

A new badge_system_spec.rb file will be created in the spec/features folder, and will include feature tests that verify the modifications made for the project.

NOTE: More information will be included in this section as the project progresses and the tests are written.

</div>

= Video Demonstrations =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Files Modified =

=== New Files ===

<div style="padding: 10px 25px 25px 25px">

• app/assets/images/badges

        A new directory created to house the new badge image files.

 • app/assets/images/badges/Badge-Good-Reviewer.png

        The image used for the new "Good Reviewer" badge.

 • app/assets/images/badges/Badge-Good-Teammate.png

        The image used for the new "Good Teammate" badge.

 • spec/features/badge_system_spec.rb

        The file holding the new tests written for the badging system.

 • db/migrate/...

        TBD: The migration for the new badges table.

 • db/migrate/...

        TBD: The migration for the new assignment_badges table.

 • db/migrate/...

        TBD: The migration for the new awarded_badges table.
</div>

=== Edited Files ===

<div style="padding: 10px 25px 25px 25px">

• app/models/review_response_map.rb

        The file in which the code for the "Good Reviewer" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/models/teammate_review_response_map.rb

        The file in which the code for the "Good Teammate" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/views/assignments/edit.html.erb

        The UI changes allowing instructors to add and calibrate badges for a given assignment.

 • app/views/participants/list.html.erb

        The UI changes allowing instructors to view badges for the participants of a given assignment.

 • app/views/student_task/list.html.erb

        The UI changes allowing students to view their badges for all of their assignments.

 • db/schema.rb

        Incorporating schema changes for the three new badges, assignment_badges, and awarded_badges tables.

</div>

= References =

<div style="padding: 10px 25px 25px 25px">

Videos summarizing the previous team's work on this project topic can be found [https://www.youtube.com/playlist?list=PLdDBHYYDZueeGNdQtzS2FfI-eC0-SK6cb here].

</div>

CSC/ECE 517 Fall 2017/E17A2 Lightweight Badging System

2017-11-13T01:33:39Z

Tmdement: /* Views */

__TOC__

= Team Contact =

<div style="padding: 10px 25px 25px 25px">

; MEMBERS:

:Priyanka Jain: [mailto:pjain15@ncsu.edu pjain15@ncsu.edu]

:Pushpendra Patel: [mailto:ppatel16@ncsu.edu ppatel16@ncsu.edu]

:Tanay Kothari: [mailto:tkothar@ncsu.edu tkothar@ncsu.edu]

:Timothy Dement: [mailto:tmdement@ncsu.edu tmdement@ncsu.edu]

; MENTOR:

:Zhewei Hu: [mailto:zhu6@ncsu.edu zhu6@ncsu.edu]

</div>

= Project Description =

<div style="padding: 10px 25px 25px 25px">


The goal of this project is to create a simple badging system for Expertiza, allowing students to earn badges when they meet certain predefined criteria while using the platform. The full E17A2 project topic description can be found [https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.u6i7q1mdz0zl here]

 

Per the full project topic description, the badges will be designed using [https://credly.com Credly]. Previous work on this project topic revealed that any text included on the badges is too small to read, so all text should be removed from the badges and instead appear when the badges are hovered over.

 

This project is concerned with two preliminary badges — "Good Reviewer" and "Good Teammate" — but the design will be such that the badging system can be easily extended to include more badges in the future. The "Good Reviewer" badge will be awarded to students who receive very high review grades. The "Good Teammate" badge will be awarded to team members who receive very high teammate review scores. By default, the "threshold" for earning these badges will be set to a score of 95, but this value will be configurable on a per-assignment basis by the instructor.

 

A new "Badges" tab will be added for instructors on the "Edit Assignment" page where instructors can add badges and configure the badge criteria for a given assignment. Badges a student has earned can be seen when they view their "Task List" page, and an instructor will be able to view all badges earned by students when they view the "Participants List" page.

 

Please refer to the sections below for further detail.

</div>

= Project Requirements =

<div style="padding: 10px 25px 25px 25px">

1. Create badges using Credly (do not include text)

        1.1. Create the "Good Reviewer" Badge

        1.2. Create the "Good Teammate" Badge

        1.3. Store these badge images in the app/assets/images/badges directory

2. Create tables for the badging system

        2.1. Create a table named badges with the following attributes

                2.1.1. id — primary key

                2.1.2. name — varchar

                2.1.3. description — varchar

        2.2. Create a mapping table named assignment_badges with the following attributes

                2.2.1 id — primary key

                2.2.2 badge_id — foreign key

                2.2.3 assignment_id — foreign key

                2.2.4 threshold — int

        2.3. Create a mapping table named awarded_badges with the following attributes

                2.3.1. id — primary key

                2.3.2. badge_id — foreign key

                2.3.3. participant_id — foreign key

3. Change the UI so that instructors can add, configure, and view badges, and so that students can view their badges

        3.1. Add a new "Badges" tab to the assignments/edit page for instructors to add and configure badges

        3.2. Add badge icons to the participants/list page for instructors to view badges

        3.3. Add badge icons to the student_task/list page for students to view badges

4. Write feature tests to verify the modifications

        4.1. Include tests in the a new badge_system_spec.rb file in the spec/features directory

</div>

= Preliminary Mocks =

=== Badges ===

<div style="padding: 10px 25px 25px 25px">

The following Credly badge will be awarded to students who meet the "Good Reviewer" criterion for a given assignment:

[[File:Badge-Good-Reviewer-Small.png|none|frame|Good Reviewer Badge]]

 The following Credly badge will be awarded to team members who meet the "Good Teammate" criterion for a given assignment:

[[File:Badge-Good-Teammate-Small.png|none|frame|Good Teammate Badge]]

</div>

=== Tables ===

<div style="padding: 10px 25px 25px 25px">

The following is an example of mock data in the badges table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | name (varchar)
! style="padding:10px; text-align: center" | description (varchar)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | Good Reviewer
| style="padding:10px; text-align: center" | This badge is awarded to students who receive very high review grades.
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | Good Teammate
| style="padding:10px; text-align: center" | This badge is awarded to team members who receive very high teammate review scores.
|}

 The following is an example of mock data in the assignment_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | assignment_id (foreign key)
! style="padding:10px; text-align: center" | threshold (int)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 90
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 85
|-
| style="padding:10px; text-align: center" | 5
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 80
|}

The first row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The second row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The third row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 2 with a customized threshold of 90.

The fourth row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 2 with a customized threshold of 85.

The fifth row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 3 with a customized threshold of 80.

 The following is an example of mock data in the awarded_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | participant_id (foreign key)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 3
|}

The first row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The second row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.

The third row represents that the assignment participant with participant_id 2 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The fourth row represents that the assignment participant with participant_id 3 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.
</div>

=== Views ===

<div style="padding:10px 25px 25px 25px">

The following screenshots show a comparison of the existing _____ page, alongside a mockup incorporating the new badging system ______.

[[File:Original-Assignment-Edit-Medium.png]]

The following screenshots show a comparison of the existing ____ page, alongside a mockup incorporating the new badging system _____.

The following screenshots show a comparison of the existing ____ page, alongside a mockup incorporating the new badging system _____.

</div>

= Overview of Work Completed =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Testing =

<div style="padding: 10px 25px 25px 25px">

A new badge_system_spec.rb file will be created in the spec/features folder, and will include feature tests that verify the modifications made for the project.

NOTE: More information will be included in this section as the project progresses and the tests are written.

</div>

= Video Demonstrations =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Files Modified =

=== New Files ===

<div style="padding: 10px 25px 25px 25px">

• app/assets/images/badges

        A new directory created to house the new badge image files.

 • app/assets/images/badges/Badge-Good-Reviewer.png

        The image used for the new "Good Reviewer" badge.

 • app/assets/images/badges/Badge-Good-Teammate.png

        The image used for the new "Good Teammate" badge.

 • spec/features/badge_system_spec.rb

        The file holding the new tests written for the badging system.

 • db/migrate/...

        TBD: The migration for the new badges table.

 • db/migrate/...

        TBD: The migration for the new assignment_badges table.

 • db/migrate/...

        TBD: The migration for the new awarded_badges table.
</div>

=== Edited Files ===

<div style="padding: 10px 25px 25px 25px">

• app/models/review_response_map.rb

        The file in which the code for the "Good Reviewer" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/models/teammate_review_response_map.rb

        The file in which the code for the "Good Teammate" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/views/assignments/edit.html.erb

        The UI changes allowing instructors to add and calibrate badges for a given assignment.

 • app/views/participants/list.html.erb

        The UI changes allowing instructors to view badges for the participants of a given assignment.

 • app/views/student_task/list.html.erb

        The UI changes allowing students to view their badges for all of their assignments.

 • db/schema.rb

        Incorporating schema changes for the three new badges, assignment_badges, and awarded_badges tables.

</div>

= References =

<div style="padding: 10px 25px 25px 25px">

Videos summarizing the previous team's work on this project topic can be found [https://www.youtube.com/playlist?list=PLdDBHYYDZueeGNdQtzS2FfI-eC0-SK6cb here].

</div>

CSC/ECE 517 Fall 2017/E17A2 Lightweight Badging System

2017-11-13T01:33:18Z

Tmdement: /* Views */

__TOC__

= Team Contact =

<div style="padding: 10px 25px 25px 25px">

; MEMBERS:

:Priyanka Jain: [mailto:pjain15@ncsu.edu pjain15@ncsu.edu]

:Pushpendra Patel: [mailto:ppatel16@ncsu.edu ppatel16@ncsu.edu]

:Tanay Kothari: [mailto:tkothar@ncsu.edu tkothar@ncsu.edu]

:Timothy Dement: [mailto:tmdement@ncsu.edu tmdement@ncsu.edu]

; MENTOR:

:Zhewei Hu: [mailto:zhu6@ncsu.edu zhu6@ncsu.edu]

</div>

= Project Description =

<div style="padding: 10px 25px 25px 25px">


The goal of this project is to create a simple badging system for Expertiza, allowing students to earn badges when they meet certain predefined criteria while using the platform. The full E17A2 project topic description can be found [https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.u6i7q1mdz0zl here]

 

Per the full project topic description, the badges will be designed using [https://credly.com Credly]. Previous work on this project topic revealed that any text included on the badges is too small to read, so all text should be removed from the badges and instead appear when the badges are hovered over.

 

This project is concerned with two preliminary badges — "Good Reviewer" and "Good Teammate" — but the design will be such that the badging system can be easily extended to include more badges in the future. The "Good Reviewer" badge will be awarded to students who receive very high review grades. The "Good Teammate" badge will be awarded to team members who receive very high teammate review scores. By default, the "threshold" for earning these badges will be set to a score of 95, but this value will be configurable on a per-assignment basis by the instructor.

 

A new "Badges" tab will be added for instructors on the "Edit Assignment" page where instructors can add badges and configure the badge criteria for a given assignment. Badges a student has earned can be seen when they view their "Task List" page, and an instructor will be able to view all badges earned by students when they view the "Participants List" page.

 

Please refer to the sections below for further detail.

</div>

= Project Requirements =

<div style="padding: 10px 25px 25px 25px">

1. Create badges using Credly (do not include text)

        1.1. Create the "Good Reviewer" Badge

        1.2. Create the "Good Teammate" Badge

        1.3. Store these badge images in the app/assets/images/badges directory

2. Create tables for the badging system

        2.1. Create a table named badges with the following attributes

                2.1.1. id — primary key

                2.1.2. name — varchar

                2.1.3. description — varchar

        2.2. Create a mapping table named assignment_badges with the following attributes

                2.2.1 id — primary key

                2.2.2 badge_id — foreign key

                2.2.3 assignment_id — foreign key

                2.2.4 threshold — int

        2.3. Create a mapping table named awarded_badges with the following attributes

                2.3.1. id — primary key

                2.3.2. badge_id — foreign key

                2.3.3. participant_id — foreign key

3. Change the UI so that instructors can add, configure, and view badges, and so that students can view their badges

        3.1. Add a new "Badges" tab to the assignments/edit page for instructors to add and configure badges

        3.2. Add badge icons to the participants/list page for instructors to view badges

        3.3. Add badge icons to the student_task/list page for students to view badges

4. Write feature tests to verify the modifications

        4.1. Include tests in the a new badge_system_spec.rb file in the spec/features directory

</div>

= Preliminary Mocks =

=== Badges ===

<div style="padding: 10px 25px 25px 25px">

The following Credly badge will be awarded to students who meet the "Good Reviewer" criterion for a given assignment:

[[File:Badge-Good-Reviewer-Small.png|none|frame|Good Reviewer Badge]]

 The following Credly badge will be awarded to team members who meet the "Good Teammate" criterion for a given assignment:

[[File:Badge-Good-Teammate-Small.png|none|frame|Good Teammate Badge]]

</div>

=== Tables ===

<div style="padding: 10px 25px 25px 25px">

The following is an example of mock data in the badges table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | name (varchar)
! style="padding:10px; text-align: center" | description (varchar)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | Good Reviewer
| style="padding:10px; text-align: center" | This badge is awarded to students who receive very high review grades.
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | Good Teammate
| style="padding:10px; text-align: center" | This badge is awarded to team members who receive very high teammate review scores.
|}

 The following is an example of mock data in the assignment_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | assignment_id (foreign key)
! style="padding:10px; text-align: center" | threshold (int)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 90
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 85
|-
| style="padding:10px; text-align: center" | 5
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 80
|}

The first row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The second row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The third row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 2 with a customized threshold of 90.

The fourth row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 2 with a customized threshold of 85.

The fifth row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 3 with a customized threshold of 80.

 The following is an example of mock data in the awarded_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | participant_id (foreign key)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 3
|}

The first row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The second row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.

The third row represents that the assignment participant with participant_id 2 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The fourth row represents that the assignment participant with participant_id 3 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.
</div>

=== Views ===

<div style="padding:10px 25px 25px 25px">

The following screenshots show a comparison of the existing _____ page, alongside a mockup incorporating the new badging system ______.

[[File:Original-Assigment-Edit-Medium.png]]

The following screenshots show a comparison of the existing ____ page, alongside a mockup incorporating the new badging system _____.

The following screenshots show a comparison of the existing ____ page, alongside a mockup incorporating the new badging system _____.

</div>

= Overview of Work Completed =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Testing =

<div style="padding: 10px 25px 25px 25px">

A new badge_system_spec.rb file will be created in the spec/features folder, and will include feature tests that verify the modifications made for the project.

NOTE: More information will be included in this section as the project progresses and the tests are written.

</div>

= Video Demonstrations =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Files Modified =

=== New Files ===

<div style="padding: 10px 25px 25px 25px">

• app/assets/images/badges

        A new directory created to house the new badge image files.

 • app/assets/images/badges/Badge-Good-Reviewer.png

        The image used for the new "Good Reviewer" badge.

 • app/assets/images/badges/Badge-Good-Teammate.png

        The image used for the new "Good Teammate" badge.

 • spec/features/badge_system_spec.rb

        The file holding the new tests written for the badging system.

 • db/migrate/...

        TBD: The migration for the new badges table.

 • db/migrate/...

        TBD: The migration for the new assignment_badges table.

 • db/migrate/...

        TBD: The migration for the new awarded_badges table.
</div>

=== Edited Files ===

<div style="padding: 10px 25px 25px 25px">

• app/models/review_response_map.rb

        The file in which the code for the "Good Reviewer" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/models/teammate_review_response_map.rb

        The file in which the code for the "Good Teammate" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/views/assignments/edit.html.erb

        The UI changes allowing instructors to add and calibrate badges for a given assignment.

 • app/views/participants/list.html.erb

        The UI changes allowing instructors to view badges for the participants of a given assignment.

 • app/views/student_task/list.html.erb

        The UI changes allowing students to view their badges for all of their assignments.

 • db/schema.rb

        Incorporating schema changes for the three new badges, assignment_badges, and awarded_badges tables.

</div>

= References =

<div style="padding: 10px 25px 25px 25px">

Videos summarizing the previous team's work on this project topic can be found [https://www.youtube.com/playlist?list=PLdDBHYYDZueeGNdQtzS2FfI-eC0-SK6cb here].

</div>

File:Original-Assignment-Edit-Medium.png

2017-11-13T01:32:55Z

Tmdement:

CSC/ECE 517 Fall 2017/E17A2 Lightweight Badging System

2017-11-13T01:30:43Z

Tmdement: /* Views */

__TOC__

= Team Contact =

<div style="padding: 10px 25px 25px 25px">

; MEMBERS:

:Priyanka Jain: [mailto:pjain15@ncsu.edu pjain15@ncsu.edu]

:Pushpendra Patel: [mailto:ppatel16@ncsu.edu ppatel16@ncsu.edu]

:Tanay Kothari: [mailto:tkothar@ncsu.edu tkothar@ncsu.edu]

:Timothy Dement: [mailto:tmdement@ncsu.edu tmdement@ncsu.edu]

; MENTOR:

:Zhewei Hu: [mailto:zhu6@ncsu.edu zhu6@ncsu.edu]

</div>

= Project Description =

<div style="padding: 10px 25px 25px 25px">


The goal of this project is to create a simple badging system for Expertiza, allowing students to earn badges when they meet certain predefined criteria while using the platform. The full E17A2 project topic description can be found [https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.u6i7q1mdz0zl here]

 

Per the full project topic description, the badges will be designed using [https://credly.com Credly]. Previous work on this project topic revealed that any text included on the badges is too small to read, so all text should be removed from the badges and instead appear when the badges are hovered over.

 

This project is concerned with two preliminary badges — "Good Reviewer" and "Good Teammate" — but the design will be such that the badging system can be easily extended to include more badges in the future. The "Good Reviewer" badge will be awarded to students who receive very high review grades. The "Good Teammate" badge will be awarded to team members who receive very high teammate review scores. By default, the "threshold" for earning these badges will be set to a score of 95, but this value will be configurable on a per-assignment basis by the instructor.

 

A new "Badges" tab will be added for instructors on the "Edit Assignment" page where instructors can add badges and configure the badge criteria for a given assignment. Badges a student has earned can be seen when they view their "Task List" page, and an instructor will be able to view all badges earned by students when they view the "Participants List" page.

 

Please refer to the sections below for further detail.

</div>

= Project Requirements =

<div style="padding: 10px 25px 25px 25px">

1. Create badges using Credly (do not include text)

        1.1. Create the "Good Reviewer" Badge

        1.2. Create the "Good Teammate" Badge

        1.3. Store these badge images in the app/assets/images/badges directory

2. Create tables for the badging system

        2.1. Create a table named badges with the following attributes

                2.1.1. id — primary key

                2.1.2. name — varchar

                2.1.3. description — varchar

        2.2. Create a mapping table named assignment_badges with the following attributes

                2.2.1 id — primary key

                2.2.2 badge_id — foreign key

                2.2.3 assignment_id — foreign key

                2.2.4 threshold — int

        2.3. Create a mapping table named awarded_badges with the following attributes

                2.3.1. id — primary key

                2.3.2. badge_id — foreign key

                2.3.3. participant_id — foreign key

3. Change the UI so that instructors can add, configure, and view badges, and so that students can view their badges

        3.1. Add a new "Badges" tab to the assignments/edit page for instructors to add and configure badges

        3.2. Add badge icons to the participants/list page for instructors to view badges

        3.3. Add badge icons to the student_task/list page for students to view badges

4. Write feature tests to verify the modifications

        4.1. Include tests in the a new badge_system_spec.rb file in the spec/features directory

</div>

= Preliminary Mocks =

=== Badges ===

<div style="padding: 10px 25px 25px 25px">

The following Credly badge will be awarded to students who meet the "Good Reviewer" criterion for a given assignment:

[[File:Badge-Good-Reviewer-Small.png|none|frame|Good Reviewer Badge]]

 The following Credly badge will be awarded to team members who meet the "Good Teammate" criterion for a given assignment:

[[File:Badge-Good-Teammate-Small.png|none|frame|Good Teammate Badge]]

</div>

=== Tables ===

<div style="padding: 10px 25px 25px 25px">

The following is an example of mock data in the badges table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | name (varchar)
! style="padding:10px; text-align: center" | description (varchar)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | Good Reviewer
| style="padding:10px; text-align: center" | This badge is awarded to students who receive very high review grades.
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | Good Teammate
| style="padding:10px; text-align: center" | This badge is awarded to team members who receive very high teammate review scores.
|}

 The following is an example of mock data in the assignment_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | assignment_id (foreign key)
! style="padding:10px; text-align: center" | threshold (int)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 90
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 85
|-
| style="padding:10px; text-align: center" | 5
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 80
|}

The first row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The second row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The third row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 2 with a customized threshold of 90.

The fourth row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 2 with a customized threshold of 85.

The fifth row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 3 with a customized threshold of 80.

 The following is an example of mock data in the awarded_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | participant_id (foreign key)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 3
|}

The first row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The second row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.

The third row represents that the assignment participant with participant_id 2 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The fourth row represents that the assignment participant with participant_id 3 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.
</div>

=== Views ===

<div style="padding:10px 25px 25px 25px">

The following screenshots show a comparison of the existing _____ page, alongside a mockup incorporating the new badging system ______.

The following screenshots show a comparison of the existing ____ page, alongside a mockup incorporating the new badging system _____.

The following screenshots show a comparison of the existing ____ page, alongside a mockup incorporating the new badging system _____.

</div>

= Overview of Work Completed =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Testing =

<div style="padding: 10px 25px 25px 25px">

A new badge_system_spec.rb file will be created in the spec/features folder, and will include feature tests that verify the modifications made for the project.

NOTE: More information will be included in this section as the project progresses and the tests are written.

</div>

= Video Demonstrations =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Files Modified =

=== New Files ===

<div style="padding: 10px 25px 25px 25px">

• app/assets/images/badges

        A new directory created to house the new badge image files.

 • app/assets/images/badges/Badge-Good-Reviewer.png

        The image used for the new "Good Reviewer" badge.

 • app/assets/images/badges/Badge-Good-Teammate.png

        The image used for the new "Good Teammate" badge.

 • spec/features/badge_system_spec.rb

        The file holding the new tests written for the badging system.

 • db/migrate/...

        TBD: The migration for the new badges table.

 • db/migrate/...

        TBD: The migration for the new assignment_badges table.

 • db/migrate/...

        TBD: The migration for the new awarded_badges table.
</div>

=== Edited Files ===

<div style="padding: 10px 25px 25px 25px">

• app/models/review_response_map.rb

        The file in which the code for the "Good Reviewer" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/models/teammate_review_response_map.rb

        The file in which the code for the "Good Teammate" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/views/assignments/edit.html.erb

        The UI changes allowing instructors to add and calibrate badges for a given assignment.

 • app/views/participants/list.html.erb

        The UI changes allowing instructors to view badges for the participants of a given assignment.

 • app/views/student_task/list.html.erb

        The UI changes allowing students to view their badges for all of their assignments.

 • db/schema.rb

        Incorporating schema changes for the three new badges, assignment_badges, and awarded_badges tables.

</div>

= References =

<div style="padding: 10px 25px 25px 25px">

Videos summarizing the previous team's work on this project topic can be found [https://www.youtube.com/playlist?list=PLdDBHYYDZueeGNdQtzS2FfI-eC0-SK6cb here].

</div>

CSC/ECE 517 Fall 2017/E17A2 Lightweight Badging System

2017-11-13T01:30:25Z

Tmdement: /* Views */

__TOC__

= Team Contact =

<div style="padding: 10px 25px 25px 25px">

; MEMBERS:

:Priyanka Jain: [mailto:pjain15@ncsu.edu pjain15@ncsu.edu]

:Pushpendra Patel: [mailto:ppatel16@ncsu.edu ppatel16@ncsu.edu]

:Tanay Kothari: [mailto:tkothar@ncsu.edu tkothar@ncsu.edu]

:Timothy Dement: [mailto:tmdement@ncsu.edu tmdement@ncsu.edu]

; MENTOR:

:Zhewei Hu: [mailto:zhu6@ncsu.edu zhu6@ncsu.edu]

</div>

= Project Description =

<div style="padding: 10px 25px 25px 25px">


The goal of this project is to create a simple badging system for Expertiza, allowing students to earn badges when they meet certain predefined criteria while using the platform. The full E17A2 project topic description can be found [https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.u6i7q1mdz0zl here]

 

Per the full project topic description, the badges will be designed using [https://credly.com Credly]. Previous work on this project topic revealed that any text included on the badges is too small to read, so all text should be removed from the badges and instead appear when the badges are hovered over.

 

This project is concerned with two preliminary badges — "Good Reviewer" and "Good Teammate" — but the design will be such that the badging system can be easily extended to include more badges in the future. The "Good Reviewer" badge will be awarded to students who receive very high review grades. The "Good Teammate" badge will be awarded to team members who receive very high teammate review scores. By default, the "threshold" for earning these badges will be set to a score of 95, but this value will be configurable on a per-assignment basis by the instructor.

 

A new "Badges" tab will be added for instructors on the "Edit Assignment" page where instructors can add badges and configure the badge criteria for a given assignment. Badges a student has earned can be seen when they view their "Task List" page, and an instructor will be able to view all badges earned by students when they view the "Participants List" page.

 

Please refer to the sections below for further detail.

</div>

= Project Requirements =

<div style="padding: 10px 25px 25px 25px">

1. Create badges using Credly (do not include text)

        1.1. Create the "Good Reviewer" Badge

        1.2. Create the "Good Teammate" Badge

        1.3. Store these badge images in the app/assets/images/badges directory

2. Create tables for the badging system

        2.1. Create a table named badges with the following attributes

                2.1.1. id — primary key

                2.1.2. name — varchar

                2.1.3. description — varchar

        2.2. Create a mapping table named assignment_badges with the following attributes

                2.2.1 id — primary key

                2.2.2 badge_id — foreign key

                2.2.3 assignment_id — foreign key

                2.2.4 threshold — int

        2.3. Create a mapping table named awarded_badges with the following attributes

                2.3.1. id — primary key

                2.3.2. badge_id — foreign key

                2.3.3. participant_id — foreign key

3. Change the UI so that instructors can add, configure, and view badges, and so that students can view their badges

        3.1. Add a new "Badges" tab to the assignments/edit page for instructors to add and configure badges

        3.2. Add badge icons to the participants/list page for instructors to view badges

        3.3. Add badge icons to the student_task/list page for students to view badges

4. Write feature tests to verify the modifications

        4.1. Include tests in the a new badge_system_spec.rb file in the spec/features directory

</div>

= Preliminary Mocks =

=== Badges ===

<div style="padding: 10px 25px 25px 25px">

The following Credly badge will be awarded to students who meet the "Good Reviewer" criterion for a given assignment:

[[File:Badge-Good-Reviewer-Small.png|none|frame|Good Reviewer Badge]]

 The following Credly badge will be awarded to team members who meet the "Good Teammate" criterion for a given assignment:

[[File:Badge-Good-Teammate-Small.png|none|frame|Good Teammate Badge]]

</div>

=== Tables ===

<div style="padding: 10px 25px 25px 25px">

The following is an example of mock data in the badges table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | name (varchar)
! style="padding:10px; text-align: center" | description (varchar)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | Good Reviewer
| style="padding:10px; text-align: center" | This badge is awarded to students who receive very high review grades.
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | Good Teammate
| style="padding:10px; text-align: center" | This badge is awarded to team members who receive very high teammate review scores.
|}

 The following is an example of mock data in the assignment_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | assignment_id (foreign key)
! style="padding:10px; text-align: center" | threshold (int)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 90
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 85
|-
| style="padding:10px; text-align: center" | 5
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 80
|}

The first row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The second row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The third row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 2 with a customized threshold of 90.

The fourth row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 2 with a customized threshold of 85.

The fifth row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 3 with a customized threshold of 80.

 The following is an example of mock data in the awarded_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | participant_id (foreign key)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 3
|}

The first row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The second row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.

The third row represents that the assignment participant with participant_id 2 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The fourth row represents that the assignment participant with participant_id 3 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.
</div>

=== Views ===

<div style="padding:10px 25px 25px 25px">

The following screenshots show a comparison of the existing _____ page, alongside a mockup incorporating the new badging system ______.

[[File:Original-Assignment-Edit.png|frame|upright=0.75]]

The following screenshots show a comparison of the existing ____ page, alongside a mockup incorporating the new badging system _____.

The following screenshots show a comparison of the existing ____ page, alongside a mockup incorporating the new badging system _____.

</div>

= Overview of Work Completed =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Testing =

<div style="padding: 10px 25px 25px 25px">

A new badge_system_spec.rb file will be created in the spec/features folder, and will include feature tests that verify the modifications made for the project.

NOTE: More information will be included in this section as the project progresses and the tests are written.

</div>

= Video Demonstrations =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Files Modified =

=== New Files ===

<div style="padding: 10px 25px 25px 25px">

• app/assets/images/badges

        A new directory created to house the new badge image files.

 • app/assets/images/badges/Badge-Good-Reviewer.png

        The image used for the new "Good Reviewer" badge.

 • app/assets/images/badges/Badge-Good-Teammate.png

        The image used for the new "Good Teammate" badge.

 • spec/features/badge_system_spec.rb

        The file holding the new tests written for the badging system.

 • db/migrate/...

        TBD: The migration for the new badges table.

 • db/migrate/...

        TBD: The migration for the new assignment_badges table.

 • db/migrate/...

        TBD: The migration for the new awarded_badges table.
</div>

=== Edited Files ===

<div style="padding: 10px 25px 25px 25px">

• app/models/review_response_map.rb

        The file in which the code for the "Good Reviewer" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/models/teammate_review_response_map.rb

        The file in which the code for the "Good Teammate" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/views/assignments/edit.html.erb

        The UI changes allowing instructors to add and calibrate badges for a given assignment.

 • app/views/participants/list.html.erb

        The UI changes allowing instructors to view badges for the participants of a given assignment.

 • app/views/student_task/list.html.erb

        The UI changes allowing students to view their badges for all of their assignments.

 • db/schema.rb

        Incorporating schema changes for the three new badges, assignment_badges, and awarded_badges tables.

</div>

= References =

<div style="padding: 10px 25px 25px 25px">

Videos summarizing the previous team's work on this project topic can be found [https://www.youtube.com/playlist?list=PLdDBHYYDZueeGNdQtzS2FfI-eC0-SK6cb here].

</div>

CSC/ECE 517 Fall 2017/E17A2 Lightweight Badging System

2017-11-13T01:30:15Z

Tmdement: /* Views */

__TOC__

= Team Contact =

<div style="padding: 10px 25px 25px 25px">

; MEMBERS:

:Priyanka Jain: [mailto:pjain15@ncsu.edu pjain15@ncsu.edu]

:Pushpendra Patel: [mailto:ppatel16@ncsu.edu ppatel16@ncsu.edu]

:Tanay Kothari: [mailto:tkothar@ncsu.edu tkothar@ncsu.edu]

:Timothy Dement: [mailto:tmdement@ncsu.edu tmdement@ncsu.edu]

; MENTOR:

:Zhewei Hu: [mailto:zhu6@ncsu.edu zhu6@ncsu.edu]

</div>

= Project Description =

<div style="padding: 10px 25px 25px 25px">


The goal of this project is to create a simple badging system for Expertiza, allowing students to earn badges when they meet certain predefined criteria while using the platform. The full E17A2 project topic description can be found [https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.u6i7q1mdz0zl here]

 

Per the full project topic description, the badges will be designed using [https://credly.com Credly]. Previous work on this project topic revealed that any text included on the badges is too small to read, so all text should be removed from the badges and instead appear when the badges are hovered over.

 

This project is concerned with two preliminary badges — "Good Reviewer" and "Good Teammate" — but the design will be such that the badging system can be easily extended to include more badges in the future. The "Good Reviewer" badge will be awarded to students who receive very high review grades. The "Good Teammate" badge will be awarded to team members who receive very high teammate review scores. By default, the "threshold" for earning these badges will be set to a score of 95, but this value will be configurable on a per-assignment basis by the instructor.

 

A new "Badges" tab will be added for instructors on the "Edit Assignment" page where instructors can add badges and configure the badge criteria for a given assignment. Badges a student has earned can be seen when they view their "Task List" page, and an instructor will be able to view all badges earned by students when they view the "Participants List" page.

 

Please refer to the sections below for further detail.

</div>

= Project Requirements =

<div style="padding: 10px 25px 25px 25px">

1. Create badges using Credly (do not include text)

        1.1. Create the "Good Reviewer" Badge

        1.2. Create the "Good Teammate" Badge

        1.3. Store these badge images in the app/assets/images/badges directory

2. Create tables for the badging system

        2.1. Create a table named badges with the following attributes

                2.1.1. id — primary key

                2.1.2. name — varchar

                2.1.3. description — varchar

        2.2. Create a mapping table named assignment_badges with the following attributes

                2.2.1 id — primary key

                2.2.2 badge_id — foreign key

                2.2.3 assignment_id — foreign key

                2.2.4 threshold — int

        2.3. Create a mapping table named awarded_badges with the following attributes

                2.3.1. id — primary key

                2.3.2. badge_id — foreign key

                2.3.3. participant_id — foreign key

3. Change the UI so that instructors can add, configure, and view badges, and so that students can view their badges

        3.1. Add a new "Badges" tab to the assignments/edit page for instructors to add and configure badges

        3.2. Add badge icons to the participants/list page for instructors to view badges

        3.3. Add badge icons to the student_task/list page for students to view badges

4. Write feature tests to verify the modifications

        4.1. Include tests in the a new badge_system_spec.rb file in the spec/features directory

</div>

= Preliminary Mocks =

=== Badges ===

<div style="padding: 10px 25px 25px 25px">

The following Credly badge will be awarded to students who meet the "Good Reviewer" criterion for a given assignment:

[[File:Badge-Good-Reviewer-Small.png|none|frame|Good Reviewer Badge]]

 The following Credly badge will be awarded to team members who meet the "Good Teammate" criterion for a given assignment:

[[File:Badge-Good-Teammate-Small.png|none|frame|Good Teammate Badge]]

</div>

=== Tables ===

<div style="padding: 10px 25px 25px 25px">

The following is an example of mock data in the badges table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | name (varchar)
! style="padding:10px; text-align: center" | description (varchar)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | Good Reviewer
| style="padding:10px; text-align: center" | This badge is awarded to students who receive very high review grades.
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | Good Teammate
| style="padding:10px; text-align: center" | This badge is awarded to team members who receive very high teammate review scores.
|}

 The following is an example of mock data in the assignment_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | assignment_id (foreign key)
! style="padding:10px; text-align: center" | threshold (int)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 90
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 85
|-
| style="padding:10px; text-align: center" | 5
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 80
|}

The first row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The second row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The third row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 2 with a customized threshold of 90.

The fourth row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 2 with a customized threshold of 85.

The fifth row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 3 with a customized threshold of 80.

 The following is an example of mock data in the awarded_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | participant_id (foreign key)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 3
|}

The first row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The second row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.

The third row represents that the assignment participant with participant_id 2 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The fourth row represents that the assignment participant with participant_id 3 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.
</div>

=== Views ===

<div style="padding:10px 25px 25px 25px">

The following screenshots show a comparison of the existing _____ page, alongside a mockup incorporating the new badging system ______.

[[File:Original-Assignment-Edit.png|framless|upright=0.75]]

The following screenshots show a comparison of the existing ____ page, alongside a mockup incorporating the new badging system _____.

The following screenshots show a comparison of the existing ____ page, alongside a mockup incorporating the new badging system _____.

</div>

= Overview of Work Completed =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Testing =

<div style="padding: 10px 25px 25px 25px">

A new badge_system_spec.rb file will be created in the spec/features folder, and will include feature tests that verify the modifications made for the project.

NOTE: More information will be included in this section as the project progresses and the tests are written.

</div>

= Video Demonstrations =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Files Modified =

=== New Files ===

<div style="padding: 10px 25px 25px 25px">

• app/assets/images/badges

        A new directory created to house the new badge image files.

 • app/assets/images/badges/Badge-Good-Reviewer.png

        The image used for the new "Good Reviewer" badge.

 • app/assets/images/badges/Badge-Good-Teammate.png

        The image used for the new "Good Teammate" badge.

 • spec/features/badge_system_spec.rb

        The file holding the new tests written for the badging system.

 • db/migrate/...

        TBD: The migration for the new badges table.

 • db/migrate/...

        TBD: The migration for the new assignment_badges table.

 • db/migrate/...

        TBD: The migration for the new awarded_badges table.
</div>

=== Edited Files ===

<div style="padding: 10px 25px 25px 25px">

• app/models/review_response_map.rb

        The file in which the code for the "Good Reviewer" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/models/teammate_review_response_map.rb

        The file in which the code for the "Good Teammate" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/views/assignments/edit.html.erb

        The UI changes allowing instructors to add and calibrate badges for a given assignment.

 • app/views/participants/list.html.erb

        The UI changes allowing instructors to view badges for the participants of a given assignment.

 • app/views/student_task/list.html.erb

        The UI changes allowing students to view their badges for all of their assignments.

 • db/schema.rb

        Incorporating schema changes for the three new badges, assignment_badges, and awarded_badges tables.

</div>

= References =

<div style="padding: 10px 25px 25px 25px">

Videos summarizing the previous team's work on this project topic can be found [https://www.youtube.com/playlist?list=PLdDBHYYDZueeGNdQtzS2FfI-eC0-SK6cb here].

</div>

CSC/ECE 517 Fall 2017/E17A2 Lightweight Badging System

2017-11-13T01:29:58Z

Tmdement: /* Views */

__TOC__

= Team Contact =

<div style="padding: 10px 25px 25px 25px">

; MEMBERS:

:Priyanka Jain: [mailto:pjain15@ncsu.edu pjain15@ncsu.edu]

:Pushpendra Patel: [mailto:ppatel16@ncsu.edu ppatel16@ncsu.edu]

:Tanay Kothari: [mailto:tkothar@ncsu.edu tkothar@ncsu.edu]

:Timothy Dement: [mailto:tmdement@ncsu.edu tmdement@ncsu.edu]

; MENTOR:

:Zhewei Hu: [mailto:zhu6@ncsu.edu zhu6@ncsu.edu]

</div>

= Project Description =

<div style="padding: 10px 25px 25px 25px">


The goal of this project is to create a simple badging system for Expertiza, allowing students to earn badges when they meet certain predefined criteria while using the platform. The full E17A2 project topic description can be found [https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.u6i7q1mdz0zl here]

 

Per the full project topic description, the badges will be designed using [https://credly.com Credly]. Previous work on this project topic revealed that any text included on the badges is too small to read, so all text should be removed from the badges and instead appear when the badges are hovered over.

 

This project is concerned with two preliminary badges — "Good Reviewer" and "Good Teammate" — but the design will be such that the badging system can be easily extended to include more badges in the future. The "Good Reviewer" badge will be awarded to students who receive very high review grades. The "Good Teammate" badge will be awarded to team members who receive very high teammate review scores. By default, the "threshold" for earning these badges will be set to a score of 95, but this value will be configurable on a per-assignment basis by the instructor.

 

A new "Badges" tab will be added for instructors on the "Edit Assignment" page where instructors can add badges and configure the badge criteria for a given assignment. Badges a student has earned can be seen when they view their "Task List" page, and an instructor will be able to view all badges earned by students when they view the "Participants List" page.

 

Please refer to the sections below for further detail.

</div>

= Project Requirements =

<div style="padding: 10px 25px 25px 25px">

1. Create badges using Credly (do not include text)

        1.1. Create the "Good Reviewer" Badge

        1.2. Create the "Good Teammate" Badge

        1.3. Store these badge images in the app/assets/images/badges directory

2. Create tables for the badging system

        2.1. Create a table named badges with the following attributes

                2.1.1. id — primary key

                2.1.2. name — varchar

                2.1.3. description — varchar

        2.2. Create a mapping table named assignment_badges with the following attributes

                2.2.1 id — primary key

                2.2.2 badge_id — foreign key

                2.2.3 assignment_id — foreign key

                2.2.4 threshold — int

        2.3. Create a mapping table named awarded_badges with the following attributes

                2.3.1. id — primary key

                2.3.2. badge_id — foreign key

                2.3.3. participant_id — foreign key

3. Change the UI so that instructors can add, configure, and view badges, and so that students can view their badges

        3.1. Add a new "Badges" tab to the assignments/edit page for instructors to add and configure badges

        3.2. Add badge icons to the participants/list page for instructors to view badges

        3.3. Add badge icons to the student_task/list page for students to view badges

4. Write feature tests to verify the modifications

        4.1. Include tests in the a new badge_system_spec.rb file in the spec/features directory

</div>

= Preliminary Mocks =

=== Badges ===

<div style="padding: 10px 25px 25px 25px">

The following Credly badge will be awarded to students who meet the "Good Reviewer" criterion for a given assignment:

[[File:Badge-Good-Reviewer-Small.png|none|frame|Good Reviewer Badge]]

 The following Credly badge will be awarded to team members who meet the "Good Teammate" criterion for a given assignment:

[[File:Badge-Good-Teammate-Small.png|none|frame|Good Teammate Badge]]

</div>

=== Tables ===

<div style="padding: 10px 25px 25px 25px">

The following is an example of mock data in the badges table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | name (varchar)
! style="padding:10px; text-align: center" | description (varchar)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | Good Reviewer
| style="padding:10px; text-align: center" | This badge is awarded to students who receive very high review grades.
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | Good Teammate
| style="padding:10px; text-align: center" | This badge is awarded to team members who receive very high teammate review scores.
|}

 The following is an example of mock data in the assignment_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | assignment_id (foreign key)
! style="padding:10px; text-align: center" | threshold (int)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 90
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 85
|-
| style="padding:10px; text-align: center" | 5
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 80
|}

The first row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The second row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The third row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 2 with a customized threshold of 90.

The fourth row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 2 with a customized threshold of 85.

The fifth row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 3 with a customized threshold of 80.

 The following is an example of mock data in the awarded_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | participant_id (foreign key)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 3
|}

The first row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The second row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.

The third row represents that the assignment participant with participant_id 2 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The fourth row represents that the assignment participant with participant_id 3 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.
</div>

=== Views ===

<div style="padding:10px 25px 25px 25px">

The following screenshots show a comparison of the existing _____ page, alongside a mockup incorporating the new badging system ______.

[[File:Original-Assignment-Edit.png|thumb|upright=0.75]]

The following screenshots show a comparison of the existing ____ page, alongside a mockup incorporating the new badging system _____.

The following screenshots show a comparison of the existing ____ page, alongside a mockup incorporating the new badging system _____.

</div>

= Overview of Work Completed =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Testing =

<div style="padding: 10px 25px 25px 25px">

A new badge_system_spec.rb file will be created in the spec/features folder, and will include feature tests that verify the modifications made for the project.

NOTE: More information will be included in this section as the project progresses and the tests are written.

</div>

= Video Demonstrations =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Files Modified =

=== New Files ===

<div style="padding: 10px 25px 25px 25px">

• app/assets/images/badges

        A new directory created to house the new badge image files.

 • app/assets/images/badges/Badge-Good-Reviewer.png

        The image used for the new "Good Reviewer" badge.

 • app/assets/images/badges/Badge-Good-Teammate.png

        The image used for the new "Good Teammate" badge.

 • spec/features/badge_system_spec.rb

        The file holding the new tests written for the badging system.

 • db/migrate/...

        TBD: The migration for the new badges table.

 • db/migrate/...

        TBD: The migration for the new assignment_badges table.

 • db/migrate/...

        TBD: The migration for the new awarded_badges table.
</div>

=== Edited Files ===

<div style="padding: 10px 25px 25px 25px">

• app/models/review_response_map.rb

        The file in which the code for the "Good Reviewer" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/models/teammate_review_response_map.rb

        The file in which the code for the "Good Teammate" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/views/assignments/edit.html.erb

        The UI changes allowing instructors to add and calibrate badges for a given assignment.

 • app/views/participants/list.html.erb

        The UI changes allowing instructors to view badges for the participants of a given assignment.

 • app/views/student_task/list.html.erb

        The UI changes allowing students to view their badges for all of their assignments.

 • db/schema.rb

        Incorporating schema changes for the three new badges, assignment_badges, and awarded_badges tables.

</div>

= References =

<div style="padding: 10px 25px 25px 25px">

Videos summarizing the previous team's work on this project topic can be found [https://www.youtube.com/playlist?list=PLdDBHYYDZueeGNdQtzS2FfI-eC0-SK6cb here].

</div>

CSC/ECE 517 Fall 2017/E17A2 Lightweight Badging System

2017-11-13T01:29:25Z

Tmdement: /* Views */

__TOC__

= Team Contact =

<div style="padding: 10px 25px 25px 25px">

; MEMBERS:

:Priyanka Jain: [mailto:pjain15@ncsu.edu pjain15@ncsu.edu]

:Pushpendra Patel: [mailto:ppatel16@ncsu.edu ppatel16@ncsu.edu]

:Tanay Kothari: [mailto:tkothar@ncsu.edu tkothar@ncsu.edu]

:Timothy Dement: [mailto:tmdement@ncsu.edu tmdement@ncsu.edu]

; MENTOR:

:Zhewei Hu: [mailto:zhu6@ncsu.edu zhu6@ncsu.edu]

</div>

= Project Description =

<div style="padding: 10px 25px 25px 25px">


The goal of this project is to create a simple badging system for Expertiza, allowing students to earn badges when they meet certain predefined criteria while using the platform. The full E17A2 project topic description can be found [https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.u6i7q1mdz0zl here]

 

Per the full project topic description, the badges will be designed using [https://credly.com Credly]. Previous work on this project topic revealed that any text included on the badges is too small to read, so all text should be removed from the badges and instead appear when the badges are hovered over.

 

This project is concerned with two preliminary badges — "Good Reviewer" and "Good Teammate" — but the design will be such that the badging system can be easily extended to include more badges in the future. The "Good Reviewer" badge will be awarded to students who receive very high review grades. The "Good Teammate" badge will be awarded to team members who receive very high teammate review scores. By default, the "threshold" for earning these badges will be set to a score of 95, but this value will be configurable on a per-assignment basis by the instructor.

 

A new "Badges" tab will be added for instructors on the "Edit Assignment" page where instructors can add badges and configure the badge criteria for a given assignment. Badges a student has earned can be seen when they view their "Task List" page, and an instructor will be able to view all badges earned by students when they view the "Participants List" page.

 

Please refer to the sections below for further detail.

</div>

= Project Requirements =

<div style="padding: 10px 25px 25px 25px">

1. Create badges using Credly (do not include text)

        1.1. Create the "Good Reviewer" Badge

        1.2. Create the "Good Teammate" Badge

        1.3. Store these badge images in the app/assets/images/badges directory

2. Create tables for the badging system

        2.1. Create a table named badges with the following attributes

                2.1.1. id — primary key

                2.1.2. name — varchar

                2.1.3. description — varchar

        2.2. Create a mapping table named assignment_badges with the following attributes

                2.2.1 id — primary key

                2.2.2 badge_id — foreign key

                2.2.3 assignment_id — foreign key

                2.2.4 threshold — int

        2.3. Create a mapping table named awarded_badges with the following attributes

                2.3.1. id — primary key

                2.3.2. badge_id — foreign key

                2.3.3. participant_id — foreign key

3. Change the UI so that instructors can add, configure, and view badges, and so that students can view their badges

        3.1. Add a new "Badges" tab to the assignments/edit page for instructors to add and configure badges

        3.2. Add badge icons to the participants/list page for instructors to view badges

        3.3. Add badge icons to the student_task/list page for students to view badges

4. Write feature tests to verify the modifications

        4.1. Include tests in the a new badge_system_spec.rb file in the spec/features directory

</div>

= Preliminary Mocks =

=== Badges ===

<div style="padding: 10px 25px 25px 25px">

The following Credly badge will be awarded to students who meet the "Good Reviewer" criterion for a given assignment:

[[File:Badge-Good-Reviewer-Small.png|none|frame|Good Reviewer Badge]]

 The following Credly badge will be awarded to team members who meet the "Good Teammate" criterion for a given assignment:

[[File:Badge-Good-Teammate-Small.png|none|frame|Good Teammate Badge]]

</div>

=== Tables ===

<div style="padding: 10px 25px 25px 25px">

The following is an example of mock data in the badges table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | name (varchar)
! style="padding:10px; text-align: center" | description (varchar)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | Good Reviewer
| style="padding:10px; text-align: center" | This badge is awarded to students who receive very high review grades.
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | Good Teammate
| style="padding:10px; text-align: center" | This badge is awarded to team members who receive very high teammate review scores.
|}

 The following is an example of mock data in the assignment_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | assignment_id (foreign key)
! style="padding:10px; text-align: center" | threshold (int)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 90
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 85
|-
| style="padding:10px; text-align: center" | 5
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 80
|}

The first row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The second row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The third row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 2 with a customized threshold of 90.

The fourth row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 2 with a customized threshold of 85.

The fifth row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 3 with a customized threshold of 80.

 The following is an example of mock data in the awarded_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | participant_id (foreign key)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 3
|}

The first row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The second row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.

The third row represents that the assignment participant with participant_id 2 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The fourth row represents that the assignment participant with participant_id 3 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.
</div>

=== Views ===

<div style="padding:10px 25px 25px 25px">

The following screenshots show a comparison of the existing _____ page, alongside a mockup incorporating the new badging system ______.

[[File:Original-Assignment-Edit.png|upright=0.75]]

The following screenshots show a comparison of the existing ____ page, alongside a mockup incorporating the new badging system _____.

The following screenshots show a comparison of the existing ____ page, alongside a mockup incorporating the new badging system _____.

</div>

= Overview of Work Completed =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Testing =

<div style="padding: 10px 25px 25px 25px">

A new badge_system_spec.rb file will be created in the spec/features folder, and will include feature tests that verify the modifications made for the project.

NOTE: More information will be included in this section as the project progresses and the tests are written.

</div>

= Video Demonstrations =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Files Modified =

=== New Files ===

<div style="padding: 10px 25px 25px 25px">

• app/assets/images/badges

        A new directory created to house the new badge image files.

 • app/assets/images/badges/Badge-Good-Reviewer.png

        The image used for the new "Good Reviewer" badge.

 • app/assets/images/badges/Badge-Good-Teammate.png

        The image used for the new "Good Teammate" badge.

 • spec/features/badge_system_spec.rb

        The file holding the new tests written for the badging system.

 • db/migrate/...

        TBD: The migration for the new badges table.

 • db/migrate/...

        TBD: The migration for the new assignment_badges table.

 • db/migrate/...

        TBD: The migration for the new awarded_badges table.
</div>

=== Edited Files ===

<div style="padding: 10px 25px 25px 25px">

• app/models/review_response_map.rb

        The file in which the code for the "Good Reviewer" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/models/teammate_review_response_map.rb

        The file in which the code for the "Good Teammate" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/views/assignments/edit.html.erb

        The UI changes allowing instructors to add and calibrate badges for a given assignment.

 • app/views/participants/list.html.erb

        The UI changes allowing instructors to view badges for the participants of a given assignment.

 • app/views/student_task/list.html.erb

        The UI changes allowing students to view their badges for all of their assignments.

 • db/schema.rb

        Incorporating schema changes for the three new badges, assignment_badges, and awarded_badges tables.

</div>

= References =

<div style="padding: 10px 25px 25px 25px">

Videos summarizing the previous team's work on this project topic can be found [https://www.youtube.com/playlist?list=PLdDBHYYDZueeGNdQtzS2FfI-eC0-SK6cb here].

</div>

CSC/ECE 517 Fall 2017/E17A2 Lightweight Badging System

2017-11-13T01:28:41Z

Tmdement: /* Views */

__TOC__

= Team Contact =

<div style="padding: 10px 25px 25px 25px">

; MEMBERS:

:Priyanka Jain: [mailto:pjain15@ncsu.edu pjain15@ncsu.edu]

:Pushpendra Patel: [mailto:ppatel16@ncsu.edu ppatel16@ncsu.edu]

:Tanay Kothari: [mailto:tkothar@ncsu.edu tkothar@ncsu.edu]

:Timothy Dement: [mailto:tmdement@ncsu.edu tmdement@ncsu.edu]

; MENTOR:

:Zhewei Hu: [mailto:zhu6@ncsu.edu zhu6@ncsu.edu]

</div>

= Project Description =

<div style="padding: 10px 25px 25px 25px">


The goal of this project is to create a simple badging system for Expertiza, allowing students to earn badges when they meet certain predefined criteria while using the platform. The full E17A2 project topic description can be found [https://docs.google.com/document/d/1WYiXxhYyycp9a3I0GTC-4KFgHrg65Tf27ijJNQvxhmk/edit#heading=h.u6i7q1mdz0zl here]

 

Per the full project topic description, the badges will be designed using [https://credly.com Credly]. Previous work on this project topic revealed that any text included on the badges is too small to read, so all text should be removed from the badges and instead appear when the badges are hovered over.

 

This project is concerned with two preliminary badges — "Good Reviewer" and "Good Teammate" — but the design will be such that the badging system can be easily extended to include more badges in the future. The "Good Reviewer" badge will be awarded to students who receive very high review grades. The "Good Teammate" badge will be awarded to team members who receive very high teammate review scores. By default, the "threshold" for earning these badges will be set to a score of 95, but this value will be configurable on a per-assignment basis by the instructor.

 

A new "Badges" tab will be added for instructors on the "Edit Assignment" page where instructors can add badges and configure the badge criteria for a given assignment. Badges a student has earned can be seen when they view their "Task List" page, and an instructor will be able to view all badges earned by students when they view the "Participants List" page.

 

Please refer to the sections below for further detail.

</div>

= Project Requirements =

<div style="padding: 10px 25px 25px 25px">

1. Create badges using Credly (do not include text)

        1.1. Create the "Good Reviewer" Badge

        1.2. Create the "Good Teammate" Badge

        1.3. Store these badge images in the app/assets/images/badges directory

2. Create tables for the badging system

        2.1. Create a table named badges with the following attributes

                2.1.1. id — primary key

                2.1.2. name — varchar

                2.1.3. description — varchar

        2.2. Create a mapping table named assignment_badges with the following attributes

                2.2.1 id — primary key

                2.2.2 badge_id — foreign key

                2.2.3 assignment_id — foreign key

                2.2.4 threshold — int

        2.3. Create a mapping table named awarded_badges with the following attributes

                2.3.1. id — primary key

                2.3.2. badge_id — foreign key

                2.3.3. participant_id — foreign key

3. Change the UI so that instructors can add, configure, and view badges, and so that students can view their badges

        3.1. Add a new "Badges" tab to the assignments/edit page for instructors to add and configure badges

        3.2. Add badge icons to the participants/list page for instructors to view badges

        3.3. Add badge icons to the student_task/list page for students to view badges

4. Write feature tests to verify the modifications

        4.1. Include tests in the a new badge_system_spec.rb file in the spec/features directory

</div>

= Preliminary Mocks =

=== Badges ===

<div style="padding: 10px 25px 25px 25px">

The following Credly badge will be awarded to students who meet the "Good Reviewer" criterion for a given assignment:

[[File:Badge-Good-Reviewer-Small.png|none|frame|Good Reviewer Badge]]

 The following Credly badge will be awarded to team members who meet the "Good Teammate" criterion for a given assignment:

[[File:Badge-Good-Teammate-Small.png|none|frame|Good Teammate Badge]]

</div>

=== Tables ===

<div style="padding: 10px 25px 25px 25px">

The following is an example of mock data in the badges table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | name (varchar)
! style="padding:10px; text-align: center" | description (varchar)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | Good Reviewer
| style="padding:10px; text-align: center" | This badge is awarded to students who receive very high review grades.
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | Good Teammate
| style="padding:10px; text-align: center" | This badge is awarded to team members who receive very high teammate review scores.
|}

 The following is an example of mock data in the assignment_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | assignment_id (foreign key)
! style="padding:10px; text-align: center" | threshold (int)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 95
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 90
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 85
|-
| style="padding:10px; text-align: center" | 5
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 80
|}

The first row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The second row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 1 with the default threshold of 95.

The third row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 2 with a customized threshold of 90.

The fourth row represents that the badge with badge_id 2 ("Good Teammate") has been activated for assignment with assignment_id 2 with a customized threshold of 85.

The fifth row represents that the badge with badge_id 1 ("Good Reviewer") has been activated for assignment with assignment_id 3 with a customized threshold of 80.

 The following is an example of mock data in the awarded_badges mapping table:

{| class="wikitable"
|-
! style="padding:10px; text-align: center" | id (primary key)
! style="padding:10px; text-align: center" | badge_id (foreign key)
! style="padding:10px; text-align: center" | participant_id (foreign key)
|-
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 1
|-
| style="padding:10px; text-align: center" | 3
| style="padding:10px; text-align: center" | 1
| style="padding:10px; text-align: center" | 2
|-
| style="padding:10px; text-align: center" | 4
| style="padding:10px; text-align: center" | 2
| style="padding:10px; text-align: center" | 3
|}

The first row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The second row represents that the assignment participant with participant_id 1 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.

The third row represents that the assignment participant with participant_id 2 has earned the badge with badge_id 1 ("Good Reviewer") for the given assignment.

The fourth row represents that the assignment participant with participant_id 3 has earned the badge with badge_id 2 ("Good Teammate") for the given assignment.
</div>

=== Views ===

<div style="padding:10px 25px 25px 25px">

The following screenshots show a comparison of the existing _____ page, alongside a mockup incorporating the new badging system ______.

[[File:Original-Assignment-Edit.png|Width 100px]]

The following screenshots show a comparison of the existing ____ page, alongside a mockup incorporating the new badging system _____.

The following screenshots show a comparison of the existing ____ page, alongside a mockup incorporating the new badging system _____.

</div>

= Overview of Work Completed =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Testing =

<div style="padding: 10px 25px 25px 25px">

A new badge_system_spec.rb file will be created in the spec/features folder, and will include feature tests that verify the modifications made for the project.

NOTE: More information will be included in this section as the project progresses and the tests are written.

</div>

= Video Demonstrations =

<div style="padding: 10px 25px 25px 25px">

NOTE: More information will be included in this section as the project progresses.

</div>

= Files Modified =

=== New Files ===

<div style="padding: 10px 25px 25px 25px">

• app/assets/images/badges

        A new directory created to house the new badge image files.

 • app/assets/images/badges/Badge-Good-Reviewer.png

        The image used for the new "Good Reviewer" badge.

 • app/assets/images/badges/Badge-Good-Teammate.png

        The image used for the new "Good Teammate" badge.

 • spec/features/badge_system_spec.rb

        The file holding the new tests written for the badging system.

 • db/migrate/...

        TBD: The migration for the new badges table.

 • db/migrate/...

        TBD: The migration for the new assignment_badges table.

 • db/migrate/...

        TBD: The migration for the new awarded_badges table.
</div>

=== Edited Files ===

<div style="padding: 10px 25px 25px 25px">

• app/models/review_response_map.rb

        The file in which the code for the "Good Reviewer" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/models/teammate_review_response_map.rb

        The file in which the code for the "Good Teammate" badge will be inserted.

        NOTE: More detail will be provided as the project progresses.

 • app/views/assignments/edit.html.erb

        The UI changes allowing instructors to add and calibrate badges for a given assignment.

 • app/views/participants/list.html.erb

        The UI changes allowing instructors to view badges for the participants of a given assignment.

 • app/views/student_task/list.html.erb

        The UI changes allowing students to view their badges for all of their assignments.

 • db/schema.rb

        Incorporating schema changes for the three new badges, assignment_badges, and awarded_badges tables.

</div>

= References =

<div style="padding: 10px 25px 25px 25px">

Videos summarizing the previous team's work on this project topic can be found [https://www.youtube.com/playlist?list=PLdDBHYYDZueeGNdQtzS2FfI-eC0-SK6cb here].

</div>