If you see on this story, if you get an answer correct the answer is highlighted in green. If you introduce an error, (edit anything that is not within the brackets) it gets highlighted in purple.

We ignore introduced errors, but it is good to capture it into the system.

1. For the BrainPOP launch, let’s launch Quill Proofreader without the hints. Just the errors, and let’s make sure each of the stories has been proofread by a couple of people.

In the instructions, let’s include some details along the lines of:
1 - How many errors there are in the story
2 - The lines: “To correct an error, click on it and re-type it”.
3 - Remove the copy that states they are deleting the words in parentheses.

In the center fold there is the top "featured game". We should see if we can take this spot, and we can build an art asset for it to preview with BrainPOP. This is where the current "Build a tree" icon is. https://www.brainpop.com/games/

• We can show the Quill Proofreader animation. This page will need to be white, so we should get Ryan Wilcoxson to re-matte the animation in white. We may also need to reduce the size.
• Let’s include the following copy.
• At the top left we state Quill Proofreader with the flag icon.
• In the middle left we state: Can you find all of the grammatical errors in these three stories?
• In the lower left we show a button that states: "Play it now"
• Let’s include a button that says “Play it now” (even though the whole page its a button).
• Let's also include something about "Use Snapthought to share your results with your teacher." We can include that + plus a copy of the actual snap thought button under the animation.

From @petergault on November 19, 2014 3:18

For our activities we may want to have apps that are either in hints or no hints mode. (We may want to reconsider the term here). Basically the idea is that in hints mode the errors are underlined. In a non-hints mode there is simply an incorrect sentence that needs to be fixed.

We can set these two modes for the apps.

Copied from original issue: Empirical-org-Archive/Quill-Lessons#12

We change the module and form urls of the existing practice questions app. I have the uid's that are generated from the postgresql dump I generated a few weeks ago.

I've confirmed the uids are the same.

On the data side, we will need to make the uid the key in the appropriate object maps. (I cannot wait for JS to get sets).

Then we will create some routes that handle the id as a query string.

Students should see how many questions they have remaining on the practice questions set. For now this can be as simple as showing a number that states: 2/9

Here is a screenshot of what it looks like now (upper right corner, 2/9):

They've had significant edits. Once @wlaurance pushes these live, we should have several people review them

We need to add a few conditions.

• The length of the typed sentence must be at least ~70% of the length of the correct answer.
• Better tokenization - Ex, If the correct answer is deer, and the student types deers, it is considered correct, because the sub string deer appears in the word.

This is related to number 4 on the #3 rewrite issue.

Today we found an error in a sentence in the activity called Comma After internal Prepositional Phrases. The error in one of the sentences is "My Sister" where it should be "My sister' because sister is a common noun. It would make it wrong when students corrected that mistake.

This occurs when a student gets all of the edits correct, but introduces extra ones.

Basically, there are no sentences to practice on. We should just send them to the results page in this event.

settings page for teachers: Select sentence or word mode.
CMS looks like for concepts and hints: concepts auto-populate, hints are an option to select.

The rule description is an HTML blob and should be treated as such.

I think we should define some angular filters that allow a simple subset of html tags.

This way data admins, can put whatever they'd like in the editor for rule descriptions and other
fields that support HTML rendering.

We want teachers to be able to add data into Quill-Grammar. This information will be saved in Firebase. It will be readable by everyone, and only editable by the teacher who created it.

Goal: Create a standalone version of Quill Proofreader that features 3 stories from Quill. Students will be able to select one of three stories, and after they finish they will be asked to sign up for Quill. They can also return to the home screen to try another story. We should add some custom doodles into each of these stories to make it fun.

Project Overview:
Our app will be featured here:
https://www.brainpop.com/search/search.weml?keyword=English%20Games&sections=games

Guideline:
https://docs.google.com/document/d/1_TxF5ML_JcfQHCjtMptfR-xhsWUus4q7RnwBxiv4-0A/edit#heading=h.whq1x8mggbuy

To do

• Please poke around on GameUP to see how the other apps are designed and structure.
• Design a landing page that lets users see 3 possible stories.
• Design the page for each of the passages. We may want to feature custom doodles for some of the passages to make it more fun.
• Once a user presses check answer, we may want to introduce a new round of feedback that says "there are x answers left, keep going."
• Once a user presses check answers, we should then have a message that states what they found and what they missed. Tell them that they can go to Quill.org to save their progress. We should embed the sign up right into the app. We should also include the note that they need to tell their teachers to sign up and create a class so that they can save progress.

Select Passage Page

View Results Page

Any instance of italics is broken. The format somehow got converted to Quotes, and we now see double quotes. This will need to be looked at before we launch.

@wlaurance if you happen to know off the top of your head exactly whats causing this that might help, otherwise hopefully ill be able to fix this once i understand the codebase a bit more

From @petergault on May 14, 2014 22:12

Rather than put our errors in parentheses, it'd be much cleaner if we could underline the errors. It'd be great if we could automatically underline every single one of the bugged words within the story. The underlined could then transform to bold once the sentence has been edited.

As part of this system, we may also want to consider having a small pop up over the bugged word that restates the word / choice. If a user delete the whole word, they don't know what they are editing.

Copied from original issue: Empirical-org-Archive/Quill-Lessons#3

My students are working on the parallel structure exercise, but are experiencing some glitches with what is deemed correct vs. incorrect. It would be great if I could see what they wrote and change the grade if I believe what they wrote is in fact parallel. (One sentence wanted a 'to' in front of each verb and another only wanted the 'to' in front of the first verb. Also one student changed all three verb forms to make it parallel, but it marked it wrong--that's a case where I might want to adjust the score.)

Hello. It turns out that there is an error on the activity Commas After Introductory Prepositional Phrases. The students receive this sentence: My Sister drove us home. Meanwhile, I studied in the back seat.

The system shouldn't have "Sister" capitalized. Just thought you should know. :)

@tomcalabrese

Check it out: http://s4.brainpop.com/games/quill/

Right now in the BrainPOP app we are using a counter for errors found. It feels a bit weird though, because editing wrong words causes the counter to go up. It implies that you found the error, when in reality you didn't.

We could call it "Words Corrected" which would better reflect that your edits are not actually the correct edits.

The problem with this system, however, is that it is no longer clear that "Words Found: 0 of 9" implies that there are 9 errors.

When you press check answer on this passage and then press go to my lesson you don’t see any data. Can you automatically search the database to see if any practice questions are missing this data? Or maybe write a test where it fails if there is no data?

https://quillgrammar.firebaseapp.com/play/sw/g/187,187,187,187,187,187,187

@kriskelly @marcellosachs Do you all have any experience is tracking/analyzing front end javascript apps?

All of my monitoring/logging knowledge pertains to backend code.

Any recommendations?

Any products we are using for core that we can leverage? New Relic perhaps? @petergault @RyanNovas

Thanks!

Let's serve our assets over Fastly.

Passage proofreading

• the instructions are long. Let’s trim the down to two sentences.
• more padding on the bottom of the page, for the tooltip. right now it looks weird when there is an error towards the bottom of the screen Should the bottom bar be locked like a footer? The white space under it looks bad, it should be all grey.
• the underlines should not extend past the text. They are too long right now

Sentence Writing

• in sentence writing spacing is weird - with the border of white.
• blow up all of the fonts, make the text box bigger, drop the image (title) branding at the top.
  concept overview is tiny.
• Getting a concept wrong should cause the concept overview to pop up.
• The grammar term still requires correct capitalization. Let’s make that check not case sensitive.

Results Page

• It’s show all of the results for commonly confused words. It should show the results for each of the concepts.

BrainPOP landing page.

• trim the text, add it to the header. Let’s try to make it so that some of the orange pokes through on the landing page.
• There is a black line showing up on the left hand side. can we remove that?

Follow up - only typing the word

• typing errors - it should force students to retry until they get it.
• We present a second mode where users only have to type the word. Peter owes a design document on how this will work.

From @petergault on December 10, 2014 6:31

Part 1: Introduction

The Quill Grammar (Quill-Lessons) app is composed of two parts:
A sentence writing component and a passage proofreading component.

CMS for content
In the CMS the teacher defines a list of explanations (rules) and a list of practice questions (rule_questions) for each explanation. Each rule is a static block of text. Each rule_question is a prompt and one or multiple answers.

The CMS also stores each passage (story). The story has text that contains errors like {+this-thsi|59} where the negative is what it shown and the positive is what it is compared to. Each number refers to a rule, and the story page contains a legend that details the names for each rule.

Sentence Writing
When the teacher creates a sentence writing activity, the teacher assigns a series of rules and a number of practice questions for each rule. For example, an app might have 2 rules, and each rule has 5 rule_questions, constituting a total of 10 questions. When each question is displayed the app compares the student input against the stored answer.

Passage Proofreading
The passage proofreading app takes the story and breaks each word into a separate text box. The "bugged" words are compared between the correct answer and the student answer. If the student answer does not match the correct answer the word is marked as wrong. For each rule a student gets wrong the site provides 3 practice questions for that rule. Students complete each of the activities.

Part 2: Expanded Details for the Quill Grammar App.

Screenshots + Links

Rule and questions: (http://grammar.quill.org/cms/rules)

Contents of a Rule: (http://grammar.quill.org/cms/rules/11/edit)

Passage Proofreading Activity: (http://www.quill.org/activities/7?anonymous=true)

CMS for Passage Proofreading Activity: (http://www.quill.org/cms/activity_type/story/activities/79/data)

Sentence Writing Activity: (http://www.quill.org/activities/141?anonymous=true)

CMS for Rule Order in Sentence Writing Activity:(http://www.quill.org/cms/activity_type/practice_question_set/activities/133/data)

Terminology Review

App_name: Quill Grammar

App_Activity_Name: The name of the activity

App_Activity_Instance_Id (activity session): The particular activity session of the user. We generate the App_Activity_Instance_Id when the teacher assigns the activity to the student.

Explanation (Rule): Each grammar concept has an explanation and a series of grammar_question associated with the concept.

Practice Question (Rule_Question): Each question for the rule.

Category: A grouping for the rules to make it easier to search through them.

Part 3: Generating a Session

When a teacher assigns an activity to a student it generates an activity session for the student. It is flagged as unstated until the student starts it. See the student story for a complete look at how the data is passed through the system.

Part 4: Disconnect Typing from Sentence Writing

One of the goals is to disconnect the typing from the writing. This means changing the logic for the CMS so that the grammatical term for the sentence writing is placed within a special bracket, and we compare the grammatical term separately from the rest of the sentence. This way if the student gets the answer wrong the answer is still marked correctly. You can see the details here:

Empirical-org-Archive/Quill-Lessons#10

Part 5: Editing Mode

With the editing mode we automatically input the prompt into the answer box. The student edits the prompt rather than re-write it. This helps weak typers. The issue:

Empirical-org-Archive/Quill-Lessons#11

Part 6: Settings page for users.

[This section needs wireframes].

• Teachers set settings
• How settings pass over
• How teachers edit the activities settings.
• Editing the text mode vs. typing it out.
• Editing the hints mode in the stories.
  Empirical-org-Archive/Quill-Lessons#12

Copied from original issue: Empirical-org-Archive/Quill-Lessons#22

I implemented more than necessary for the sentence writing activity. I didn't realize the lms provides the name, description, flag, and topic.

This means we can remove this UI from the form url section of sentence writing. The form for passage proofreading hasn't been created yet, so we will implement this once we nail down the flow for sentence writing.

http://stackoverflow.com/questions/2594389/hide-html-horizontal-but-not-vertical-scrollbar

I was not able to create a build of the app on my local machine, as I was getting the following error when running gulp --envs=prod :

[13:33:23] Using gulpfile ~/Quill-Grammar/gulpfile.js
[13:33:23] Starting 'default'...
[13:33:23] Starting 'clean'...
[13:33:23] Finished 'default' after 7.7 ms
[13:33:23] Finished 'clean' after 24 ms
[13:33:23] Starting 'assets'...
[13:33:23] Starting 'config'...
[13:33:23] Starting 'lint'...
[13:33:23] Starting 'styles'...
[13:33:23] Starting 'templates'...

events.js:85
     throw er; // Unhandled 'error' event
           ^
Error: spawn /Users/marcellomarcellosachs/code/Quill-Grammar/node_modules/empirical-angular-gulp-tasks/node_modules/gulp-imagemin/node_modules/imagemin/node_modules/imagemin-optipng/node_modules/optipng-bin/vendor/optipng ENOENT
   at exports._errnoException (util.js:746:11)
   at Process.ChildProcess._handle.onexit (child_process.js:1053:32)
   at child_process.js:1144:20
   at process._tickCallback (node.js:355:11) 

The content is integrating a Quill App with the LMS.

This is high level, and should reflect both directions of data flow.

This issue can be used to tag relevant code diffs.

Commas and Quotation Marks in Dialogue
3rd Grade CCSS
Comma Usage

To, Too, Two
4th Grade CCSS
Commonly Confused Words

Beginner: Whom, Why
4th Grade CCSS
Nouns & Pronouns

Which, That
4th Grade CCSS
Nouns & Pronouns

Lose, Loose
4th Grade CCSS
Commonly Confused Words

Their, They're, There
4th Grade CCSS
Commonly Confused Words

You're, Your
4th Grade CCSS
Commonly Confused Words

Than, Then
4th Grade CCSS
Commonly Confused Words

Whose, Whom, Who
4th Grade CCSS
Nouns & Pronouns

Colons and Commas in a List
5th Grade CCSS
Comma Usage

Not Only, But Also; Both, And
5th Grade CCSS
Conjunctions

Either, Or; Neither, Nor
5th Grade CCSS
Conjunctions

However, Still
5th Grade CCSS
Comma Usage

Commas for "yes" and "no," tag questions, and addressing people.
5th Grade CCSS
Comma Usage

Commas After Introductory Prepositional Phrases
5th Grade CCSS
Comma Usage

Intensive Pronouns
6th Grade CCSS
Nouns & Pronouns

Recognizing Inappropriate Shifts in Pronoun Number or Gender
6th Grade CCSS
Nouns & Pronouns

Subjective, Objective, and Possessive Pronouns
6th Grade CCSS
Nouns & Pronouns

Misplaced Modifiers
7th Grade CCSS
Structure

Recognize and Correct Inappropriate Shifts in Verb Voice and Mood
8th Grade CCSS
Verbs

Change into Proper Passive or Active Sentences
8th Grade CCSS
Verbs

Use this to not trigger the limit function.

Since we are keeping track of rule numbers, it will be easy to make this the id number used to identify the object in the rules list.

Right now, the current look up function will work, because the id is equal to the rule number. Once more rules are added to the system, this will not be the case and things will break.

We should add some analytic events into the launch.

I'm recommending we setup a new mixpanel project?

What do you think @RyanNovas @petergault @kriskelly @marcellosachs ?

From @petergault on November 18, 2014 22:35

Introduction

In speaking with teachers we often hear that students are upset because they mistyped a sentence and were penalized for mistyping. We can help them out by not penalizing them for mistyping the sentence.

To make this work, we need to disconnect the grammatical concept from the rest of the sentence. At the moment when a student writes a sentence the system compares the correct answer to the student's answer. This works well, but it can't distinguish any particular parts of the sentence. To make this work we would have to flag the grammatical concept.

Automatically Flagging Sentences

We have over 1300 sentences in our database. Rather than manually tagging each sentence, we can mostly likely automatically tag the majority of the content. Here is how this would work.

Here is how it would work:

Exceptions

There are certain sentences that don't follow this format. We will go through all of our sets of questions and flag the ones that aren't appropriate. There may be other ways of handling them.

Ryan has compiled a guide for handling the 3 most common exceptions:
https://docs.google.com/a/quill.org/document/d/1zmh_m4Rx6xptrQ318w_mtokJF7LFPuRUoaVyfsrcMbQ/edit

New Alert: Typing Error

When a student does not get a grammatical concept right we will introduce a new piece of feedback called a typing error. It will look like this:

When a user makes a typing error we can either:

1. Have the student retry the sentence but still receive the full score.
2. Move on to the next score.

Concept Reporting

At the end of an activity, we will report the number of concepts and which ones the student's got right and wrong. These concept reports will become the basis for our premium school reports, by showing how many concepts students are learning and which concepts they are struggling with. The concept tags are being brought up here because we need to think about how each word or question will be tagged to a concept, as well as how the general errors will be tagged.

[Wireframe of Student Final Page]
Teachers see this page:

Next goal: Wireframe of weekly reports for admins and teachers.

Settings Page

As part of this update, teachers will now be able to control global variables for settings. This page needs a wireframe.

[Insert Wireframe Here].

Copied from original issue: Empirical-org-Archive/Quill-Lessons#10

For @RyanNovas

Remove errors 1 & 3 on this list, fix 2 .
#1

“As they traveled below the country”

This is a weird error because there are many ways you can correct (many different prepositions fit here, such as across). We should strike this because we don’t support the variety.
#2

the line “pacific ocean’s coast in present-day Oregon.”
The error is supposed to be On, the correct word is In. It is showing In as the error.
#3

The should / must error is ambiguous in “Both Lewis and Clark thought that must / should return to St. Louis”. I’d remove this.

• For the student’s sentence we should highlight in bold whatever the student did that did not match the characters of the written sentence.
• Furthermore, we should also highlight in bold, in the sentence displayed below, what the actual error was that the student should know. Since we know the word we should be able to just display it in bold.

Upload the two stories besides Lewis & Clark

https://docs.google.com/a/quill.org/document/d/1HYeDf2JqmtEabOWiWMjdU8GRC-yrjM8W3Y8gkHeB8wA/edit

We need to change the copy for the landing page image for BrainPOP.

• Change the copy of the bottom line to: Use SnapThought(TM) to share your results. (The TM should be the tiny trademark symbol.)
• Email the new image to Katya@brainpop.

• Reverse the first 4 tooltips. This will make sure they fit inside of the page.
• Scroll the page to each tool tip when the tooltip is shown.

This looks like a well supported auto complete module https://github.com/JustGoscha/allmighty-autocomplete that doesn't add in any extra big dependencies.

• When a student presses check answer they must have made the number of corrections equal
  equal to the number of errors in the story minus 3. If they don't they get a message that says keep going.
• They are told to retry 2 times before they get the final answer. It will tell them on the second try how many they are missing.
• The teacher can see how many check answers or retry attempts the student used.
• Refreshing the page should not solve the cache.

The problem right now is that students will press check answer, see all of the correct answers, and then refresh the page and edit it to mark all of the answers correct.

/play/pf/6

Because the minus text is all '____', the code to return the proper passage question is incorrect.

We should add another token syntax to inject the index of the passage question into the temporary minus text for the id.

Bug # 1
In the princess and the turtle story, there are no parentheses in the text encapsulating the errors, and yet the directions still state that the students should remember to delete them before pressing submit.

Note: Since we are electing to pivot towards the type 1 word model, rather than the whole sentence model, having an auto select feature that would select the whole word when its clicked on, including the parentheses errors, so that its 1 click to select the error, then type the correct word, then click to blank space to finish the change.

There is also a possibility that we would want to put in a "revert to native text" function on the stories, so that in case students are working on a passage and they get over their heads, they can press the revert button to set the whole passage back to its starting text without any of their additions.

BUG # 2
When I finished the story, it gave an incorrect text saying I found 5 of 1 errors, it always incorrectly lists amount of errors found.

NOTE: I find pages that the dialog box moves around on to be somewhat disctracting, so an idea would be to make the error box on the app stay stationary, while the page moves around it so the student doesn't have to move the mouse to click the next button again, not an urgent change.

BUG # 3
The grammatical concepts listed on the errors on the errors found all say Grammar Concept TODO

NOTE: I think that the "check work" button should disappear after you click it once and it takes you through the errors. Having it there at the bottom, once the student is reviewing their work on the story, can only confuse the student. Once the review phase of the story has started, the button need to disappear or be renamed.

BUG # 4
Custom results page does not load at all, just gives the text "Custom Results Page"

NOTE: there might be a button that takes you back to back to the home page at BrainPop showing the Quill landing page, but if the results page does not load, then there is no way to get back.

NOTE # 2: Quill does not show up if the word is searched on the brainpop search bar right above our page. We need to get that fixed asap, really urgent.

BUG # 5
The correct answer to sentence questions after the paragrpaph has been completed do not appear.
It reads instead, "Incorrect Answer: correct answer here"

BUG # 6
Some of the spacing of errors is incorrect, where there are too many spaces before the slash (choice 1 / choice 2) is correct, but we have an extra space before the (near / on) error, as well as some other errors, in the Apollo 8 story.

Overview of them here: https://docs.google.com/document/d/1uOUkVHiaYiJswCThcxnIvvqcw4wX4MZ2agMVE3eHjZs/edit?usp=sharing

Pressing the reset button will delete all of your results.

You may create an account at Quill.org to permanently save your results.

[Reset]

Mockup:

There should be a checkbox in the CMS for the story that states:
[ ] Underline Errors in Passages
The code term here should be “UnderlineErrorsInProofreader”

The idea is that when this box is checked, all of the text that is in curley braces has an underline beneath it. When it is not checked, there is no underline.

With this system in place we can delete the parentheses, and use a much cleaner interface. This setting will be local to individual students for now.

Script and load a single cleaned up version of Maggie's passage.

This was from a previous post. It may no longer be valid and we can close it:

Need to add logic in the cms to not break with a rule with no rule questions

From @petergault on November 19, 2014 3:13

One of the crucial pieces of feedback we've received from teachers is that teachers want to have a mode where students edit the text but do not retype the sentence. This is primarily for younger students who struggle with typing, and thus cannot finish their activities on time.

In this mode the prompt box for the students will be made interactive. Students can copy the text, re-write it, etc. Once a student presses check answer, it will compare the text in that field against the correct answer text.

As a follow up feature, it'd be great if students could refresh the box in case they've screwed it up and would like to see the generic prompt text again.

[Missing Wireframes: How teachers can set the app to Sentence Editing Mode]
[The refresh button for rewriting the text].

Copied from original issue: Empirical-org-Archive/Quill-Lessons#11