empirical-org-archive/quill-writer-archive

Quill Writer - Learning by Writing Together

quill-writer-archive's Issues

★ Create Win Condition

Goal: Create win condition that serves as finish point for activities.

How: X words from the word bank must be used to complete the activity. A counter should be displayed below the word bank, as shown here;

When the minimum count is reached, the button created in solution #15 should display. When this is clicked, the story should be submitted to the teacher and publicly posted in the classroom lobby.

Teacher Review Settings

• Teachers should be able to go through all of the stories and authorize the stories?
• Do we require teachers to authorize stories before they are shared?
• We need to add a settings panel that lets teachers set the stories to review or to auto-publish:

https://moqups.com/gault8121/tv6POeNa/p:a0694d15a

• Likewise, we need to enable Empirical Core to either publish student names or hide them.

Interactive Tutorial Resources

The goal is to set up an interactive tutorial based on this:
https://moqups.com/gault8121/tv6POeNa/p:a976f4658

A while back we had two devs use a framework called Guiders JS. Here is a link to the pull request.

empirical-org/Empirical-Core#96

This seems to be the best tool. I've also bookmarked four other interactive tutorial libraries, so you may want to look these over as one of them may jump out at you as being best suited for our needs (i.e. easy to use, etc.)

http://zurb.com/playground/jquery-joyride-feature-tour-plugin
http://www.jeffpickhardt.com/guiders
http://bootstraptour.com/
http://linkedin.github.io/hopscotch/

Utilize a build tool.

We should put a build tool in place for compiling, concatenating, minifying, etc. our script and style files.

I've used gulp before with good success, and have dabbled enough with Grunt to know that works well too. Any preferences would be good to hear.

Advanced: creating a classroom specific lobby where students can jump into a match.

Ux options:

1. Teacher assigns student pairs.
2. Students are randomly assigned pairs.
3. Students create rooms and choose who to play with.

Setup Express to serve the Angular app

We will target Heroku for now.

Design Project: Build Stories With Friends pages

This is not as urgent, but will need to be finished in about a month so that we can get the design live in time for the school year.

Storieswithfriends.org has virtually no design in its current iteration and we want to fix that. We'd like it to be fairly imaginative and playful, but because it is meant for middle and high schoolers, not overly juvenile.

Link to Wireframes of Design Issues

Here is a link to the Moqups wireframes for the SWF game logic.

https://moqups.com/gault8121/tv6POeNa/p:a28a94ad8

Guide - Group 6. Stories With Friends UX Overview

Stories With Friends is live at StoriesWithFriends.org. You can test out the UX by opening the site in two separate browsers and joining a match.

There are three projects to consider one:

1. How students are matched together.
   See the details here:
   https://docs.google.com/a/quill.org/document/d/1i27qMWzaBjDwuonyi3jIiHeY-O_yqiIrvu18oWZ4K7o/edit

2. Refining the experience of students playing the game.
   There are thee outstanding UX issues with the current game interface:
   #4
   #16
   #14

3. Showcasing all of the students accomplishments.
   See this issue: #6

Compass API Get User Information

Each user will make a Compass API request to get their information.

I have stubbed the method, see #40, but I'm not going to use it at the moment. I'm unsure what what this data will look like and even how to tell who is who.

@quinn Will both players get the same uid and sid?

Share stories in a common spot

Goal: Publicly display all submitted lessons within a classroom.

How: These lessons should be displayed after a student submits their story, as outlined in issue #3. This will require classroom lobbies to be set up and API Integration #11

Move Firebase deps into bower.

Document the Firebase DataStructure

Firebase is great because there are no schema restrictions, yet.

Firebase is potentially bad because there are no schema restrictions, yet.

Make notes to the structure we are using in the README.

The Forge area is perfect for looking at what is currently there, https://storieswithfriends.firebaseio.com/ (being a dev on the stories with friends team required to view)

Once we have a nice structure we like, we can write some firebase security rules that help limit the types of data that can be put in certain places. https://www.firebase.com/docs/security/security-rules.html

Change some internal routing

The module url is to remain /#/

As of now, the app takes in the Query String params and redirects to /#/games

We should drop the Redirect and only use /#/

It uses the redirect for testing locally. Eventually we the iFrame integration is complete, we can test through that avenue.

Feedback in the Typing Menu

• Do we should students the squiggly lines?
• We could, for example, tell students that words are spelled wrong with telling them how they are spelled wrong, so that they have to go through and review it.

Hooking up the site to the API.

Missing bootstrap

@TGOlson When I make a make a fresh clone && bower install, I do not get the bootstrap.css style sheet.

Is this something that should be added into bower.json?

Build Wireframes for Design Issues

@tomcalabrese and @petergault need to build the wireframes for all of the issues in the SWF Design Issues milestone. Once these are built we can then implement the logic.

★Refresh Bug

Goal: Every time either student hits submit, the page should update with the segment of the story they added. Currently this does not always happen and students must sometimes manually refresh the page to reflect the changes.

Allow students to flag sentences

Goal: Students should be able to flag sentences for the teacher to review

★ Indicate whose turn it is to write

Goal: The person whose turn it is to write should be clearly indicated.

How: Every time one user hits submit, the bolded name should switch to the opposite partner. In addition, if it is player1's turn to write, then player2 should be notified that player1 is writing next to player2's submit button.

Invisible Timer for Students

Goal: Create a timer that tracks the amount of time since a student's turn started. We want to send students a gentle reminder after a certain amount of time to tell them to go. We've noticed some students delay in telling their stories.

• Students can not respond, and they should get some prompt that indicates that they need to go.
• We want to make the timer invisible so that students don’t feel pressure. We could do some sort of warning after say 30 seconds that tells students to go.
• We could create some sort of punishment for not working.

Define OAuth Application URL

We need to to identify the URLs for Stories with Friends as specified here, https://github.com/empirical-org/Documentation/blob/master/Compass/API-Design/API%20Docs.md#activity-specification

Stub Angular Compass API Service

Make a stubbed out version of the Angular Compass API

Create a firebase database for dev environments.

Right now the firebase database url is hardcoded to the production url. Ideally we would have a dev environment database when developing locally. I've never set up something like that using Firebase, so I'm not sure if that would entail using a shared dev database (not ideal, but simpler), or each developer using their own sandbox firebase instance (best option, but no clue how we would set that up).

Set up a test framework.

Likely karma for the angular unit tests. Might consider some other test framework for end-to-end tests, if desired.

Student Notebook Covers

When students finish stories they get notebooks. Which would then go into a library for the class.

Note: Tense Instructions.

Students are confused about whether they can use the past tense of a word. SWF does accept past tense verbs, and we need to tell students they can use an alternate tense.

Create requirements for the lesson.

For example, use X number of words to pass lesson.

★ Create Strong Documentation for Site

Goal: Make the site structured and documented well enough that people can easily jump in and start coding.

Why: Stories With Friends was written in one day, so the code can be messy in some areas. However, it is an open source project, and we want contributors to be able to easily jump in and understand what is going on. This will save time in getting set up, increase accessibility, and save us time that may otherwise be spent explaining.

How: Go through code and clean it up. The original creator, Leo, should be able to help with this.

Create "Submit Story to Teacher" Button

Goal: Change "Submit" button to "Submit Story to Teacher" button, after all vocab words have been crossed off.

How: The current submit button should change to "Submit Story to Teacher" once all words in the list have been used. Ultimately this should direct users to the public page in isssue #6, but as we don't actually have anywhere for this to go right now, so it can just return to homepage until we figure that out.

Improve code quality with JSHint and (js-beautify or possibly jsfmt)

http://www.jshint.com/
https://github.com/einars/js-beautify
https://github.com/rdio/jsfmt

And embrace https://github.com/rwaldron/idiomatic.js/ or something similar

All issues - parse these out.

Design update

Create requirements for the lesson. Use x number of words to pass lesson.

Share stories on a common spot.

Allow students to flag sentences.

Fixing bugs with the refresh.

Allowing teachers to upload lessons.

Creating strong documentation for the site.

Pulling data from EngangeNY

Pulling a mobile app with push notification

Advanced: hooking up the site to the API.

Advanced: creating a classroom specific lobby where students can jump into a match.
Ux options:

1. Teacher assigns student pairs.
2. Students are randomly assigned pairs.
3. Students create rooms and choose who to play with.

Design Project: Build Three Slides For Big Apps Pitch

By 12PM on Wednesday, July 16, we need 3 slides in a PDF format. We've wireframed these in the attached images and will supply you with the text and vocabulary words soon.

This is an urgent priority, so how we represent the website in these slides does not need to be the same as how the finished project will look. We are interested in highlighting the areas in slide 1 with the zoom filter mentioned earlier.

Google Drive folder for this project:

https://drive.google.com/a/quill.org/#folders/0B-r431ws0zjXdS1HSVhSRkpEWms

For your reference:
StoriesWithFriends.org (the site)
Quill.org (our main site)
https://www.youtube.com/watch?v=vgvPmvw8meY (SWF demo video)

OAuth Application: Submit the Built Form to Compass

This will require using OAuth and me researching how this works and translating to angular.

Create Database for Content

Goal: We need a database so that we can add additional content. It should probably be PostGres or MongoDB.

Content will include additional lessons composed of vocab words, prompts, definitions, and win points (e.g. 6/10 words used).

Use connect assets

Connect assets will finger print the angular stuff and other files.

Perhaps there is a nice gulp way to write a var into index.jade?

@TGOlson Any experience with gulp + express + jade(or other server side templating)?

Pull data from EngageNY

Ryan will get about 5 lessons of approximately 10 words each from Engage NY. These will be sorted by grade and form the content.

Add Profanity Filter to Student Searches

If a student inputs a sentence that contains a profane word, when the student presses submit the sentence should not display. Instead, an alert should pop up stating please do not use profane language.

OAuth Application: Define and Build the Form URL

The Form URL is used to create an Activity for Stories with Friends.

This can be a simple HTML form that collects the prompt, list of word/definitions, and the number of used words needed to complete the activity.

The Compass API only accepts JSON at the moment, so we will have to override the form action with some JavaScript to send the correct payload type.

Pulling a mobile app with push notification

Backlog: Design Idea - Randomly Showing Words

Rather than showing all 10 words at the start of the activity, we could start with say 4 words, and then show another 4 words once the first 2 are used. The key idea here is that it creates a sense of excitement - you don't know what words are going to come next, which adds another element of suspense to the story writing process.

This will be an optional feature setting for stories, and we will build this later on.

Limit Game Max Players

Each game should be limited to two players.

I think we can just use $firebase().$on('loaded') event to wait for the array to load the current list of players.

There is still a race condition if more than two people try to get in the same game.

If this proves problematic, we can use a Firebase transaction.

Jump into Twitter Chats

We should identify promising twitter channels from this list and jump into these chats:

https://docs.google.com/a/quill.org/spreadsheet/ccc?key=0AiftIdjCeWSXdDRLRzNsVktUUGJpRWJhdUlWLS1Genc&usp=drive_web#gid=0

★ Hooking up the site to the Compass API.

Note: This is our first pass at explaining our brand new and barely documented API. We'll need to work with you to make sure this is clear and to ensure that our API documentation makes sense. Our lead developer can help you with this.

Goal: Integrate Stories with Friends (SWF) with the Compass API (https://github.com/empirical-org/Compass-API) so that lessons/grades will show up in Compass, our learning management system.

How: The Compass database contains lesson names and descriptions. Students and teachers see these without visiting SWF. The SWF database will contain the actual content (i.e. vocab words, definitions, and prompts). These need to be linked together, and then the MatchID and PlayerID variables need to be linked to the specific students and classrooms that they came from in Compass.

Interactive Tutorial

We need to design an interactive tutorial for the students that conveys the following info:

• Convey that students use words from the list.
• Students can use past tense, future tense of words. This is hard to convey.
• Convey that students take turns. Make it clear whose turn it is.
• We need to convey that students should “Flag” or “Challenge” words that are used incorrectly.
• We need to convey the end state, where students have completed all of the

Help Tutorial

• Button for instructions: We need to make it clear they can access the help tutorial at any time.
• We go through the tutorial on the first play through.

Create Different Backgrounds for Different Types of Writing Activities

Build Glossary of Terms

We should put together a list of all of the terms we use in the site.
For example: Students are Authors & the words are “Story Words”

Drop usage of https://www.npmjs.org/package/crypto

Is there a reason why the node core crypto module isn't being use?

https://github.com/empirical-org/Stories-With-Friends/blob/master/package.json#L24

The only function I see being used is randomBytes which core crypto implements.

★ Create teacher upload functionality.

This is dependent on #11 being completed.

Teachers should be able to upload their own word lists, prompts, and definitions via a csv file.