From 0a5b1d68faf463026b36a9820f6ed59ec0ae3667 Mon Sep 17 00:00:00 2001
From: Yifan Wang <yifan.wang0422@gmail.com>
Date: Fri, 23 Apr 2021 16:57:32 -0400
Subject: [PATCH 01/27] set up and edited textToSpeech page

---
 backend/app/analysis/text_parser.py         |  74 +++++
 backend/app/views.py                        |  17 +-
 backend/config/urls.py                      |   2 +
 frontend/src/index/index.js                 |   1 +
 frontend/src/textToSpeech/textToSpeech.js   | 299 ++++++++++++++++++++
 frontend/src/textToSpeech/textToSpeech.scss |   1 +
 6 files changed, 393 insertions(+), 1 deletion(-)
 create mode 100644 backend/app/analysis/text_parser.py
 create mode 100644 frontend/src/textToSpeech/textToSpeech.js
 create mode 100644 frontend/src/textToSpeech/textToSpeech.scss

diff --git a/backend/app/analysis/text_parser.py b/backend/app/analysis/text_parser.py
new file mode 100644
index 0000000..55530f2
--- /dev/null
+++ b/backend/app/analysis/text_parser.py
@@ -0,0 +1,74 @@
+"""
+Custom command to populate text model with definition, examples, and images
+"""
+import re
+import urllib
+import urllib.request
+import urllib.parse
+import tqdm
+
+# Ours
+
+
+# Modified Code from Bing library
+def get_sentences(text_obj):
+    """
+    Given a Text object, stores the definitions, examples, and image urls for all the words
+    in this text.
+    :param text_obj: the Text object that we want to get sentences from
+    """
+
+    text_paragraph = text_obj.content
+    temp_sentences = text_paragraph.split(".")
+
+    sentences = []
+    for sent in temp_sentences:
+        sentences.extend(sent.split("!"))
+
+    return sentences
+
+
+
+
+
+
+
+
+
+
+    # part_of_speech = ['noun', 'verb', 'adjective', 'adverb']
+    #
+    # # Reused the old image url dictionary if we are not getting all of the urls
+    # word_urls = {}
+    # word_definitions = {}
+    # word_examples = {}
+
+    # for pos in part_of_speech:
+    #     print("Getting definitions and examples for " + pos + " in the text " +
+    #           text_obj.title + "... (This might take a while)")
+    #     words = get_valid_words(text_obj.content.lower(), pos)
+    #     definitions = get_word_definition(words, pos)
+    #     examples = get_word_examples(words, pos, text_obj.content.lower())
+    #
+    #     print("Updating database for " + pos + " in the text " + text_obj.title)
+    #     for word in tqdm.tqdm(words):
+    #         word = word.lower()
+    #         if word not in word_urls:
+    #             image_url = get_bing_image_url(word)
+    #             if image_url is not None:
+    #                 word_urls[word.lower()] = image_url
+    #
+    #         if word not in word_definitions:
+    #             word_definitions[word] = {pos: definitions[word]}
+    #         else:
+    #             word_definitions[word][pos] = definitions[word]
+    #
+    #         if word not in word_examples:
+    #             word_examples[word] = {pos: examples[word]}
+    #         else:
+    #             word_examples[word][pos] = examples[word]
+    #
+    # text_obj.images = word_urls
+    # text_obj.definitions = word_definitions
+    # text_obj.examples = word_examples
+    # text_obj.save()
diff --git a/backend/app/views.py b/backend/app/views.py
index 74ae6fa..105bbf8 100644
--- a/backend/app/views.py
+++ b/backend/app/views.py
@@ -27,7 +27,13 @@
 from .analysis.crosswords import (
     get_crosswords,
 )
-from .quiz_creation.conjugation_quiz import get_quiz_sentences
+from .quiz_creation.conjugation_quiz import (
+    get_quiz_sentences,
+)
+from .analysis.text_parser import (
+    get_sentences,
+)
+
 
 
 @api_view(['GET'])
@@ -188,3 +194,12 @@ def get_quiz_data(request, text_id):
     text_obj = Text.objects.get(id=text_id)
     res = get_quiz_sentences(text_obj.content)
     return Response(res)
+
+@api_view(['GET'])
+def get_indiv_sentences(request, text_id):
+    """
+    API endpoint for getting the individual sentences from the given text.
+    """
+    text_obj = Text.objects.get(id=text_id)
+    sentences = get_sentences(text_obj)
+    return Response(sentences)
diff --git a/backend/config/urls.py b/backend/config/urls.py
index f7cb10b..cddbbf3 100644
--- a/backend/config/urls.py
+++ b/backend/config/urls.py
@@ -56,6 +56,7 @@ def react_view_path(route, component_name):
     path('api/get_crossword/<int:text_id>/<str:part_of_speech>', get_crossword),
     path('api/get_quiz_data/<int:text_id>/', get_quiz_data),
     path('api/text/<int:text_id>', text),
+    path('api/get_indiv_sentences/<int:text_id>', get_indiv_sentences),
 
     # View paths
     react_view_path('', 'IndexView'),
@@ -67,4 +68,5 @@ def react_view_path(route, component_name):
     react_view_path('flashcard/<int:textID>/<str:partOfSpeech>', 'FlashcardView'),
     react_view_path('quiz/', 'AllQuizView'),
     react_view_path('quiz/<int:textId>/', 'QuizView'),
+    react_view_path('textToSpeech/<int:textID>', 'TextToSpeech')
 ]
diff --git a/frontend/src/index/index.js b/frontend/src/index/index.js
index 24cd826..57f17f1 100644
--- a/frontend/src/index/index.js
+++ b/frontend/src/index/index.js
@@ -12,6 +12,7 @@ const QUIZ_TYPES = {
     'Flashcards': posLink,
     'Quiz': idLink,
     'Crossword': posLink,
+    'TextToSpeech': idLink
 };
 
 class TextInfo extends React.Component {
diff --git a/frontend/src/textToSpeech/textToSpeech.js b/frontend/src/textToSpeech/textToSpeech.js
new file mode 100644
index 0000000..049ada3
--- /dev/null
+++ b/frontend/src/textToSpeech/textToSpeech.js
@@ -0,0 +1,299 @@
+import React, { Component } from 'react';
+import * as PropTypes from 'prop-types';
+
+import { Footer, Navbar, LoadingPage } from '../UILibrary/components';
+
+const capitalize = (word) => {
+    return word.charAt(0).toUpperCase() + word.slice(1);
+};
+
+const play_button = (color) => {
+    return (
+        <svg
+            xmlns = "http://www.w3.org/2000/svg"
+            viewBox = "0 0 26 26"
+            fill = {color}
+            className = "bi bi-play-button"
+            viewBox = "0 0 16 16"
+        >
+            <polygon
+                class="play-btn__svg"
+                points="9.33 6.69 9.33 19.39 19.3 13.04 9.33 6.69"
+            />
+            <path
+                d="M26,13A13,13,0,1,1,13,0,13,13,0,0,1,26,13ZM13,2.18A10.89,10.89,0,1,0,23.84,13.06,10.89,10.89,0,0,0,13,2.18Z"
+            />
+        </svg>
+    );
+};
+
+export class TextToSpeech extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            textData: null,
+            sentenceIndex: 0,
+            showModal: false,
+            nextSentence: false,
+        };
+        this.modalHandler = this.modalHandler.bind(this);
+    }
+
+    componentDidMount = async () => {
+        const apiURL = `/api/get_indiv_sentences/${this.props.textID}`;
+        const response = await fetch(apiURL);
+        const textData = await response.json();
+        this.setState({ textData });
+        document.addEventListener('keydown', this.handleKeyDown, true);
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener('keydown', this.handleKeyDown, false);
+    }
+
+    getCurrentSentence = () => {
+        const {
+            sentenceIndex,
+            textData,
+        } = this.state;
+        return textData[sentenceIndex];
+    }
+
+    changeSentence = (delta) => {
+        const { textData, sentenceIndex } = this.state;
+        const listLength =  textData.length;
+        const newsentenceIndex = (sentenceIndex + delta + listLength) % listLength;
+        this.setState({
+            sentenceIndex: newsentenceIndex,
+            showNext: true,
+        });
+    }
+
+    playAudio = () => {
+        let utterance = new SpeechSynthesisUtterance();
+        utterance.text = textData[sentenceIndex];
+        utterance.lang = 'en-US';
+        utterance.rate = 1.2;
+        speechSynthesis.speak(utterance);
+    }
+
+    toggleStar = () => {
+        const { starredCards, starOnly, cardIndex } = this.state;
+        let currentIndex = starOnly ? starredCards[cardIndex] : cardIndex;
+        if (this.isStarred(currentIndex)) {
+            starredCards.splice(starredCards.indexOf(currentIndex), 1);
+            if (starOnly) {
+                if (starredCards.length > 0) {
+                    currentIndex %= starredCards.length;
+                } else {
+                    currentIndex = 0;
+                }
+            }
+        } else {
+            starredCards.push(this.state.cardIndex);
+        }
+        this.setState({ starredCards, cardIndex: currentIndex });
+    }
+
+    handleKeyDown = (e) => {
+        if (['ArrowLeft', 'ArrowRight'].includes(e.code)) {
+            e.preventDefault();
+            const { code } = e;
+            if (code === 'ArrowLeft') {
+                this.changeSentence(-1);
+            } else if (code === 'ArrowRight') {
+                this.changeSentence(1);
+            }
+        }
+    }
+
+    modalHandler = (event) => {
+        event.preventDefault();
+        this.setState({
+            showModal: !this.state.showModal,
+        });
+    }
+
+    checkProgress = () => {
+        const numSentences = this.state.textData.length;
+        const currentSentence = this.state.sentenceIndex + 1;
+        if (numSentences !== 0) {
+            return parseInt((currentSentence / numSentences) * 100);
+        }
+        return 0;
+    }
+
+    render() {
+        const {
+            textData,
+            showNext,
+            sentenceIndex,
+        } = this.state;
+
+        if (!textData) {
+            return (<LoadingPage text='Loading Sentences...'/>);
+        }
+
+        /* Generate Text On Top of Progress Bar */
+        const sentenceLength = textData.length;
+        const progressText = sentenceLength === 0
+            ? 'No Sentences Available'
+            : `${sentenceIndex + 1}/${sentenceLength} Words`;
+
+        /* Generate Flashcard */
+        const card = this.getcurrentSentence();
+        const flipcard =  <div className="flashcard-star-back"
+                               onClick={this.playAudio}>
+                               {play_button('yellow')}
+                          </div>
+
+        // <div className="flashcard-error">You do not have any starred cards</div>;
+        // const flipcard = card
+        //     ? (
+        //         <div className="flashcard-div row">
+        //             <div
+        //                 className="flashcard-arrows col-1 text-right"
+        //                 onClick={() => this.changeCard(-1)}
+        //             >
+        //                 &#60;
+        //             </div>
+        //             <div className={`flip-card col ${showBack ? 'showBack' : ''}
+        //                 ${showNext ? 'showNext' : ''}`}>
+        //                 <div
+        //                     className="flip-card-inner">
+        //                     <div className="flip-card-front">
+        //                         <div className="row">
+        //                             <div className="col-1" onClick={this.flipCard}>
+        //                             </div>
+        //                             <div className="col text-center-front" onClick={this.flipCard}>
+        //                                 <img className="flashcard-image"
+        //                                     src={card.url} alt={card.word.toUpperCase()}/>
+        //                             </div>
+        //                             <div className="col-1 mx-2">
+        //                                 <div className="flashcard-star-front"
+        //                                     onClick={this.toggleStar}>
+        //                                     {this.isStarred(starOnly
+        //                                         ? starredCards[sentenceIndex] : sentenceIndex)
+        //                                         ? filledStar('yellow')
+        //                                         : star('white')
+        //                                     }
+        //                                 </div>
+        //                                 <div className="flashcard-star-buffer"
+        //                                     onClick={this.flipCard}>
+        //                                 </div>
+        //                             </div>
+        //                         </div>
+        //                         <h3 className="click-to-flip" onClick={this.flipCard}>
+        //                             Click to flip
+        //                         </h3>
+        //
+        //                     </div>
+        //
+        //                     <div className="flip-card-back">
+        //                         <div className="row">
+        //                             <div className="col-1" onClick={this.flipCard}>
+        //                             </div>
+        //                             <div className="col text-center" onClick={this.flipCard}>
+        //                                 <h1 className='flashcard-word'>
+        //                                     {card.word.toUpperCase()}
+        //                                 </h1>
+        //                                 <h2 className="flashcard-info">
+        //                                     <b><u>Definition:</u></b> {card.definition[0]}
+        //                                 </h2>
+        //                                 <h2 className="flashcard-info">
+        //                                     <b><u>Example:</u></b> <i>"{card.example[0]}"</i>
+        //                                 </h2>
+        //                             </div>
+        //                             <div className="col-1 mx-2">
+        //                                 <div className="flashcard-star-back"
+        //                                     onClick={this.toggleStar}>
+        //                                     {this.isStarred(starOnly
+        //                                         ? starredCards[sentenceIndex] : sentenceIndex)
+        //                                         ? filledStar('yellow')
+        //                                         : star('white')
+        //                                     }
+        //                                 </div>
+        //                                 <div className="flashcard-star-buffer"
+        //                                     onClick={this.flipCard}>
+        //                                 </div>
+        //                             </div>
+        //                         </div>
+        //                         <h3 className="click-to-flip" onClick={this.flipCard}>
+        //                             Click to flip
+        //                         </h3>
+        //                     </div>
+        //                 </div>
+        //             </div>
+        //             <div className="flashcard-arrows col-1" onClick={() => this.changeCard(1)}>
+        //                 &#62;
+        //             </div>
+        //         </div>)
+        //     : <div className="flashcard-error">You do not have any starred cards</div>;
+
+        /* Actual Return statement */
+        return (
+            <>
+                <Navbar/>
+                <div className='page' onKeyDown={this.handleKeyDown}>
+                    <div className='row'>
+                        <div className='col-xl-8 col-md-6 col-12 text-center text-md-left'>
+                            <h1 className='flashcard-title'>Sentence</h1>
+                            <button
+                                className="btn btn-outline-light btn-circle flashcard-instruction"
+                                onClick={this.modalHandler}>
+                                <b>?</b>
+                            </button>
+                        </div>
+                        <div>
+                            {
+                                this.state.showModal
+                                    ? <div className="backdrop" onClick={this.modalHandler}>
+                                    </div>
+                                    : null
+                            }
+                            <div className="Modal modal-content" style={{
+                                transform: this.state.showModal
+                                    ? 'translateY(0)' : 'translateY(-100vh)',
+                                opacity: this.state.showModal ? 1 : 0,
+                            }}>
+                                <div className="modal-header">
+                                    <h5 className="modal-title">Instructions</h5>
+                                    <button type="button" className="close"
+                                        onClick={this.modalHandler}>
+                                        <span>&times;</span>
+                                    </button>
+                                </div>
+                                <div className="modal-body">
+                                    <p></p>
+                                </div>
+                                <div className="modal-footer">
+                                    <button type="button" className="btn btn-secondary"
+                                        onClick={this.modalHandler}>Close</button>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className='col-xl-4 col-md-6 col-12'>
+                            <div className='progress-text'>
+                                {progressText}
+                            </div>
+                            <div className='progress'>
+                                <div className="progress-bar progress-bar-striped bg-success"
+                                    role="progressbar"
+                                    style={{ 'width': `${this.checkProgress()}%` }}
+                                    aria-valuenow={this.checkProgress()} aria-valuemin="0"
+                                    aria-valuemax="100"
+                                />
+                            </div>
+                        </div>
+                    </div>
+                    {flipcard}
+                </div>
+                <Footer/>
+            </>
+        );
+    }
+}
+TextToSpeech.propTypes = {
+    textID: PropTypes.number
+};
diff --git a/frontend/src/textToSpeech/textToSpeech.scss b/frontend/src/textToSpeech/textToSpeech.scss
new file mode 100644
index 0000000..6a7cab9
--- /dev/null
+++ b/frontend/src/textToSpeech/textToSpeech.scss
@@ -0,0 +1 @@
+/* Styles for the text to speech page */

From b27dca51b93bc69a8520a2cd7c16d0d9c6799170 Mon Sep 17 00:00:00 2001
From: taokinbo <70776613+taokinbo@users.noreply.github.com>
Date: Fri, 30 Apr 2021 15:24:44 -0400
Subject: [PATCH 02/27] Fixed a few errors

---
 backend/config/urls.py                    |  1 +
 frontend/src/textToSpeech/textToSpeech.js | 45 ++++++++++++-----------
 2 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/backend/config/urls.py b/backend/config/urls.py
index cddbbf3..88bea14 100644
--- a/backend/config/urls.py
+++ b/backend/config/urls.py
@@ -27,6 +27,7 @@
     get_crossword,
     get_quiz_data,
     text,
+    get_indiv_sentences
 )
 
 
diff --git a/frontend/src/textToSpeech/textToSpeech.js b/frontend/src/textToSpeech/textToSpeech.js
index 049ada3..f526c05 100644
--- a/frontend/src/textToSpeech/textToSpeech.js
+++ b/frontend/src/textToSpeech/textToSpeech.js
@@ -7,6 +7,8 @@ const capitalize = (word) => {
     return word.charAt(0).toUpperCase() + word.slice(1);
 };
 
+const synth = window.speechSynthesis;
+
 const play_button = (color) => {
     return (
         <svg
@@ -77,23 +79,23 @@ export class TextToSpeech extends Component {
         speechSynthesis.speak(utterance);
     }
 
-    toggleStar = () => {
-        const { starredCards, starOnly, cardIndex } = this.state;
-        let currentIndex = starOnly ? starredCards[cardIndex] : cardIndex;
-        if (this.isStarred(currentIndex)) {
-            starredCards.splice(starredCards.indexOf(currentIndex), 1);
-            if (starOnly) {
-                if (starredCards.length > 0) {
-                    currentIndex %= starredCards.length;
-                } else {
-                    currentIndex = 0;
-                }
-            }
-        } else {
-            starredCards.push(this.state.cardIndex);
-        }
-        this.setState({ starredCards, cardIndex: currentIndex });
-    }
+    // toggleStar = () => {
+    //     const { starredCards, starOnly, cardIndex } = this.state;
+    //     let currentIndex = starOnly ? starredCards[cardIndex] : cardIndex;
+    //     if (this.isStarred(currentIndex)) {
+    //         starredCards.splice(starredCards.indexOf(currentIndex), 1);
+    //         if (starOnly) {
+    //             if (starredCards.length > 0) {
+    //                 currentIndex %= starredCards.length;
+    //             } else {
+    //                 currentIndex = 0;
+    //             }
+    //         }
+    //     } else {
+    //         starredCards.push(this.state.cardIndex);
+    //     }
+    //     this.setState({ starredCards, cardIndex: currentIndex });
+    // }
 
     handleKeyDown = (e) => {
         if (['ArrowLeft', 'ArrowRight'].includes(e.code)) {
@@ -142,10 +144,11 @@ export class TextToSpeech extends Component {
 
         /* Generate Flashcard */
         const card = this.getcurrentSentence();
-        const flipcard =  <div className="flashcard-star-back"
-                               onClick={this.playAudio}>
-                               {play_button('yellow')}
-                          </div>
+        // const flipcard =  <div className="flashcard-star-back"
+        //                        onClick={this.playAudio}>
+        //                        {play_button('yellow')}
+        //                   </div>
+        const flipcard = <div> Hello </div>
 
         // <div className="flashcard-error">You do not have any starred cards</div>;
         // const flipcard = card

From 4f4fe66b4a25d73d22ed1460e0717102b69b1bbd Mon Sep 17 00:00:00 2001
From: taokinbo <70776613+taokinbo@users.noreply.github.com>
Date: Fri, 30 Apr 2021 16:16:10 -0400
Subject: [PATCH 03/27] testing something

---
 backend/app/analysis/text_parser.py       | 22 ++++++++++------------
 backend/app/views.py                      |  8 ++++++--
 backend/config/urls.py                    |  2 +-
 frontend/src/textToSpeech/textToSpeech.js | 15 ++++++++++-----
 4 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/backend/app/analysis/text_parser.py b/backend/app/analysis/text_parser.py
index 55530f2..331e613 100644
--- a/backend/app/analysis/text_parser.py
+++ b/backend/app/analysis/text_parser.py
@@ -1,30 +1,28 @@
 """
 Custom command to populate text model with definition, examples, and images
 """
-import re
-import urllib
-import urllib.request
-import urllib.parse
-import tqdm
+import nltk
 
 # Ours
 
 
 # Modified Code from Bing library
-def get_sentences(text_obj):
+def get_sentences(text):
     """
     Given a Text object, stores the definitions, examples, and image urls for all the words
     in this text.
     :param text_obj: the Text object that we want to get sentences from
     """
 
-    text_paragraph = text_obj.content
-    temp_sentences = text_paragraph.split(".")
-
-    sentences = []
-    for sent in temp_sentences:
-        sentences.extend(sent.split("!"))
+    sentences = nltk.tokenize.sent_tokenize(text)
+    # text_paragraph = text_obj.content
+    # temp_sentences = text_paragraph.split(".")
+    #
+    # sentences = []
+    # for sent in temp_sentences:
+    #     sentences.extend(sent.split("!"))
 
+    print(sentences)
     return sentences
 
 
diff --git a/backend/app/views.py b/backend/app/views.py
index 105bbf8..003d231 100644
--- a/backend/app/views.py
+++ b/backend/app/views.py
@@ -200,6 +200,10 @@ def get_indiv_sentences(request, text_id):
     """
     API endpoint for getting the individual sentences from the given text.
     """
+    print("is this even running")
     text_obj = Text.objects.get(id=text_id)
-    sentences = get_sentences(text_obj)
-    return Response(sentences)
+    sentences = get_sentences(text_obj.content)
+    # return Response(sentences)
+    res = [{'sentence': sentence} for sentence in sentences]
+    print(sentences)
+    return Response(res)
diff --git a/backend/config/urls.py b/backend/config/urls.py
index 88bea14..9bdf729 100644
--- a/backend/config/urls.py
+++ b/backend/config/urls.py
@@ -27,7 +27,7 @@
     get_crossword,
     get_quiz_data,
     text,
-    get_indiv_sentences
+    get_indiv_sentences,
 )
 
 
diff --git a/frontend/src/textToSpeech/textToSpeech.js b/frontend/src/textToSpeech/textToSpeech.js
index f526c05..a0347de 100644
--- a/frontend/src/textToSpeech/textToSpeech.js
+++ b/frontend/src/textToSpeech/textToSpeech.js
@@ -42,11 +42,16 @@ export class TextToSpeech extends Component {
     }
 
     componentDidMount = async () => {
-        const apiURL = `/api/get_indiv_sentences/${this.props.textID}`;
-        const response = await fetch(apiURL);
-        const textData = await response.json();
-        this.setState({ textData });
-        document.addEventListener('keydown', this.handleKeyDown, true);
+        try {
+            const apiURL = `/api/get_indiv_sentences/${this.props.textID}`;
+            const response = await fetch(apiURL);
+            const textData = await response.json();
+            console.log(textData)
+            // this.setState({ textData });
+            // document.addEventListener('keydown', this.handleKeyDown, true);
+        } catch (e) {
+            console.log(e)
+        }
     }
 
     componentWillUnmount() {

From 122b141d78fc2a323803ab6b9047d66720e39527 Mon Sep 17 00:00:00 2001
From: taokinbo <70776613+taokinbo@users.noreply.github.com>
Date: Fri, 30 Apr 2021 16:32:53 -0400
Subject: [PATCH 04/27] properlly connected backend to front end

---
 backend/app/analysis/text_parser.py       |  2 +-
 frontend/src/UILibrary/styles.scss        |  1 +
 frontend/src/app.js                       |  2 ++
 frontend/src/textToSpeech/textToSpeech.js | 18 +++++++++---------
 4 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/backend/app/analysis/text_parser.py b/backend/app/analysis/text_parser.py
index 331e613..bfabcfc 100644
--- a/backend/app/analysis/text_parser.py
+++ b/backend/app/analysis/text_parser.py
@@ -11,7 +11,7 @@ def get_sentences(text):
     """
     Given a Text object, stores the definitions, examples, and image urls for all the words
     in this text.
-    :param text_obj: the Text object that we want to get sentences from
+    :param text: the Text object that we want to get sentences from
     """
 
     sentences = nltk.tokenize.sent_tokenize(text)
diff --git a/frontend/src/UILibrary/styles.scss b/frontend/src/UILibrary/styles.scss
index 96bb13f..8e9cae9 100644
--- a/frontend/src/UILibrary/styles.scss
+++ b/frontend/src/UILibrary/styles.scss
@@ -7,6 +7,7 @@
 @import '../crosswordView/crosswordView';
 @import '../instructorView/instructorView';
 @import '../flashcard/flashcardView';
+@import '../textToSpeech/textToSpeech';
 
 html {
     position: relative;
diff --git a/frontend/src/app.js b/frontend/src/app.js
index ae89ace..4737a4e 100644
--- a/frontend/src/app.js
+++ b/frontend/src/app.js
@@ -14,6 +14,7 @@ import { InstructorView } from './instructorView/instructorView';
 import { AllQuizView } from './quizView/allQuizView';
 import { FlashcardView } from './flashcard/flashcardView';
 import { CrosswordView } from './crosswordView/crosswordView';
+import {TextToSpeech} from './textToSpeech/textToSpeech';
 
 // Import all styles
 import './UILibrary/styles.scss';
@@ -30,4 +31,5 @@ window.app_modules = {
     CrosswordView,
     IndexView,
     QuizView,
+    TextToSpeech,
 };
diff --git a/frontend/src/textToSpeech/textToSpeech.js b/frontend/src/textToSpeech/textToSpeech.js
index a0347de..98d71f8 100644
--- a/frontend/src/textToSpeech/textToSpeech.js
+++ b/frontend/src/textToSpeech/textToSpeech.js
@@ -9,17 +9,16 @@ const capitalize = (word) => {
 
 const synth = window.speechSynthesis;
 
-const play_button = (color) => {
+const playButton = (color) => {
     return (
         <svg
             xmlns = "http://www.w3.org/2000/svg"
             viewBox = "0 0 26 26"
             fill = {color}
             className = "bi bi-play-button"
-            viewBox = "0 0 16 16"
         >
             <polygon
-                class="play-btn__svg"
+                className="play-btn__svg"
                 points="9.33 6.69 9.33 19.39 19.3 13.04 9.33 6.69"
             />
             <path
@@ -46,11 +45,11 @@ export class TextToSpeech extends Component {
             const apiURL = `/api/get_indiv_sentences/${this.props.textID}`;
             const response = await fetch(apiURL);
             const textData = await response.json();
-            console.log(textData)
+            console.log(textData);
             // this.setState({ textData });
             // document.addEventListener('keydown', this.handleKeyDown, true);
         } catch (e) {
-            console.log(e)
+            console.log(e);
         }
     }
 
@@ -68,7 +67,7 @@ export class TextToSpeech extends Component {
 
     changeSentence = (delta) => {
         const { textData, sentenceIndex } = this.state;
-        const listLength =  textData.length;
+        const listLength = textData.length;
         const newsentenceIndex = (sentenceIndex + delta + listLength) % listLength;
         this.setState({
             sentenceIndex: newsentenceIndex,
@@ -77,8 +76,9 @@ export class TextToSpeech extends Component {
     }
 
     playAudio = () => {
-        let utterance = new SpeechSynthesisUtterance();
-        utterance.text = textData[sentenceIndex];
+        const utterance = new SpeechSynthesisUtterance();
+        // utterance.text = textData[sentenceIndex];
+        utterance.text = 'hello';
         utterance.lang = 'en-US';
         utterance.rate = 1.2;
         speechSynthesis.speak(utterance);
@@ -153,7 +153,7 @@ export class TextToSpeech extends Component {
         //                        onClick={this.playAudio}>
         //                        {play_button('yellow')}
         //                   </div>
-        const flipcard = <div> Hello </div>
+        const flipcard = <div> Hello </div>;
 
         // <div className="flashcard-error">You do not have any starred cards</div>;
         // const flipcard = card

From 18c708bfc72adc2883ce6cef0cbb9df932e5eda2 Mon Sep 17 00:00:00 2001
From: Yifan Wang <yifan.wang0422@gmail.com>
Date: Fri, 30 Apr 2021 16:45:22 -0400
Subject: [PATCH 05/27] got page to show

---
 backend/app/views.py                      |  2 --
 frontend/src/app.js                       |  2 +-
 frontend/src/index/index.js               |  2 +-
 frontend/src/textToSpeech/textToSpeech.js | 27 ++++++++++-------------
 4 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/backend/app/views.py b/backend/app/views.py
index 003d231..5fe240f 100644
--- a/backend/app/views.py
+++ b/backend/app/views.py
@@ -200,10 +200,8 @@ def get_indiv_sentences(request, text_id):
     """
     API endpoint for getting the individual sentences from the given text.
     """
-    print("is this even running")
     text_obj = Text.objects.get(id=text_id)
     sentences = get_sentences(text_obj.content)
     # return Response(sentences)
     res = [{'sentence': sentence} for sentence in sentences]
-    print(sentences)
     return Response(res)
diff --git a/frontend/src/app.js b/frontend/src/app.js
index 4737a4e..2443a2d 100644
--- a/frontend/src/app.js
+++ b/frontend/src/app.js
@@ -14,7 +14,7 @@ import { InstructorView } from './instructorView/instructorView';
 import { AllQuizView } from './quizView/allQuizView';
 import { FlashcardView } from './flashcard/flashcardView';
 import { CrosswordView } from './crosswordView/crosswordView';
-import {TextToSpeech} from './textToSpeech/textToSpeech';
+import { TextToSpeech } from './textToSpeech/textToSpeech';
 
 // Import all styles
 import './UILibrary/styles.scss';
diff --git a/frontend/src/index/index.js b/frontend/src/index/index.js
index 57f17f1..2fc7730 100644
--- a/frontend/src/index/index.js
+++ b/frontend/src/index/index.js
@@ -12,7 +12,7 @@ const QUIZ_TYPES = {
     'Flashcards': posLink,
     'Quiz': idLink,
     'Crossword': posLink,
-    'TextToSpeech': idLink
+    'TextToSpeech': idLink,
 };
 
 class TextInfo extends React.Component {
diff --git a/frontend/src/textToSpeech/textToSpeech.js b/frontend/src/textToSpeech/textToSpeech.js
index 98d71f8..869543e 100644
--- a/frontend/src/textToSpeech/textToSpeech.js
+++ b/frontend/src/textToSpeech/textToSpeech.js
@@ -41,16 +41,14 @@ export class TextToSpeech extends Component {
     }
 
     componentDidMount = async () => {
-        try {
-            const apiURL = `/api/get_indiv_sentences/${this.props.textID}`;
-            const response = await fetch(apiURL);
-            const textData = await response.json();
-            console.log(textData);
-            // this.setState({ textData });
-            // document.addEventListener('keydown', this.handleKeyDown, true);
-        } catch (e) {
-            console.log(e);
-        }
+        const apiURL = `/api/get_indiv_sentences/${this.props.textID}`;
+        const response = await fetch(apiURL);
+        const data = await response.json();
+        this.setState({
+            textData: data,
+        });
+        console.log(this.state.textData);
+        document.addEventListener('keydown', this.handleKeyDown, true);
     }
 
     componentWillUnmount() {
@@ -62,7 +60,7 @@ export class TextToSpeech extends Component {
             sentenceIndex,
             textData,
         } = this.state;
-        return textData[sentenceIndex];
+        return this.state.textData[this.state.sentenceIndex];
     }
 
     changeSentence = (delta) => {
@@ -77,8 +75,7 @@ export class TextToSpeech extends Component {
 
     playAudio = () => {
         const utterance = new SpeechSynthesisUtterance();
-        // utterance.text = textData[sentenceIndex];
-        utterance.text = 'hello';
+        utterance.text = this.state.textData[this.state.sentenceIndex];
         utterance.lang = 'en-US';
         utterance.rate = 1.2;
         speechSynthesis.speak(utterance);
@@ -148,12 +145,12 @@ export class TextToSpeech extends Component {
             : `${sentenceIndex + 1}/${sentenceLength} Words`;
 
         /* Generate Flashcard */
-        const card = this.getcurrentSentence();
+        const card = this.getCurrentSentence();
         // const flipcard =  <div className="flashcard-star-back"
         //                        onClick={this.playAudio}>
         //                        {play_button('yellow')}
         //                   </div>
-        const flipcard = <div> Hello </div>;
+        const flipcard = <div>Hello</div>;
 
         // <div className="flashcard-error">You do not have any starred cards</div>;
         // const flipcard = card

From 8d85baedfad5f00686719b3ee7e67158bad79493 Mon Sep 17 00:00:00 2001
From: taokinbo <70776613+taokinbo@users.noreply.github.com>
Date: Fri, 30 Apr 2021 17:03:09 -0400
Subject: [PATCH 06/27] Audio now plays

---
 frontend/src/textToSpeech/textToSpeech.js | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/frontend/src/textToSpeech/textToSpeech.js b/frontend/src/textToSpeech/textToSpeech.js
index 869543e..f0447cd 100644
--- a/frontend/src/textToSpeech/textToSpeech.js
+++ b/frontend/src/textToSpeech/textToSpeech.js
@@ -7,7 +7,7 @@ const capitalize = (word) => {
     return word.charAt(0).toUpperCase() + word.slice(1);
 };
 
-const synth = window.speechSynthesis;
+// const synth = window.speechSynthesis;
 
 const playButton = (color) => {
     return (
@@ -60,7 +60,7 @@ export class TextToSpeech extends Component {
             sentenceIndex,
             textData,
         } = this.state;
-        return this.state.textData[this.state.sentenceIndex];
+        return this.state.textData[this.state.sentenceIndex]['sentence'];
     }
 
     changeSentence = (delta) => {
@@ -75,7 +75,7 @@ export class TextToSpeech extends Component {
 
     playAudio = () => {
         const utterance = new SpeechSynthesisUtterance();
-        utterance.text = this.state.textData[this.state.sentenceIndex];
+        utterance.text = this.getCurrentSentence();
         utterance.lang = 'en-US';
         utterance.rate = 1.2;
         speechSynthesis.speak(utterance);
@@ -146,11 +146,12 @@ export class TextToSpeech extends Component {
 
         /* Generate Flashcard */
         const card = this.getCurrentSentence();
-        // const flipcard =  <div className="flashcard-star-back"
-        //                        onClick={this.playAudio}>
-        //                        {play_button('yellow')}
-        //                   </div>
-        const flipcard = <div>Hello</div>;
+        const flipcard = <div className="flashcard-star-back"
+                               onClick={this.playAudio}>
+                               {playButton('yellow')}
+
+                          </div>;
+        // const flipcard = <div>{this.getCurrentSentence()}</div>;
 
         // <div className="flashcard-error">You do not have any starred cards</div>;
         // const flipcard = card

From 613d146980dd24252b6ac005500a813f0377ecbe Mon Sep 17 00:00:00 2001
From: taokinbo <70776613+taokinbo@users.noreply.github.com>
Date: Fri, 30 Apr 2021 17:18:33 -0400
Subject: [PATCH 07/27] Got the arrow keys working

---
 frontend/src/textToSpeech/textToSpeech.js | 30 ++++++++++++++++++++---
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/frontend/src/textToSpeech/textToSpeech.js b/frontend/src/textToSpeech/textToSpeech.js
index f0447cd..edcb0a4 100644
--- a/frontend/src/textToSpeech/textToSpeech.js
+++ b/frontend/src/textToSpeech/textToSpeech.js
@@ -107,6 +107,8 @@ export class TextToSpeech extends Component {
                 this.changeSentence(-1);
             } else if (code === 'ArrowRight') {
                 this.changeSentence(1);
+            } else if (code === 'Space') {
+                this.playAudio();
             }
         }
     }
@@ -146,11 +148,31 @@ export class TextToSpeech extends Component {
 
         /* Generate Flashcard */
         const card = this.getCurrentSentence();
-        const flipcard = <div className="flashcard-star-back"
-                               onClick={this.playAudio}>
-                               {playButton('yellow')}
+        // const flipcard = <div className="flashcard-star-back"
+        //                        onClick={this.playAudio}>
+        //                        {playButton('yellow')}
+        //
+        //                   </div>;
+
+        const flipcard =
+                <div>
+                    <div className="flashcard-star-back"
+                       onClick={this.playAudio}>
+                       {playButton('yellow')}
+
+                    </div>
+                    <div className="flashcard-div row">
+                        <div className="flashcard-arrows col-1 text-right"
+                            onClick={() => this.changeSentence(-1)}
+                        >
+                                &#60;
+                        </div>
+                        <div className="flashcard-arrows col-1" onClick={() => this.changeSentence(1)}>
+                            &#62;
+                        </div>
+                    </div>
 
-                          </div>;
+                </div>;
         // const flipcard = <div>{this.getCurrentSentence()}</div>;
 
         // <div className="flashcard-error">You do not have any starred cards</div>;

From 91db718bb1c0f50402a39b714d99889a6318f87d Mon Sep 17 00:00:00 2001
From: taokinbo <70776613+taokinbo@users.noreply.github.com>
Date: Sun, 2 May 2021 21:29:05 -0400
Subject: [PATCH 08/27] fixed small error

---
 frontend/src/index/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/index/index.js b/frontend/src/index/index.js
index c221624..d996027 100644
--- a/frontend/src/index/index.js
+++ b/frontend/src/index/index.js
@@ -14,7 +14,7 @@ const QUIZ_TYPES = {
     'Quiz': ['quiz', idLink],
     'Crossword': ['crossword', posLink],
     'Story Generator': ['picturebook', posLink],
-    'TextToSpeech': ["textToSpeech", idLink]
+    'TextToSpeech': ['textToSpeech', idLink]
 };
 
 class TextInfo extends React.Component {

From f0019a35157ee64204df6cc2ba3ea17af5957b55 Mon Sep 17 00:00:00 2001
From: taokinbo <70776613+taokinbo@users.noreply.github.com>
Date: Tue, 4 May 2021 16:53:40 -0400
Subject: [PATCH 09/27] started creatinf grader

---
 backend/app/analysis/text_parser.py | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/backend/app/analysis/text_parser.py b/backend/app/analysis/text_parser.py
index bfabcfc..3362f66 100644
--- a/backend/app/analysis/text_parser.py
+++ b/backend/app/analysis/text_parser.py
@@ -25,6 +25,35 @@ def get_sentences(text):
     print(sentences)
     return sentences
 
+def correct_sentence(given_sent, correct_sent):
+    grade = {}
+    given_tok = nltk.tokenize.word_tokenize(given_sent)
+    correct_tok = nltk.tokenize.word_tokenize(correct_sent)
+
+
+    index = 0
+    for word in given_tok:
+        match_found = False
+        for ind, match in enumerate(correct_tok[index:]):
+            print(word, match)
+            if word == match:
+                match_found = True
+                match_index = ind + index
+                break
+        if match_found:
+            grade[word] = "correct"
+            index = match_index + 1
+        else:
+            grade[word] = "incorrect"
+    return grade
+
+
+if __name__ == '__main__':
+    actual = "i like soup"
+    given = "i like"
+    print(actual, given)
+    print(correct_sentence(given, actual))
+
 
 
 

From 75b9b5d2ed3acb2b4c3dcddc32520cdf9486c942 Mon Sep 17 00:00:00 2001
From: taokinbo <70776613+taokinbo@users.noreply.github.com>
Date: Wed, 5 May 2021 11:04:31 -0400
Subject: [PATCH 10/27] updated grader to match which words are correct and
 incorrect

---
 backend/app/analysis/text_parser.py | 43 +++++++++++++++++------------
 backend/app/views.py                |  3 +-
 2 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/backend/app/analysis/text_parser.py b/backend/app/analysis/text_parser.py
index 3362f66..05c5108 100644
--- a/backend/app/analysis/text_parser.py
+++ b/backend/app/analysis/text_parser.py
@@ -2,6 +2,7 @@
 Custom command to populate text model with definition, examples, and images
 """
 import nltk
+import string
 
 # Ours
 
@@ -25,43 +26,51 @@ def get_sentences(text):
     print(sentences)
     return sentences
 
+
 def correct_sentence(given_sent, correct_sent):
     grade = {}
-    given_tok = nltk.tokenize.word_tokenize(given_sent)
-    correct_tok = nltk.tokenize.word_tokenize(correct_sent)
+    print(given_sent.translate(str.maketrans('', '', string.punctuation)))
+    given_tok = nltk.tokenize.word_tokenize(given_sent.translate(
+        str.maketrans('', '', string.punctuation)))
+    correct_tok = nltk.tokenize.word_tokenize(correct_sent.translate(
+        str.maketrans('', '', string.punctuation)))
+
+    words_missing = correct_tok.copy()
+    for word in given_tok:
+        if words_missing.count(word) != 0:
+            words_missing.remove(word)
 
+    grade["missing"] = words_missing
 
     index = 0
-    for word in given_tok:
+    for ind_1, word in enumerate(given_tok):
         match_found = False
-        for ind, match in enumerate(correct_tok[index:]):
-            print(word, match)
+        for ind_2, match in enumerate(correct_tok[index:]):
+            # print(word, match)
             if word == match:
                 match_found = True
-                match_index = ind + index
+                match_index = ind_2 + index
                 break
         if match_found:
-            grade[word] = "correct"
+            grade[ind_1] = {"word": word,
+                            "grade": "correct"}
             index = match_index + 1
         else:
-            grade[word] = "incorrect"
+            grade[ind_1] = {"word": word,
+                            "grade": "incorrect"}
     return grade
 
 
 if __name__ == '__main__':
     actual = "i like soup"
-    given = "i like"
+    given = "i like, soop"
     print(actual, given)
     print(correct_sentence(given, actual))
 
-
-
-
-
-
-
-
-
+    # actual = ["i like soup", "soup likes me", "EOM"]
+    #
+    # res = [{'sentence': sentence} for sentence in actual]
+    # print(res)
 
     # part_of_speech = ['noun', 'verb', 'adjective', 'adverb']
     #
diff --git a/backend/app/views.py b/backend/app/views.py
index bf6c82d..17f4319 100644
--- a/backend/app/views.py
+++ b/backend/app/views.py
@@ -123,7 +123,6 @@ def get_anagram(request, text_id, part_of_speech):
     return Response(res)
 
 
-
 @api_view(['GET'])
 def get_picturebook_prompt(request, text_id, part_of_speech):
     """
@@ -231,6 +230,7 @@ def get_quiz_data(request, text_id):
     res = get_quiz_sentences(text_obj.content)
     return Response(res)
 
+
 @api_view(['GET'])
 def get_indiv_sentences(request, text_id):
     """
@@ -241,3 +241,4 @@ def get_indiv_sentences(request, text_id):
     # return Response(sentences)
     res = [{'sentence': sentence} for sentence in sentences]
     return Response(res)
+

From b8f392ce65ec7930e6b7b0908d99c048fefb3fd0 Mon Sep 17 00:00:00 2001
From: adanna-a <70187411+adanna-a@users.noreply.github.com>
Date: Sat, 8 May 2021 21:44:09 -0400
Subject: [PATCH 11/27] text box

---
 frontend/src/textToSpeech/textToSpeech.js | 66 +++++++++++++++++++++++
 1 file changed, 66 insertions(+)

diff --git a/frontend/src/textToSpeech/textToSpeech.js b/frontend/src/textToSpeech/textToSpeech.js
index edcb0a4..529b749 100644
--- a/frontend/src/textToSpeech/textToSpeech.js
+++ b/frontend/src/textToSpeech/textToSpeech.js
@@ -36,6 +36,7 @@ export class TextToSpeech extends Component {
             sentenceIndex: 0,
             showModal: false,
             nextSentence: false,
+            userText: '',
         };
         this.modalHandler = this.modalHandler.bind(this);
     }
@@ -81,6 +82,48 @@ export class TextToSpeech extends Component {
         speechSynthesis.speak(utterance);
     }
 
+    handleInput = (event) => {
+        const inputValue = event.target.value;
+        this.setState({
+            userText: inputValue,
+        });
+
+        // if (';,. '.includes(inputValue.slice(-1))) {
+        //     this.createPictureBook(inputValue);
+        // }
+        console.log('this is the input value:');
+        console.log(inputValue);
+        console.log('this is the state value:');
+        console.log(this.userText);
+    };
+
+    handleSubmit = (event) => {
+        // const inputValue = ;
+        // this.setState({
+        //     userText: inputValue,
+        // });
+
+        // if (';,. '.includes(inputValue.slice(-1))) {
+        this.gradeText();
+        // }
+        console.log('You have submitted!!!');
+        // console.log(inputValue);
+        // console.log('this is the state value:');
+        // console.log(this.userText);
+    };
+
+    gradeText = async (input) => {
+        try {
+            const apiURL = '/api/get_picturebook_data?content=' + input;
+            const response = await fetch(apiURL);
+            const pictureBookWords = await response.json();
+            pictureBookWords.pop(-1);
+            this.setState({ pictureBookWords });
+        } catch (e) {
+            console.log(e);
+        }
+    }
+
     // toggleStar = () => {
     //     const { starredCards, starOnly, cardIndex } = this.state;
     //     let currentIndex = starOnly ? starredCards[cardIndex] : cardIndex;
@@ -316,6 +359,29 @@ export class TextToSpeech extends Component {
                         </div>
                     </div>
                     {flipcard}
+                    <div className='row'>
+                        <div className="col box">
+                            <form id='input-form'>
+                                <div className="form-group">
+                                    <label>Please write exactly what you hear from the audio.</label>
+                                    <textarea className="form-control text-input"
+                                            id="content"
+                                            rows="10"
+                                            onChange={this.handleInput}
+                                            value={this.userText}>
+                                    </textarea>
+                                </div>
+                            </form>
+                        </div>
+                            <div className='col-xl-4 text-right bottom-align-text' id="submit-btn-div">
+                                <button type="submit"
+                                    className="btn btn-success submit-btn"
+                                    form="picturebook-form"
+                                    onClick={this.handleSubmit}>
+                                    Submit
+                                </button>
+                        </div>
+                    </div>
                 </div>
                 <Footer/>
             </>

From dc3cc4a5f0ff9e4c2aa013fc955ef3923c795d77 Mon Sep 17 00:00:00 2001
From: taokinbo <70776613+taokinbo@users.noreply.github.com>
Date: Sat, 8 May 2021 22:13:34 -0400
Subject: [PATCH 12/27] added api call

---
 backend/app/views.py                      | 12 ++++++++++++
 frontend/src/textToSpeech/textToSpeech.js | 10 +++++-----
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/backend/app/views.py b/backend/app/views.py
index 17f4319..27774ec 100644
--- a/backend/app/views.py
+++ b/backend/app/views.py
@@ -34,6 +34,7 @@
 )
 from .analysis.text_parser import (
     get_sentences,
+    correct_sentence,
 )
 
 
@@ -242,3 +243,14 @@ def get_indiv_sentences(request, text_id):
     res = [{'sentence': sentence} for sentence in sentences]
     return Response(res)
 
+
+@api_view(['GET'])
+def get_sentence_grade(request):
+    """
+    API endpoint for getting the individual sentences from the given text.
+    """
+    user_sentence = request.query_params.get('user_sentence')
+    actual_sentence = request.query_params.get('correct_sentence')
+
+    graded_sentence = correct_sentence(user_sentence, actual_sentence)
+    return Response(graded_sentence)
diff --git a/frontend/src/textToSpeech/textToSpeech.js b/frontend/src/textToSpeech/textToSpeech.js
index 529b749..c28ec2f 100644
--- a/frontend/src/textToSpeech/textToSpeech.js
+++ b/frontend/src/textToSpeech/textToSpeech.js
@@ -112,13 +112,13 @@ export class TextToSpeech extends Component {
         // console.log(this.userText);
     };
 
-    gradeText = async (input) => {
+    gradeText = async () => {
         try {
-            const apiURL = '/api/get_picturebook_data?content=' + input;
+            const apiURL = '/api/get_sentences_grade?userSentence=' + this.userText + "?correctSentence=" + this.getCurrentSentence;
             const response = await fetch(apiURL);
-            const pictureBookWords = await response.json();
-            pictureBookWords.pop(-1);
-            this.setState({ pictureBookWords });
+            const grade = await response.json();
+            // this.setState({ pictureBookWords });
+            console.log(grade);
         } catch (e) {
             console.log(e);
         }

From 985c05ecca469d11a0dc3e5581b4cc2afa1ef9c3 Mon Sep 17 00:00:00 2001
From: adanna-a <70187411+adanna-a@users.noreply.github.com>
Date: Sat, 8 May 2021 22:59:04 -0400
Subject: [PATCH 13/27] fixing JSON error

---
 backend/app/views.py                      | 25 ++++++++++++++++++-----
 backend/config/urls.py                    |  3 +++
 frontend/src/textToSpeech/textToSpeech.js | 23 ++++++++++++++++++---
 3 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/backend/app/views.py b/backend/app/views.py
index 27774ec..e81ef34 100644
--- a/backend/app/views.py
+++ b/backend/app/views.py
@@ -148,6 +148,7 @@ def get_picturebook_data(request):
     API endpoint for getting the picture book images given the story the user wrote.
     """
     story_content = request.query_params.get('content')
+    print(story_content)
     urls = get_story_data(story_content)
     misspelled = get_misspelled_words(story_content)
     res = [{'word': word,
@@ -249,8 +250,22 @@ def get_sentence_grade(request):
     """
     API endpoint for getting the individual sentences from the given text.
     """
-    user_sentence = request.query_params.get('user_sentence')
-    actual_sentence = request.query_params.get('correct_sentence')
-
-    graded_sentence = correct_sentence(user_sentence, actual_sentence)
-    return Response(graded_sentence)
+    # sentences = request.query_params.get('content')
+    # user_sentence ,actual_sentence = sentences.split(';')
+    #
+    #graded_sentence = correct_sentence(user_sentence, actual_sentence)
+    # return Response(graded_sentence)
+    # test = ["hello", "this", "is", "a", "test"]
+    # res = [{'word': word,}
+    #         for word in test]
+    # #res = [graded_sentence]
+    # return Response(res)
+
+    story_content = "Hello, my name is pain"
+    urls = get_story_data(story_content)
+    misspelled = get_misspelled_words(story_content)
+    res = [{'word': word,
+            'url': urls[word]}
+           for word in urls]
+    res.append(misspelled)
+    return Response(res)
diff --git a/backend/config/urls.py b/backend/config/urls.py
index 05817fa..8636284 100644
--- a/backend/config/urls.py
+++ b/backend/config/urls.py
@@ -30,6 +30,7 @@
     get_quiz_data,
     text,
     get_indiv_sentences,
+    get_sentence_grade,
 )
 
 
@@ -62,6 +63,8 @@ def react_view_path(route, component_name):
     path('api/get_picturebook_prompt/<int:text_id>/<str:part_of_speech>', get_picturebook_prompt),
     path('api/get_picturebook_data', get_picturebook_data),
     path('api/get_indiv_sentences/<int:text_id>', get_indiv_sentences),
+    path('api/get_sentence_grade', get_sentence_grade),
+
 
     # View paths
     react_view_path('', 'IndexView'),
diff --git a/frontend/src/textToSpeech/textToSpeech.js b/frontend/src/textToSpeech/textToSpeech.js
index c28ec2f..9e532e2 100644
--- a/frontend/src/textToSpeech/textToSpeech.js
+++ b/frontend/src/textToSpeech/textToSpeech.js
@@ -104,7 +104,10 @@ export class TextToSpeech extends Component {
         // });
 
         // if (';,. '.includes(inputValue.slice(-1))) {
-        this.gradeText();
+        console.log('trying to submit');
+        const input = this.userText + ';' + this.getCurrentSentence();
+        // this.gradeText(input);
+        this.createPictureBook(input);
         // }
         console.log('You have submitted!!!');
         // console.log(inputValue);
@@ -112,9 +115,10 @@ export class TextToSpeech extends Component {
         // console.log(this.userText);
     };
 
-    gradeText = async () => {
+    gradeText = async (input) => {
+        console.log('gradetest was called');
         try {
-            const apiURL = '/api/get_sentences_grade?userSentence=' + this.userText + "?correctSentence=" + this.getCurrentSentence;
+            const apiURL = '/api/get_correct_sentence?content=' + input;
             const response = await fetch(apiURL);
             const grade = await response.json();
             // this.setState({ pictureBookWords });
@@ -124,6 +128,19 @@ export class TextToSpeech extends Component {
         }
     }
 
+    createPictureBook = async (input) => {
+        try {
+            const apiURL = '/api/get_sentence_grade?content=' + input;
+            const response = await fetch(apiURL);
+            const pictureBookWords = await response.json();
+            // pictureBookWords.pop(-1);
+            // this.setState({ pictureBookWords });
+            console.log(pictureBookWords);
+        } catch (e) {
+            console.log(e);
+        }
+    }
+
     // toggleStar = () => {
     //     const { starredCards, starOnly, cardIndex } = this.state;
     //     let currentIndex = starOnly ? starredCards[cardIndex] : cardIndex;

From c2c4b75f9e9b20e4b4aebade9aa98fd3b00d6d12 Mon Sep 17 00:00:00 2001
From: taokinbo <70776613+taokinbo@users.noreply.github.com>
Date: Sun, 9 May 2021 22:58:23 -0400
Subject: [PATCH 14/27] more debugging done for api call

---
 backend/app/views.py                      | 29 ++++++++++++++++-------
 frontend/src/textToSpeech/textToSpeech.js | 28 +++++++++++++++-------
 2 files changed, 39 insertions(+), 18 deletions(-)

diff --git a/backend/app/views.py b/backend/app/views.py
index e81ef34..8d1a85f 100644
--- a/backend/app/views.py
+++ b/backend/app/views.py
@@ -148,7 +148,7 @@ def get_picturebook_data(request):
     API endpoint for getting the picture book images given the story the user wrote.
     """
     story_content = request.query_params.get('content')
-    print(story_content)
+    print('hmmm:', story_content)
     urls = get_story_data(story_content)
     misspelled = get_misspelled_words(story_content)
     res = [{'word': word,
@@ -251,6 +251,7 @@ def get_sentence_grade(request):
     API endpoint for getting the individual sentences from the given text.
     """
     # sentences = request.query_params.get('content')
+    # print(sentences)
     # user_sentence ,actual_sentence = sentences.split(';')
     #
     #graded_sentence = correct_sentence(user_sentence, actual_sentence)
@@ -261,11 +262,21 @@ def get_sentence_grade(request):
     # #res = [graded_sentence]
     # return Response(res)
 
-    story_content = "Hello, my name is pain"
-    urls = get_story_data(story_content)
-    misspelled = get_misspelled_words(story_content)
-    res = [{'word': word,
-            'url': urls[word]}
-           for word in urls]
-    res.append(misspelled)
-    return Response(res)
+    # story_content = "Hello, my name is pain"
+    # urls = get_story_data(story_content)
+    # misspelled = get_misspelled_words(story_content)
+    # res = [{'word': word,
+    #         'url': urls[word]}
+    #        for word in urls]
+    # res.append(misspelled)
+    # return Response(res)
+    # story_content = request.query_params.get('content')
+    # print('hmmm:', story_content)
+    # urls = get_story_data(story_content)
+    # misspelled = get_misspelled_words(story_content)
+    # res = [{'word': word,
+    #         'url': urls[word]}
+    #        for word in urls]
+    # res.append(misspelled)
+    # return Response(res)
+    return get_picturebook_data(request)
diff --git a/frontend/src/textToSpeech/textToSpeech.js b/frontend/src/textToSpeech/textToSpeech.js
index 9e532e2..b902b14 100644
--- a/frontend/src/textToSpeech/textToSpeech.js
+++ b/frontend/src/textToSpeech/textToSpeech.js
@@ -91,10 +91,10 @@ export class TextToSpeech extends Component {
         // if (';,. '.includes(inputValue.slice(-1))) {
         //     this.createPictureBook(inputValue);
         // }
-        console.log('this is the input value:');
-        console.log(inputValue);
+        // console.log('this is the input value:');
+        // console.log(inputValue);
         console.log('this is the state value:');
-        console.log(this.userText);
+        console.log(this.state.userText);
     };
 
     handleSubmit = (event) => {
@@ -105,9 +105,9 @@ export class TextToSpeech extends Component {
 
         // if (';,. '.includes(inputValue.slice(-1))) {
         console.log('trying to submit');
-        const input = this.userText + ';' + this.getCurrentSentence();
-        // this.gradeText(input);
-        this.createPictureBook(input);
+        const input = this.state.userText + ';' + this.getCurrentSentence();
+        this.gradeText(input);
+        // this.createPictureBook(input);
         // }
         console.log('You have submitted!!!');
         // console.log(inputValue);
@@ -118,7 +118,9 @@ export class TextToSpeech extends Component {
     gradeText = async (input) => {
         console.log('gradetest was called');
         try {
-            const apiURL = '/api/get_correct_sentence?content=' + input;
+            console.log('im tryig something here');
+            const apiURL = '/api/get_sentence_grade?content=' + input;
+            // const apiURL = '/api/get_picturebook_data?content=' + input;
             const response = await fetch(apiURL);
             const grade = await response.json();
             // this.setState({ pictureBookWords });
@@ -130,7 +132,9 @@ export class TextToSpeech extends Component {
 
     createPictureBook = async (input) => {
         try {
-            const apiURL = '/api/get_sentence_grade?content=' + input;
+            console.log('here is input');
+            console.log(input);
+            const apiURL = '/api/get_picturebook_data?content=' + input;
             const response = await fetch(apiURL);
             const pictureBookWords = await response.json();
             // pictureBookWords.pop(-1);
@@ -385,8 +389,14 @@ export class TextToSpeech extends Component {
                                             id="content"
                                             rows="10"
                                             onChange={this.handleInput}
-                                            value={this.userText}>
+                                            value={this.state.userText}
+                                        >
                                     </textarea>
+                                    <div>
+                                        Hello my name is
+                                        <br/>
+                                        {this.state.userText}
+                                    </div>
                                 </div>
                             </form>
                         </div>

From 2271a65e9b950e5dd52cc601f470f0cbe8e3136b Mon Sep 17 00:00:00 2001
From: taokinbo <70776613+taokinbo@users.noreply.github.com>
Date: Wed, 12 May 2021 11:29:01 -0400
Subject: [PATCH 15/27] connected grader to frontend

---
 backend/app/views.py                      | 17 ++++++++++++++---
 backend/config/urls.py                    |  2 +-
 frontend/src/textToSpeech/textToSpeech.js | 11 ++++++-----
 3 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/backend/app/views.py b/backend/app/views.py
index 8d1a85f..6b75127 100644
--- a/backend/app/views.py
+++ b/backend/app/views.py
@@ -246,7 +246,7 @@ def get_indiv_sentences(request, text_id):
 
 
 @api_view(['GET'])
-def get_sentence_grade(request):
+def get_sentence_grade(request, user_sent, actual_sent):
     """
     API endpoint for getting the individual sentences from the given text.
     """
@@ -254,7 +254,7 @@ def get_sentence_grade(request):
     # print(sentences)
     # user_sentence ,actual_sentence = sentences.split(';')
     #
-    #graded_sentence = correct_sentence(user_sentence, actual_sentence)
+    graded_sentence = correct_sentence(user_sent, actual_sent)
     # return Response(graded_sentence)
     # test = ["hello", "this", "is", "a", "test"]
     # res = [{'word': word,}
@@ -279,4 +279,15 @@ def get_sentence_grade(request):
     #        for word in urls]
     # res.append(misspelled)
     # return Response(res)
-    return get_picturebook_data(request)
+    # return get_picturebook_data(request)
+    text = user_sent
+    text_2 = actual_sent
+
+    # print('hmmm:', story_content)
+    # urls = get_story_data(story_content)
+    # misspelled = get_misspelled_words(story_content)
+    # res = [{'word': word,
+    #         'url': urls[word]}
+    #        for word in urls]
+    # res.append(misspelled)
+    return Response(graded_sentence)
diff --git a/backend/config/urls.py b/backend/config/urls.py
index 8636284..631c3b8 100644
--- a/backend/config/urls.py
+++ b/backend/config/urls.py
@@ -63,7 +63,7 @@ def react_view_path(route, component_name):
     path('api/get_picturebook_prompt/<int:text_id>/<str:part_of_speech>', get_picturebook_prompt),
     path('api/get_picturebook_data', get_picturebook_data),
     path('api/get_indiv_sentences/<int:text_id>', get_indiv_sentences),
-    path('api/get_sentence_grade', get_sentence_grade),
+    path('api/get_sentence_grade/<str:user_sent>/<str:actual_sent>', get_sentence_grade),
 
 
     # View paths
diff --git a/frontend/src/textToSpeech/textToSpeech.js b/frontend/src/textToSpeech/textToSpeech.js
index b902b14..3303d68 100644
--- a/frontend/src/textToSpeech/textToSpeech.js
+++ b/frontend/src/textToSpeech/textToSpeech.js
@@ -105,7 +105,7 @@ export class TextToSpeech extends Component {
 
         // if (';,. '.includes(inputValue.slice(-1))) {
         console.log('trying to submit');
-        const input = this.state.userText + ';' + this.getCurrentSentence();
+        const input = this.state.userText;  // + ';%20' + this.getCurrentSentence();
         this.gradeText(input);
         // this.createPictureBook(input);
         // }
@@ -118,8 +118,9 @@ export class TextToSpeech extends Component {
     gradeText = async (input) => {
         console.log('gradetest was called');
         try {
-            console.log('im tryig something here');
-            const apiURL = '/api/get_sentence_grade?content=' + input;
+            console.log('im trying something here');
+            const apiURL = `/api/get_sentence_grade/${input}/${this.getCurrentSentence()}`;
+            // const apiURL = '/api/get_sentence_grade?content=' + input + '?content2=' + this.getCurrentSentence();
             // const apiURL = '/api/get_picturebook_data?content=' + input;
             const response = await fetch(apiURL);
             const grade = await response.json();
@@ -393,9 +394,9 @@ export class TextToSpeech extends Component {
                                         >
                                     </textarea>
                                     <div>
-                                        Hello my name is
+                                        Here is the current sentence in text form:
                                         <br/>
-                                        {this.state.userText}
+                                        {this.getCurrentSentence()}
                                     </div>
                                 </div>
                             </form>

From 07da89459ec96cc4ef22d179933f7ac07d62c475 Mon Sep 17 00:00:00 2001
From: taokinbo <70776613+taokinbo@users.noreply.github.com>
Date: Wed, 12 May 2021 15:21:58 -0400
Subject: [PATCH 16/27] upgraded graded to grade word comparisions

---
 backend/app/analysis/text_parser.py       | 52 +++++++++++++++++++++++
 frontend/src/textToSpeech/textToSpeech.js | 41 ++++++++++--------
 requirements.txt                          |  1 +
 3 files changed, 77 insertions(+), 17 deletions(-)

diff --git a/backend/app/analysis/text_parser.py b/backend/app/analysis/text_parser.py
index 05c5108..ebb17d6 100644
--- a/backend/app/analysis/text_parser.py
+++ b/backend/app/analysis/text_parser.py
@@ -3,6 +3,7 @@
 """
 import nltk
 import string
+import Levenshtein as Lev
 
 # Ours
 
@@ -41,6 +42,7 @@ def correct_sentence(given_sent, correct_sent):
             words_missing.remove(word)
 
     grade["missing"] = words_missing
+    incorrect_word_index = []
 
     index = 0
     for ind_1, word in enumerate(given_tok):
@@ -56,8 +58,58 @@ def correct_sentence(given_sent, correct_sent):
                             "grade": "correct"}
             index = match_index + 1
         else:
+            incorrect_word_index.append(ind_1)
             grade[ind_1] = {"word": word,
                             "grade": "incorrect"}
+
+    for word_index in incorrect_word_index:
+        sim_word = most_similar_word(given_tok[word_index], words_missing)
+        if sim_word is not None:
+            word_grade = correct_words(given_tok[word_index], sim_word)
+            grade[word_index]["word_grade"] = word_grade
+    return grade
+
+
+def most_similar_word(word, comparisons):
+    min_lev_val = None
+    min_lev_word = None
+
+    for current_word in comparisons:
+        current_val = Lev.distance(word, current_word)
+        if min_lev_val == None or min_lev_val > current_val:
+            min_lev_val = current_val
+            min_lev_word = current_word
+    return min_lev_word
+
+
+def correct_words(given_word, correct_word):
+    grade = {}
+
+    char_missing = []
+    char_missing[:0] = correct_word
+    for char in given_word:
+        if char_missing.count(char) != 0:
+            char_missing.remove(char)
+
+    grade["missing"] = list(char_missing)
+
+    index = 0
+    for ind_1, char in enumerate(given_word):
+        match_found = False
+        for ind_2, match in enumerate(correct_word[index:]):
+            # print(word, match)
+            if char == match:
+                match_found = True
+                match_index = ind_2 + index
+                break
+        if match_found:
+            grade[ind_1] = {"char": char,
+                            "grade": "correct"}
+            index = match_index + 1
+        else:
+            grade[ind_1] = {"char": char,
+                            "grade": "incorrect"}
+
     return grade
 
 
diff --git a/frontend/src/textToSpeech/textToSpeech.js b/frontend/src/textToSpeech/textToSpeech.js
index 3303d68..7dbd63f 100644
--- a/frontend/src/textToSpeech/textToSpeech.js
+++ b/frontend/src/textToSpeech/textToSpeech.js
@@ -37,6 +37,8 @@ export class TextToSpeech extends Component {
             showModal: false,
             nextSentence: false,
             userText: '',
+            graded: false,
+            grade: null,
         };
         this.modalHandler = this.modalHandler.bind(this);
     }
@@ -116,7 +118,7 @@ export class TextToSpeech extends Component {
     };
 
     gradeText = async (input) => {
-        console.log('gradetest was called');
+        console.log('gradeText was called');
         try {
             console.log('im trying something here');
             const apiURL = `/api/get_sentence_grade/${input}/${this.getCurrentSentence()}`;
@@ -126,21 +128,7 @@ export class TextToSpeech extends Component {
             const grade = await response.json();
             // this.setState({ pictureBookWords });
             console.log(grade);
-        } catch (e) {
-            console.log(e);
-        }
-    }
-
-    createPictureBook = async (input) => {
-        try {
-            console.log('here is input');
-            console.log(input);
-            const apiURL = '/api/get_picturebook_data?content=' + input;
-            const response = await fetch(apiURL);
-            const pictureBookWords = await response.json();
-            // pictureBookWords.pop(-1);
-            // this.setState({ pictureBookWords });
-            console.log(pictureBookWords);
+            this.setState({grade: grade, graded: true});
         } catch (e) {
             console.log(e);
         }
@@ -395,9 +383,28 @@ export class TextToSpeech extends Component {
                                     </textarea>
                                     <div>
                                         Here is the current sentence in text form:
-                                        <br/>
+                                    </div>
+                                    <div>
                                         {this.getCurrentSentence()}
                                     </div>
+                                    <div>
+                                        Here is the grade:
+                                    </div>
+                                    <div>
+                                        {
+                                            this.state.graded
+                                                // ? this.state.grade.map((grade) => <div>{grade.name}</div>)
+                                                // ? Object.entries(this.state.grade).map((key) => <div> key={key} {this.state.grade.key}</div>)
+                                                // ? {
+                                                //     for (const [key, value] of Object.entries(this.state.grade)) {
+                                                //       key: {key}: value: {value}
+                                                //     }
+                                                // }
+                                                ? 'is working on displaying grade'
+                                                : 'Not submitted yet'
+                                        }
+
+                                    </div>
                                 </div>
                             </form>
                         </div>
diff --git a/requirements.txt b/requirements.txt
index 5d66473..c8617be 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -22,3 +22,4 @@ soupsieve==2.2
 sqlparse==0.4.1
 tqdm==4.58.0
 urllib3==1.26.3
+Levenshtein==0.12.0

From 74b07d46f90d63740e81ed97b74a6bf152d89e91 Mon Sep 17 00:00:00 2001
From: Yifan Wang <yifan.wang0422@gmail.com>
Date: Fri, 14 May 2021 15:00:08 -0400
Subject: [PATCH 17/27] updating usertext once submitted

---
 frontend/src/textToSpeech/textToSpeech.js | 55 +++++++++++++----------
 1 file changed, 31 insertions(+), 24 deletions(-)

diff --git a/frontend/src/textToSpeech/textToSpeech.js b/frontend/src/textToSpeech/textToSpeech.js
index 7dbd63f..cb64db3 100644
--- a/frontend/src/textToSpeech/textToSpeech.js
+++ b/frontend/src/textToSpeech/textToSpeech.js
@@ -84,30 +84,33 @@ export class TextToSpeech extends Component {
         speechSynthesis.speak(utterance);
     }
 
-    handleInput = (event) => {
-        const inputValue = event.target.value;
-        this.setState({
-            userText: inputValue,
-        });
-
-        // if (';,. '.includes(inputValue.slice(-1))) {
-        //     this.createPictureBook(inputValue);
-        // }
-        // console.log('this is the input value:');
-        // console.log(inputValue);
-        console.log('this is the state value:');
-        console.log(this.state.userText);
-    };
+    // handleInput = (event) => {
+    //     const inputValue = event.target.value;
+    //     this.setState({
+    //         userText: inputValue,
+    //     });
+    //
+    //     // if (';,. '.includes(inputValue.slice(-1))) {
+    //     //     this.createPictureBook(inputValue);
+    //     // }
+    //     // console.log('this is the input value:');
+    //     // console.log(inputValue);
+    //     console.log('this is the state value:');
+    //     console.log(this.state.userText);
+    // };
 
     handleSubmit = (event) => {
         // const inputValue = ;
         // this.setState({
         //     userText: inputValue,
         // });
-
+        const input = document.getElementById('content').value;
         // if (';,. '.includes(inputValue.slice(-1))) {
-        console.log('trying to submit');
-        const input = this.state.userText;  // + ';%20' + this.getCurrentSentence();
+        console.log('this is the input i want', input);
+        // const input = this.state.userText;  // + ';%20' + this.getCurrentSentence();
+        this.setState({
+            userText: input,
+        });
         this.gradeText(input);
         // this.createPictureBook(input);
         // }
@@ -212,19 +215,19 @@ export class TextToSpeech extends Component {
                     <div className="flashcard-star-back"
                        onClick={this.playAudio}>
                        {playButton('yellow')}
-
                     </div>
-                    <div className="flashcard-div row">
+                    <div className="flashcard-div row center">
                         <div className="flashcard-arrows col-1 text-right"
                             onClick={() => this.changeSentence(-1)}
                         >
                                 &#60;
                         </div>
-                        <div className="flashcard-arrows col-1" onClick={() => this.changeSentence(1)}>
+                        <div className="flashcard-arrows col-1"
+                             onClick={() => this.changeSentence(1)}
+                        >
                             &#62;
                         </div>
                     </div>
-
                 </div>;
         // const flipcard = <div>{this.getCurrentSentence()}</div>;
 
@@ -377,9 +380,7 @@ export class TextToSpeech extends Component {
                                     <textarea className="form-control text-input"
                                             id="content"
                                             rows="10"
-                                            onChange={this.handleInput}
-                                            value={this.state.userText}
-                                        >
+                                    >
                                     </textarea>
                                     <div>
                                         Here is the current sentence in text form:
@@ -387,6 +388,12 @@ export class TextToSpeech extends Component {
                                     <div>
                                         {this.getCurrentSentence()}
                                     </div>
+                                    <div>
+                                        Here is your submission:
+                                    </div>
+                                    <div>
+                                        {this.state.userText}
+                                    </div>
                                     <div>
                                         Here is the grade:
                                     </div>

From f6d7af9e41f1c2478ff0458962df8de361b66e3f Mon Sep 17 00:00:00 2001
From: taokinbo <70776613+taokinbo@users.noreply.github.com>
Date: Fri, 14 May 2021 16:37:32 -0400
Subject: [PATCH 18/27] made some edits

---
 frontend/src/textToSpeech/textToSpeech.js | 29 +++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/frontend/src/textToSpeech/textToSpeech.js b/frontend/src/textToSpeech/textToSpeech.js
index cb64db3..eee4502 100644
--- a/frontend/src/textToSpeech/textToSpeech.js
+++ b/frontend/src/textToSpeech/textToSpeech.js
@@ -185,6 +185,27 @@ export class TextToSpeech extends Component {
         return 0;
     }
 
+    giveGrade = () => {
+        const words = [];
+        for (let i = 0; i < this.state.grade['length']; i++) {
+            if (this.state.grade[i]['grade'] === 'correct') {
+                // const color = '#3ED7AF';
+                words.push(
+                    <span style='color: #3ED7AF'>{this.state.grade[i]['word']}</span>
+                );
+            } else {
+                // const color = '#F64F4F';
+                words.push(
+                    <span style='color: #F64F4F'>{this.state.grade[i]['word']}</span>
+                );
+            }
+            // words.push(
+            //     <span style='color: color} >{this.state.grade[i]['word']}</span>
+            // );
+            // if incorrect, color == this
+        }
+    }
+
     render() {
         const {
             textData,
@@ -371,6 +392,14 @@ export class TextToSpeech extends Component {
                             </div>
                         </div>
                     </div>
+                    <div>
+                        {
+                            this.state.graded
+                            ? this.giveGrade()
+                                : <div> Submit Grade </div>
+                        }
+
+                    </div>
                     {flipcard}
                     <div className='row'>
                         <div className="col box">

From 29b43e1e605e8e1c8fe86b87b5d6e54ef6989b85 Mon Sep 17 00:00:00 2001
From: taokinbo <70776613+taokinbo@users.noreply.github.com>
Date: Tue, 18 May 2021 19:01:41 -0400
Subject: [PATCH 19/27] displayed grade and added buttons

---
 backend/app/analysis/text_parser.py         |   9 +-
 frontend/src/textToSpeech/textToSpeech.js   | 267 +++++++-------------
 frontend/src/textToSpeech/textToSpeech.scss |  13 +
 3 files changed, 117 insertions(+), 172 deletions(-)

diff --git a/backend/app/analysis/text_parser.py b/backend/app/analysis/text_parser.py
index ebb17d6..eba97a7 100644
--- a/backend/app/analysis/text_parser.py
+++ b/backend/app/analysis/text_parser.py
@@ -16,7 +16,7 @@ def get_sentences(text):
     :param text: the Text object that we want to get sentences from
     """
 
-    sentences = nltk.tokenize.sent_tokenize(text)
+    sentences = nltk.tokenize.sent_tokenize(text.replace("\n", " "))
     # text_paragraph = text_obj.content
     # temp_sentences = text_paragraph.split(".")
     #
@@ -31,9 +31,9 @@ def get_sentences(text):
 def correct_sentence(given_sent, correct_sent):
     grade = {}
     print(given_sent.translate(str.maketrans('', '', string.punctuation)))
-    given_tok = nltk.tokenize.word_tokenize(given_sent.translate(
+    given_tok = nltk.tokenize.word_tokenize(given_sent.lower().translate(
         str.maketrans('', '', string.punctuation)))
-    correct_tok = nltk.tokenize.word_tokenize(correct_sent.translate(
+    correct_tok = nltk.tokenize.word_tokenize(correct_sent.lower().translate(
         str.maketrans('', '', string.punctuation)))
 
     words_missing = correct_tok.copy()
@@ -44,6 +44,9 @@ def correct_sentence(given_sent, correct_sent):
     grade["missing"] = words_missing
     incorrect_word_index = []
 
+    grade["length"] = len(given_tok)
+    grade["isCorrect"] = given_tok == correct_tok
+
     index = 0
     for ind_1, word in enumerate(given_tok):
         match_found = False
diff --git a/frontend/src/textToSpeech/textToSpeech.js b/frontend/src/textToSpeech/textToSpeech.js
index eee4502..b266727 100644
--- a/frontend/src/textToSpeech/textToSpeech.js
+++ b/frontend/src/textToSpeech/textToSpeech.js
@@ -35,10 +35,11 @@ export class TextToSpeech extends Component {
             textData: null,
             sentenceIndex: 0,
             showModal: false,
-            nextSentence: false,
             userText: '',
             graded: false,
             grade: null,
+            continue: false,
+            showAnswer: false,
         };
         this.modalHandler = this.modalHandler.bind(this);
     }
@@ -74,13 +75,33 @@ export class TextToSpeech extends Component {
             sentenceIndex: newsentenceIndex,
             showNext: true,
         });
+        this.reset();
+    }
+
+    reset = async (input) => {
+        this.setState({
+            showModal: false,
+            userText: '',
+            graded: false,
+            grade: null,
+            continue: false,
+            showAnswer: false,
+        });
+        document.getElementById('content').value = '';
+    }
+
+    giveUp = (event) => {
+        this.setState({
+            continue: true,
+            showAnswer: true,
+        });
     }
 
     playAudio = () => {
         const utterance = new SpeechSynthesisUtterance();
         utterance.text = this.getCurrentSentence();
         utterance.lang = 'en-US';
-        utterance.rate = 1.2;
+        utterance.rate = 1;
         speechSynthesis.speak(utterance);
     }
 
@@ -131,7 +152,9 @@ export class TextToSpeech extends Component {
             const grade = await response.json();
             // this.setState({ pictureBookWords });
             console.log(grade);
+
             this.setState({grade: grade, graded: true});
+            this.setState({continue: grade['isCorrect']});
         } catch (e) {
             console.log(e);
         }
@@ -155,20 +178,6 @@ export class TextToSpeech extends Component {
     //     this.setState({ starredCards, cardIndex: currentIndex });
     // }
 
-    handleKeyDown = (e) => {
-        if (['ArrowLeft', 'ArrowRight'].includes(e.code)) {
-            e.preventDefault();
-            const { code } = e;
-            if (code === 'ArrowLeft') {
-                this.changeSentence(-1);
-            } else if (code === 'ArrowRight') {
-                this.changeSentence(1);
-            } else if (code === 'Space') {
-                this.playAudio();
-            }
-        }
-    }
-
     modalHandler = (event) => {
         event.preventDefault();
         this.setState({
@@ -188,22 +197,26 @@ export class TextToSpeech extends Component {
     giveGrade = () => {
         const words = [];
         for (let i = 0; i < this.state.grade['length']; i++) {
+            // let word = this.state.grade[i]['word']
             if (this.state.grade[i]['grade'] === 'correct') {
                 // const color = '#3ED7AF';
                 words.push(
-                    <span style='color: #3ED7AF'>{this.state.grade[i]['word']}</span>
+                    <span className="correct-word">{this.state.grade[i]['word']}&nbsp;</span>
                 );
             } else {
                 // const color = '#F64F4F';
                 words.push(
-                    <span style='color: #F64F4F'>{this.state.grade[i]['word']}</span>
+                    <span className="incorrect-word">{this.state.grade[i]['word']}&nbsp;</span>
+                    // <span style='color: #F64F4F'>{this.state.grade[i]['word']}</span>
                 );
             }
+        }
+        return words;
+        // return <p>i am trying</p>;
             // words.push(
             //     <span style='color: color} >{this.state.grade[i]['word']}</span>
             // );
             // if incorrect, color == this
-        }
     }
 
     render() {
@@ -231,110 +244,6 @@ export class TextToSpeech extends Component {
         //
         //                   </div>;
 
-        const flipcard =
-                <div>
-                    <div className="flashcard-star-back"
-                       onClick={this.playAudio}>
-                       {playButton('yellow')}
-                    </div>
-                    <div className="flashcard-div row center">
-                        <div className="flashcard-arrows col-1 text-right"
-                            onClick={() => this.changeSentence(-1)}
-                        >
-                                &#60;
-                        </div>
-                        <div className="flashcard-arrows col-1"
-                             onClick={() => this.changeSentence(1)}
-                        >
-                            &#62;
-                        </div>
-                    </div>
-                </div>;
-        // const flipcard = <div>{this.getCurrentSentence()}</div>;
-
-        // <div className="flashcard-error">You do not have any starred cards</div>;
-        // const flipcard = card
-        //     ? (
-        //         <div className="flashcard-div row">
-        //             <div
-        //                 className="flashcard-arrows col-1 text-right"
-        //                 onClick={() => this.changeCard(-1)}
-        //             >
-        //                 &#60;
-        //             </div>
-        //             <div className={`flip-card col ${showBack ? 'showBack' : ''}
-        //                 ${showNext ? 'showNext' : ''}`}>
-        //                 <div
-        //                     className="flip-card-inner">
-        //                     <div className="flip-card-front">
-        //                         <div className="row">
-        //                             <div className="col-1" onClick={this.flipCard}>
-        //                             </div>
-        //                             <div className="col text-center-front" onClick={this.flipCard}>
-        //                                 <img className="flashcard-image"
-        //                                     src={card.url} alt={card.word.toUpperCase()}/>
-        //                             </div>
-        //                             <div className="col-1 mx-2">
-        //                                 <div className="flashcard-star-front"
-        //                                     onClick={this.toggleStar}>
-        //                                     {this.isStarred(starOnly
-        //                                         ? starredCards[sentenceIndex] : sentenceIndex)
-        //                                         ? filledStar('yellow')
-        //                                         : star('white')
-        //                                     }
-        //                                 </div>
-        //                                 <div className="flashcard-star-buffer"
-        //                                     onClick={this.flipCard}>
-        //                                 </div>
-        //                             </div>
-        //                         </div>
-        //                         <h3 className="click-to-flip" onClick={this.flipCard}>
-        //                             Click to flip
-        //                         </h3>
-        //
-        //                     </div>
-        //
-        //                     <div className="flip-card-back">
-        //                         <div className="row">
-        //                             <div className="col-1" onClick={this.flipCard}>
-        //                             </div>
-        //                             <div className="col text-center" onClick={this.flipCard}>
-        //                                 <h1 className='flashcard-word'>
-        //                                     {card.word.toUpperCase()}
-        //                                 </h1>
-        //                                 <h2 className="flashcard-info">
-        //                                     <b><u>Definition:</u></b> {card.definition[0]}
-        //                                 </h2>
-        //                                 <h2 className="flashcard-info">
-        //                                     <b><u>Example:</u></b> <i>"{card.example[0]}"</i>
-        //                                 </h2>
-        //                             </div>
-        //                             <div className="col-1 mx-2">
-        //                                 <div className="flashcard-star-back"
-        //                                     onClick={this.toggleStar}>
-        //                                     {this.isStarred(starOnly
-        //                                         ? starredCards[sentenceIndex] : sentenceIndex)
-        //                                         ? filledStar('yellow')
-        //                                         : star('white')
-        //                                     }
-        //                                 </div>
-        //                                 <div className="flashcard-star-buffer"
-        //                                     onClick={this.flipCard}>
-        //                                 </div>
-        //                             </div>
-        //                         </div>
-        //                         <h3 className="click-to-flip" onClick={this.flipCard}>
-        //                             Click to flip
-        //                         </h3>
-        //                     </div>
-        //                 </div>
-        //             </div>
-        //             <div className="flashcard-arrows col-1" onClick={() => this.changeCard(1)}>
-        //                 &#62;
-        //             </div>
-        //         </div>)
-        //     : <div className="flashcard-error">You do not have any starred cards</div>;
-
         /* Actual Return statement */
         return (
             <>
@@ -393,65 +302,85 @@ export class TextToSpeech extends Component {
                         </div>
                     </div>
                     <div>
-                        {
-                            this.state.graded
-                            ? this.giveGrade()
-                                : <div> Submit Grade </div>
-                        }
-
+                        <div className="play audio"
+                           onClick={this.playAudio}>
+                           {playButton('yellow')}
+                        </div>
                     </div>
-                    {flipcard}
+                    {
+                        this.state.graded
+                        ? this.giveGrade()
+                        : null
+                    }
+                    {
+                        this.state.showAnswer
+                        ? (
+                            <div>
+                                <p>This is the correct answer:</p>
+                                <p>{this.getCurrentSentence()}</p>
+                            </div>
+                        )
+                        : null
+                    }
                     <div className='row'>
                         <div className="col box">
                             <form id='input-form'>
                                 <div className="form-group">
                                     <label>Please write exactly what you hear from the audio.</label>
-                                    <textarea className="form-control text-input"
-                                            id="content"
-                                            rows="10"
-                                    >
+                                    <textarea
+                                        className="form-control text-input"
+                                        id="content"
+                                        rows="10"
+                                        disabled={this.state.continue}>
                                     </textarea>
-                                    <div>
-                                        Here is the current sentence in text form:
-                                    </div>
-                                    <div>
-                                        {this.getCurrentSentence()}
-                                    </div>
-                                    <div>
-                                        Here is your submission:
-                                    </div>
-                                    <div>
-                                        {this.state.userText}
-                                    </div>
-                                    <div>
-                                        Here is the grade:
-                                    </div>
-                                    <div>
-                                        {
-                                            this.state.graded
-                                                // ? this.state.grade.map((grade) => <div>{grade.name}</div>)
-                                                // ? Object.entries(this.state.grade).map((key) => <div> key={key} {this.state.grade.key}</div>)
-                                                // ? {
-                                                //     for (const [key, value] of Object.entries(this.state.grade)) {
-                                                //       key: {key}: value: {value}
-                                                //     }
-                                                // }
-                                                ? 'is working on displaying grade'
-                                                : 'Not submitted yet'
-                                        }
-
-                                    </div>
                                 </div>
                             </form>
                         </div>
-                            <div className='col-xl-4 text-right bottom-align-text' id="submit-btn-div">
+                        <div className='col-2 text-right bottom-align-text' id="submit-btn-div">
+                            <button type="submit"
+                                className="btn btn-success submit-btn"
+                                form="picturebook-form"
+                                onClick={this.handleSubmit}
+                                disabled={this.state.continue}>
+                                Submit
+                            </button>
+                        </div>
+                    </div>
+                    <div>
+                        {
+                            this.state.continue
+                            ? (
+                                <div className="row">
+                                  <button type="submit"
+                                      className="btn btn-success give-up-btn col-6 text-middle bottom-align-text hide-button"
+                                      form="picturebook-form">
+                                      Give Up
+                                  </button>
+                                  <button type="submit"
+                                      className="btn btn-success continue-btn col-6 text-middle bottom-align-text"
+                                      form="picturebook-form"
+                                      onClick={() => this.changeSentence(1)}>
+                                      Next
+                                  </button>
+                                </div>
+
+                            )
+                            : (
+                              <div className="row">
                                 <button type="submit"
-                                    className="btn btn-success submit-btn"
+                                    className="btn btn-success give-up-btn col-6 text-middle bottom-align-text"
                                     form="picturebook-form"
-                                    onClick={this.handleSubmit}>
-                                    Submit
+                                    onClick={this.giveUp}>
+                                    Give Up
                                 </button>
-                        </div>
+                                <button type="submit"
+                                    className="btn btn-success continue-btn col-6 text-middle bottom-align-text hide-button"
+                                    form="picturebook-form">
+                                    Next
+                                </button>
+                              </div>
+                            )
+                        }
                     </div>
                 </div>
                 <Footer/>
diff --git a/frontend/src/textToSpeech/textToSpeech.scss b/frontend/src/textToSpeech/textToSpeech.scss
index 6a7cab9..f8c9188 100644
--- a/frontend/src/textToSpeech/textToSpeech.scss
+++ b/frontend/src/textToSpeech/textToSpeech.scss
@@ -1 +1,14 @@
 /* Styles for the text to speech page */
+.correct-word {
+    color: #3ED7AF;
+    // font-size: 60px;
+    // font-weight: bold;
+}
+
+.incorrect-word {
+    color: #F64F4F;
+}
+
+.hide-button {
+    visibility: hidden;
+}

From b63c9b2897a0281f537bce5f4345f37d28f6498f Mon Sep 17 00:00:00 2001
From: taokinbo <70776613+taokinbo@users.noreply.github.com>
Date: Fri, 21 May 2021 19:25:20 -0400
Subject: [PATCH 20/27] Added missing words and improved display

---
 frontend/src/textToSpeech/textToSpeech.js   | 126 ++++++++++++++------
 frontend/src/textToSpeech/textToSpeech.scss | 102 +++++++++++++++-
 2 files changed, 187 insertions(+), 41 deletions(-)

diff --git a/frontend/src/textToSpeech/textToSpeech.js b/frontend/src/textToSpeech/textToSpeech.js
index b266727..4a153f4 100644
--- a/frontend/src/textToSpeech/textToSpeech.js
+++ b/frontend/src/textToSpeech/textToSpeech.js
@@ -201,22 +201,40 @@ export class TextToSpeech extends Component {
             if (this.state.grade[i]['grade'] === 'correct') {
                 // const color = '#3ED7AF';
                 words.push(
-                    <span className="correct-word">{this.state.grade[i]['word']}&nbsp;</span>
+                    <span className="correct-word">{this.state.grade[i]['word']}</span>
                 );
+                words.push(<span> </span>);
             } else {
                 // const color = '#F64F4F';
                 words.push(
-                    <span className="incorrect-word">{this.state.grade[i]['word']}&nbsp;</span>
+                    <span className="incorrect-word">{this.state.grade[i]['word']}</span>
+
                     // <span style='color: #F64F4F'>{this.state.grade[i]['word']}</span>
                 );
+                words.push(<span> </span>);
             }
         }
         return words;
-        // return <p>i am trying</p>;
-            // words.push(
-            //     <span style='color: color} >{this.state.grade[i]['word']}</span>
-            // );
-            // if incorrect, color == this
+    }
+
+    giveMissingWords = () => {
+        console.log('missing words was called');
+        console.log(this.state.grade['missing']);
+        console.log(this.state.grade['missing'].length);
+        const words = [];
+        for (let i = 0; i < this.state.grade['missing'].length; i++) {
+            words.push(
+                    <p className="missing-words">{this.state.grade['missing'][i]}</p>
+            );
+        }
+
+        this.shuffle(words);
+        return words;
+        // return 'missing words was called';
+    }
+
+    shuffle = async (arr) => {
+        arr.sort(() => Math.random() - 0.5);
     }
 
     render() {
@@ -236,15 +254,14 @@ export class TextToSpeech extends Component {
             ? 'No Sentences Available'
             : `${sentenceIndex + 1}/${sentenceLength} Words`;
 
-        /* Generate Flashcard */
-        const card = this.getCurrentSentence();
-        // const flipcard = <div className="flashcard-star-back"
-        //                        onClick={this.playAudio}>
-        //                        {playButton('yellow')}
-        //
-        //                   </div>;
 
         /* Actual Return statement */
+        let missingWords = null;
+        if (this.state.graded) {
+            missingWords = this.giveMissingWords();
+            // const missingWordsLength = missingWords.len
+        }
+
         return (
             <>
                 <Navbar/>
@@ -253,7 +270,7 @@ export class TextToSpeech extends Component {
                         <div className='col-xl-8 col-md-6 col-12 text-center text-md-left'>
                             <h1 className='flashcard-title'>Sentence</h1>
                             <button
-                                className="btn btn-outline-light btn-circle flashcard-instruction"
+                                className="btn btn-outline-light btn-circle instruction"
                                 onClick={this.modalHandler}>
                                 <b>?</b>
                             </button>
@@ -278,7 +295,10 @@ export class TextToSpeech extends Component {
                                     </button>
                                 </div>
                                 <div className="modal-body">
-                                    <p></p>
+                                    <p>Click the play button to hear the
+                                    sentence. After, type exactly what you hear.
+                                     Press submit to see your score! Press give
+                                     up if you want the correct answer.</p>
                                 </div>
                                 <div className="modal-footer">
                                     <button type="button" className="btn btn-secondary"
@@ -301,27 +321,55 @@ export class TextToSpeech extends Component {
                             </div>
                         </div>
                     </div>
-                    <div>
-                        <div className="play audio"
-                           onClick={this.playAudio}>
-                           {playButton('yellow')}
+                    <div className='row answer'>
+                        <div className="col-1">
+                            <div className="play audio"
+                               onClick={this.playAudio}>
+                               {playButton('pink')}
+                            </div>
+                            <div className="play-button-buffer">
+                                {null}
+                            </div>
                         </div>
-                    </div>
-                    {
-                        this.state.graded
-                        ? this.giveGrade()
-                        : null
-                    }
-                    {
-                        this.state.showAnswer
-                        ? (
-                            <div>
-                                <p>This is the correct answer:</p>
-                                <p>{this.getCurrentSentence()}</p>
+                        <div className='col-8 box-answer'>
+                            <h2 className='grade-text para'>Here is your grade:</h2>
+                            {
+                                this.state.graded
+                                ? this.giveGrade()
+                                : <p>You have not submitted yet</p>
+                            }
+                            {
+                                this.state.showAnswer
+                                ? (
+                                    <div>
+                                        <br/>
+                                        <h2 className='para'>This is the correct answer:</h2>
+                                        <p>{this.getCurrentSentence()}</p>
+                                    </div>
+                                )
+                                : null
+                            }
+                        </div>
+                        <div className='col-3'>
+                            <div className='box-missing-words'>
+                                <h2 className='para'>Missing Words:</h2>
+                                {
+                                    this.state.graded
+                                    ? (
+                                        <div className='row'>
+                                            <div className='col missing-words-list'>
+                                                {missingWords.slice(0, Math.round(missingWords.length / 2))}
+                                            </div>
+                                            <div className='col missing-words-list'>
+                                                {missingWords.slice(Math.round(missingWords.length / 2), missingWords.length)}
+                                            </div>
+                                        </div>
+                                    )
+                                    : null
+                                }
                             </div>
-                        )
-                        : null
-                    }
+                        </div>
+                    </div>
                     <div className='row'>
                         <div className="col box">
                             <form id='input-form'>
@@ -336,9 +384,9 @@ export class TextToSpeech extends Component {
                                 </div>
                             </form>
                         </div>
-                        <div className='col-2 text-right bottom-align-text' id="submit-btn-div">
+                        <div className='col-2 sub-div' id="submit-btn-div">
                             <button type="submit"
-                                className="btn btn-success submit-btn"
+                                className= 'btn btn-success submit-btn text-middle'
                                 form="picturebook-form"
                                 onClick={this.handleSubmit}
                                 disabled={this.state.continue}>
@@ -350,7 +398,7 @@ export class TextToSpeech extends Component {
                         {
                             this.state.continue
                             ? (
-                                <div className="row">
+                                <div className="row bot-but">
                                   <button type="submit"
                                       className="btn btn-success give-up-btn col-6 text-middle bottom-align-text hide-button"
                                       form="picturebook-form">
@@ -366,7 +414,7 @@ export class TextToSpeech extends Component {
 
                             )
                             : (
-                              <div className="row">
+                              <div className="row bot-but">
                                 <button type="submit"
                                     className="btn btn-success give-up-btn col-6 text-middle bottom-align-text"
                                     form="picturebook-form"
diff --git a/frontend/src/textToSpeech/textToSpeech.scss b/frontend/src/textToSpeech/textToSpeech.scss
index f8c9188..2bdaedd 100644
--- a/frontend/src/textToSpeech/textToSpeech.scss
+++ b/frontend/src/textToSpeech/textToSpeech.scss
@@ -1,14 +1,112 @@
 /* Styles for the text to speech page */
 .correct-word {
-    color: #3ED7AF;
-    // font-size: 60px;
+    color: #28a745;
+    // font-size: 25px;
     // font-weight: bold;
 }
 
 .incorrect-word {
     color: #F64F4F;
+    // font-size: 25px;
+    // font-weight: bold;
 }
 
 .hide-button {
     visibility: hidden;
 }
+
+.box {
+    background: #5941A9;
+    border-radius: 1vh;
+    margin: 5vh 1vw 3vh 1vw;
+    padding: 2vh;
+    width: 100%;
+}
+
+.box-answer{
+    background: #E8C2FF;
+    border-radius: 1vh;
+    padding: 1vh 2vh 0vh 2vh;
+    width: 100%;
+    color: #5941A9;
+    font-size: 25px;
+    // margin-right: 1vh;
+    // font-weight: bold;
+}
+
+.box-missing-words{
+    background: #E8C2FF;
+    border-radius: 1vh;
+    padding: 1vh 2vh 0vh 2vh;
+    width: 100%;
+    color: #5941A9;
+    font-size: 20px;
+    height: 100%;
+
+    // margin-left: 1vh;
+    // font-weight: bold;
+}
+
+.play-button-buffer {
+    height: 100%;
+}
+
+.grade-text{
+    color: #2D2155;
+}
+
+.para {
+    margin: 0vh;
+}
+
+.submit-btn {
+    background-color: #28a745;
+    color: white;
+    width: 100%;
+}
+
+.sub-div {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.instruction {
+    border: 3px solid;
+    font-size: 20px;
+    width: 35px;
+    height: 35px;
+    margin: -25px 10px 0;
+    padding: 0;
+}
+
+.bot-but {
+    margin: 0;
+}
+
+.popup {
+    color: #000;
+    background-color: #c0c0c0;
+}
+
+.popup-word {
+	position: relative;
+	display: block;
+	width: 130px;
+	line-height: 30px;
+	text-align: right;
+	padding: 0 10px;
+	margin: 0;
+	border: 1px solid #666;
+	text-decoration: none;
+	font-size: 1em;
+	font-weight: bold;
+}
+
+.popup-word-grade {
+	display: none;
+}
+
+.popup-word-grade:hover {
+	background-color: #e9e9e2;
+}

From 0fef2c76733ee356ae77a12323efdfe53c19b8ce Mon Sep 17 00:00:00 2001
From: taokinbo <70776613+taokinbo@users.noreply.github.com>
Date: Fri, 21 May 2021 19:53:48 -0400
Subject: [PATCH 21/27] fixed linter issues

---
 frontend/src/index/index.js               |   2 +-
 frontend/src/textToSpeech/textToSpeech.js | 199 +++++++++-------------
 2 files changed, 79 insertions(+), 122 deletions(-)

diff --git a/frontend/src/index/index.js b/frontend/src/index/index.js
index d996027..530993d 100644
--- a/frontend/src/index/index.js
+++ b/frontend/src/index/index.js
@@ -14,7 +14,7 @@ const QUIZ_TYPES = {
     'Quiz': ['quiz', idLink],
     'Crossword': ['crossword', posLink],
     'Story Generator': ['picturebook', posLink],
-    'TextToSpeech': ['textToSpeech', idLink]
+    'TextToSpeech': ['textToSpeech', idLink],
 };
 
 class TextInfo extends React.Component {
diff --git a/frontend/src/textToSpeech/textToSpeech.js b/frontend/src/textToSpeech/textToSpeech.js
index 4a153f4..396432f 100644
--- a/frontend/src/textToSpeech/textToSpeech.js
+++ b/frontend/src/textToSpeech/textToSpeech.js
@@ -3,9 +3,9 @@ import * as PropTypes from 'prop-types';
 
 import { Footer, Navbar, LoadingPage } from '../UILibrary/components';
 
-const capitalize = (word) => {
-    return word.charAt(0).toUpperCase() + word.slice(1);
-};
+// const capitalize = (word) => {
+//     return word.charAt(0).toUpperCase() + word.slice(1);
+// };
 
 // const synth = window.speechSynthesis;
 
@@ -22,7 +22,8 @@ const playButton = (color) => {
                 points="9.33 6.69 9.33 19.39 19.3 13.04 9.33 6.69"
             />
             <path
-                d="M26,13A13,13,0,1,1,13,0,13,13,0,0,1,26,13ZM13,2.18A10.89,10.89,0,1,0,23.84,13.06,10.89,10.89,0,0,0,13,2.18Z"
+                d={'M26,13A13,13,0,1,1,13,0,13,13,0,0,1,26,13ZM13,2.18A10.89,10.89'
+                + ',0,1,0,23.84,13.06,10.89,10.89,0,0,0,13,2.18Z'}
             />
         </svg>
     );
@@ -60,10 +61,6 @@ export class TextToSpeech extends Component {
     }
 
     getCurrentSentence = () => {
-        const {
-            sentenceIndex,
-            textData,
-        } = this.state;
         return this.state.textData[this.state.sentenceIndex]['sentence'];
     }
 
@@ -78,7 +75,7 @@ export class TextToSpeech extends Component {
         this.reset();
     }
 
-    reset = async (input) => {
+    reset = async () => {
         this.setState({
             showModal: false,
             userText: '',
@@ -90,7 +87,7 @@ export class TextToSpeech extends Component {
         document.getElementById('content').value = '';
     }
 
-    giveUp = (event) => {
+    giveUp = () => {
         this.setState({
             continue: true,
             showAnswer: true,
@@ -105,40 +102,15 @@ export class TextToSpeech extends Component {
         speechSynthesis.speak(utterance);
     }
 
-    // handleInput = (event) => {
-    //     const inputValue = event.target.value;
-    //     this.setState({
-    //         userText: inputValue,
-    //     });
-    //
-    //     // if (';,. '.includes(inputValue.slice(-1))) {
-    //     //     this.createPictureBook(inputValue);
-    //     // }
-    //     // console.log('this is the input value:');
-    //     // console.log(inputValue);
-    //     console.log('this is the state value:');
-    //     console.log(this.state.userText);
-    // };
-
-    handleSubmit = (event) => {
-        // const inputValue = ;
-        // this.setState({
-        //     userText: inputValue,
-        // });
+    handleSubmit = () => {
         const input = document.getElementById('content').value;
-        // if (';,. '.includes(inputValue.slice(-1))) {
         console.log('this is the input i want', input);
-        // const input = this.state.userText;  // + ';%20' + this.getCurrentSentence();
         this.setState({
             userText: input,
         });
         this.gradeText(input);
-        // this.createPictureBook(input);
-        // }
+
         console.log('You have submitted!!!');
-        // console.log(inputValue);
-        // console.log('this is the state value:');
-        // console.log(this.userText);
     };
 
     gradeText = async (input) => {
@@ -146,38 +118,18 @@ export class TextToSpeech extends Component {
         try {
             console.log('im trying something here');
             const apiURL = `/api/get_sentence_grade/${input}/${this.getCurrentSentence()}`;
-            // const apiURL = '/api/get_sentence_grade?content=' + input + '?content2=' + this.getCurrentSentence();
-            // const apiURL = '/api/get_picturebook_data?content=' + input;
             const response = await fetch(apiURL);
             const grade = await response.json();
             // this.setState({ pictureBookWords });
             console.log(grade);
 
-            this.setState({grade: grade, graded: true});
-            this.setState({continue: grade['isCorrect']});
+            this.setState({ grade: grade, graded: true });
+            this.setState({ continue: grade['isCorrect'] });
         } catch (e) {
             console.log(e);
         }
     }
 
-    // toggleStar = () => {
-    //     const { starredCards, starOnly, cardIndex } = this.state;
-    //     let currentIndex = starOnly ? starredCards[cardIndex] : cardIndex;
-    //     if (this.isStarred(currentIndex)) {
-    //         starredCards.splice(starredCards.indexOf(currentIndex), 1);
-    //         if (starOnly) {
-    //             if (starredCards.length > 0) {
-    //                 currentIndex %= starredCards.length;
-    //             } else {
-    //                 currentIndex = 0;
-    //             }
-    //         }
-    //     } else {
-    //         starredCards.push(this.state.cardIndex);
-    //     }
-    //     this.setState({ starredCards, cardIndex: currentIndex });
-    // }
-
     modalHandler = (event) => {
         event.preventDefault();
         this.setState({
@@ -201,15 +153,13 @@ export class TextToSpeech extends Component {
             if (this.state.grade[i]['grade'] === 'correct') {
                 // const color = '#3ED7AF';
                 words.push(
-                    <span className="correct-word">{this.state.grade[i]['word']}</span>
+                    <span className="correct-word">{this.state.grade[i]['word']}</span>,
                 );
                 words.push(<span> </span>);
             } else {
                 // const color = '#F64F4F';
                 words.push(
-                    <span className="incorrect-word">{this.state.grade[i]['word']}</span>
-
-                    // <span style='color: #F64F4F'>{this.state.grade[i]['word']}</span>
+                    <span className="incorrect-word">{this.state.grade[i]['word']}</span>,
                 );
                 words.push(<span> </span>);
             }
@@ -224,7 +174,7 @@ export class TextToSpeech extends Component {
         const words = [];
         for (let i = 0; i < this.state.grade['missing'].length; i++) {
             words.push(
-                    <p className="missing-words">{this.state.grade['missing'][i]}</p>
+                <p className="missing-words">{this.state.grade['missing'][i]}</p>,
             );
         }
 
@@ -240,7 +190,6 @@ export class TextToSpeech extends Component {
     render() {
         const {
             textData,
-            showNext,
             sentenceIndex,
         } = this.state;
 
@@ -256,9 +205,9 @@ export class TextToSpeech extends Component {
 
 
         /* Actual Return statement */
-        let missingWords = null;
+        let missingWord = null;
         if (this.state.graded) {
-            missingWords = this.giveMissingWords();
+            missingWord = this.giveMissingWords();
             // const missingWordsLength = missingWords.len
         }
 
@@ -324,8 +273,8 @@ export class TextToSpeech extends Component {
                     <div className='row answer'>
                         <div className="col-1">
                             <div className="play audio"
-                               onClick={this.playAudio}>
-                               {playButton('pink')}
+                                onClick={this.playAudio}>
+                                {playButton('pink')}
                             </div>
                             <div className="play-button-buffer">
                                 {null}
@@ -335,19 +284,19 @@ export class TextToSpeech extends Component {
                             <h2 className='grade-text para'>Here is your grade:</h2>
                             {
                                 this.state.graded
-                                ? this.giveGrade()
-                                : <p>You have not submitted yet</p>
+                                    ? this.giveGrade()
+                                    : <p>You have not submitted yet</p>
                             }
                             {
                                 this.state.showAnswer
-                                ? (
-                                    <div>
-                                        <br/>
-                                        <h2 className='para'>This is the correct answer:</h2>
-                                        <p>{this.getCurrentSentence()}</p>
-                                    </div>
-                                )
-                                : null
+                                    ? (
+                                        <div>
+                                            <br/>
+                                            <h2 className='para'>This is the correct answer:</h2>
+                                            <p>{this.getCurrentSentence()}</p>
+                                        </div>
+                                    )
+                                    : null
                             }
                         </div>
                         <div className='col-3'>
@@ -355,17 +304,19 @@ export class TextToSpeech extends Component {
                                 <h2 className='para'>Missing Words:</h2>
                                 {
                                     this.state.graded
-                                    ? (
-                                        <div className='row'>
-                                            <div className='col missing-words-list'>
-                                                {missingWords.slice(0, Math.round(missingWords.length / 2))}
-                                            </div>
-                                            <div className='col missing-words-list'>
-                                                {missingWords.slice(Math.round(missingWords.length / 2), missingWords.length)}
+                                        ? (
+                                            <div className='row'>
+                                                <div className='col missing-words-list'>
+                                                    {missingWord.slice(0,
+                                                        Math.round(missingWord.length / 2))}
+                                                </div>
+                                                <div className='col missing-words-list'>{
+                                                    missingWord.slice(Math.round(missingWord.length
+                                                        / 2), missingWord.length)}
+                                                </div>
                                             </div>
-                                        </div>
-                                    )
-                                    : null
+                                        )
+                                        : null
                                 }
                             </div>
                         </div>
@@ -374,7 +325,9 @@ export class TextToSpeech extends Component {
                         <div className="col box">
                             <form id='input-form'>
                                 <div className="form-group">
-                                    <label>Please write exactly what you hear from the audio.</label>
+                                    <label>
+                                    Please write exactly what you hear from the audio.
+                                    </label>
                                     <textarea
                                         className="form-control text-input"
                                         id="content"
@@ -397,37 +350,41 @@ export class TextToSpeech extends Component {
                     <div>
                         {
                             this.state.continue
-                            ? (
-                                <div className="row bot-but">
-                                  <button type="submit"
-                                      className="btn btn-success give-up-btn col-6 text-middle bottom-align-text hide-button"
-                                      form="picturebook-form">
-                                      Give Up
-                                  </button>
-                                  <button type="submit"
-                                      className="btn btn-success continue-btn col-6 text-middle bottom-align-text"
-                                      form="picturebook-form"
-                                      onClick={() => this.changeSentence(1)}>
-                                      Next
-                                  </button>
-                                </div>
+                                ? (
+                                    <div className="row bot-but">
+                                        <button type="submit"
+                                            className={'btn btn-success give-up-btn col-6 '
+                                            + 'text-middle bottom-align-text hide-button'}
+                                            form="picturebook-form">
+                                            Give Up
+                                        </button>
+                                        <button type="submit"
+                                            className={'btn btn-success continue-btn col-6'
+                                            + ' text-middle bottom-align-text'}
+                                            form="picturebook-form"
+                                            onClick={() => this.changeSentence(1)}>
+                                            Next
+                                        </button>
+                                    </div>
 
-                            )
-                            : (
-                              <div className="row bot-but">
-                                <button type="submit"
-                                    className="btn btn-success give-up-btn col-6 text-middle bottom-align-text"
-                                    form="picturebook-form"
-                                    onClick={this.giveUp}>
-                                    Give Up
-                                </button>
-                                <button type="submit"
-                                    className="btn btn-success continue-btn col-6 text-middle bottom-align-text hide-button"
-                                    form="picturebook-form">
-                                    Next
-                                </button>
-                              </div>
-                            )
+                                )
+                                : (
+                                    <div className="row bot-but">
+                                        <button type="submit"
+                                            className={'btn btn-success give-up-btn col-6'
+                                            + ' text-middle bottom-align-text'}
+                                            form="picturebook-form"
+                                            onClick={this.giveUp}>
+                                            Give Up
+                                        </button>
+                                        <button type="submit"
+                                            className={'btn btn-success continue-btn '
+                                            + 'col-6 text-middle bottom-align-text hide-button'}
+                                            form="picturebook-form">
+                                            Next
+                                        </button>
+                                    </div>
+                                )
                         }
                     </div>
                 </div>
@@ -437,5 +394,5 @@ export class TextToSpeech extends Component {
     }
 }
 TextToSpeech.propTypes = {
-    textID: PropTypes.number
+    textID: PropTypes.number,
 };

From 28d0e2e9e4bd6d5293bf9bd9b13951985dd05849 Mon Sep 17 00:00:00 2001
From: adanna-a <70187411+adanna-a@users.noreply.github.com>
Date: Sat, 22 May 2021 03:54:53 -0400
Subject: [PATCH 22/27] comment text_parser

---
 backend/app/analysis/text_parser.py       | 118 +++++++++++-----------
 frontend/src/textToSpeech/textToSpeech.js |   6 --
 2 files changed, 57 insertions(+), 67 deletions(-)

diff --git a/backend/app/analysis/text_parser.py b/backend/app/analysis/text_parser.py
index eba97a7..1478a61 100644
--- a/backend/app/analysis/text_parser.py
+++ b/backend/app/analysis/text_parser.py
@@ -17,45 +17,63 @@ def get_sentences(text):
     """
 
     sentences = nltk.tokenize.sent_tokenize(text.replace("\n", " "))
-    # text_paragraph = text_obj.content
-    # temp_sentences = text_paragraph.split(".")
-    #
-    # sentences = []
-    # for sent in temp_sentences:
-    #     sentences.extend(sent.split("!"))
-
-    print(sentences)
+
     return sentences
 
 
 def correct_sentence(given_sent, correct_sent):
+    """
+    Function takes the user's sentence and the correct sentence and compares them to find missing
+    words, the incorrect words, and a grade
+
+    :param given_sent: str, sentence the user types into the text box
+    :param correct_sent: str, the correct sentence that the instructor inputs
+    :return: dictionary with parameters holding the missing words, correct words, length of user
+             input, word/correctness at each index,
+
+    """
+
     grade = {}
-    print(given_sent.translate(str.maketrans('', '', string.punctuation)))
+
+    # tokenize given_sent and correct_sent and turn them both into lists
     given_tok = nltk.tokenize.word_tokenize(given_sent.lower().translate(
         str.maketrans('', '', string.punctuation)))
     correct_tok = nltk.tokenize.word_tokenize(correct_sent.lower().translate(
         str.maketrans('', '', string.punctuation)))
 
     words_missing = correct_tok.copy()
+
     for word in given_tok:
         if words_missing.count(word) != 0:
+            # remove the words that the user typed in to get the missing words
             words_missing.remove(word)
 
+    # hold all the missing words
     grade["missing"] = words_missing
+
     incorrect_word_index = []
 
+    # hold the length of the users input
     grade["length"] = len(given_tok)
+
+    # True if the user inputs the same sentence as the correct answer
     grade["isCorrect"] = given_tok == correct_tok
 
     index = 0
     for ind_1, word in enumerate(given_tok):
+
         match_found = False
+
+        # loop until the match is found or all words are looked at and no match is found
         for ind_2, match in enumerate(correct_tok[index:]):
-            # print(word, match)
+
             if word == match:
                 match_found = True
                 match_index = ind_2 + index
                 break
+
+        # if the match is found then the grade is correct, incorrect otherwise
+        # increase match_index by 1 if the match is found
         if match_found:
             grade[ind_1] = {"word": word,
                             "grade": "correct"}
@@ -65,42 +83,69 @@ def correct_sentence(given_sent, correct_sent):
             grade[ind_1] = {"word": word,
                             "grade": "incorrect"}
 
+    # incorrect indices
     for word_index in incorrect_word_index:
+
+        # find a similar word
         sim_word = most_similar_word(given_tok[word_index], words_missing)
+
+
         if sim_word is not None:
             word_grade = correct_words(given_tok[word_index], sim_word)
             grade[word_index]["word_grade"] = word_grade
+
     return grade
 
 
 def most_similar_word(word, comparisons):
+    """
+    Take a word and find the most similar word in a given list
+    :param word: string with one word
+    :param comparisons: list of words
+    :return: string, most similar word in comparisons to word
+    """
     min_lev_val = None
     min_lev_word = None
 
+    # check the missing words and see how similar they are
     for current_word in comparisons:
         current_val = Lev.distance(word, current_word)
+
+        # see if the word is less or more similar
         if min_lev_val == None or min_lev_val > current_val:
             min_lev_val = current_val
             min_lev_word = current_word
+
+    # return the most similar word
     return min_lev_word
 
 
 def correct_words(given_word, correct_word):
+    """
+    Determine which letters in a input word are correct and incorrect
+    :param given_word: string with one word, the incorrect word from the user's input
+    :param correct_word: string with one word, the similar word that is correct
+    :return:
+    """
     grade = {}
 
     char_missing = []
+
     char_missing[:0] = correct_word
+
+    # remove the character if the character is there, find out how many are missing
     for char in given_word:
         if char_missing.count(char) != 0:
             char_missing.remove(char)
 
-    grade["missing"] = list(char_missing)
 
+    grade["missing"] = list(char_missing)
+    # for each character, hold whether it is correct or incorrect
     index = 0
     for ind_1, char in enumerate(given_word):
         match_found = False
         for ind_2, match in enumerate(correct_word[index:]):
-            # print(word, match)
+
             if char == match:
                 match_found = True
                 match_index = ind_2 + index
@@ -114,52 +159,3 @@ def correct_words(given_word, correct_word):
                             "grade": "incorrect"}
 
     return grade
-
-
-if __name__ == '__main__':
-    actual = "i like soup"
-    given = "i like, soop"
-    print(actual, given)
-    print(correct_sentence(given, actual))
-
-    # actual = ["i like soup", "soup likes me", "EOM"]
-    #
-    # res = [{'sentence': sentence} for sentence in actual]
-    # print(res)
-
-    # part_of_speech = ['noun', 'verb', 'adjective', 'adverb']
-    #
-    # # Reused the old image url dictionary if we are not getting all of the urls
-    # word_urls = {}
-    # word_definitions = {}
-    # word_examples = {}
-
-    # for pos in part_of_speech:
-    #     print("Getting definitions and examples for " + pos + " in the text " +
-    #           text_obj.title + "... (This might take a while)")
-    #     words = get_valid_words(text_obj.content.lower(), pos)
-    #     definitions = get_word_definition(words, pos)
-    #     examples = get_word_examples(words, pos, text_obj.content.lower())
-    #
-    #     print("Updating database for " + pos + " in the text " + text_obj.title)
-    #     for word in tqdm.tqdm(words):
-    #         word = word.lower()
-    #         if word not in word_urls:
-    #             image_url = get_bing_image_url(word)
-    #             if image_url is not None:
-    #                 word_urls[word.lower()] = image_url
-    #
-    #         if word not in word_definitions:
-    #             word_definitions[word] = {pos: definitions[word]}
-    #         else:
-    #             word_definitions[word][pos] = definitions[word]
-    #
-    #         if word not in word_examples:
-    #             word_examples[word] = {pos: examples[word]}
-    #         else:
-    #             word_examples[word][pos] = examples[word]
-    #
-    # text_obj.images = word_urls
-    # text_obj.definitions = word_definitions
-    # text_obj.examples = word_examples
-    # text_obj.save()
diff --git a/frontend/src/textToSpeech/textToSpeech.js b/frontend/src/textToSpeech/textToSpeech.js
index 396432f..63fd160 100644
--- a/frontend/src/textToSpeech/textToSpeech.js
+++ b/frontend/src/textToSpeech/textToSpeech.js
@@ -3,12 +3,6 @@ import * as PropTypes from 'prop-types';
 
 import { Footer, Navbar, LoadingPage } from '../UILibrary/components';
 
-// const capitalize = (word) => {
-//     return word.charAt(0).toUpperCase() + word.slice(1);
-// };
-
-// const synth = window.speechSynthesis;
-
 const playButton = (color) => {
     return (
         <svg

From cd1fcc22d225f70b69d1fa0270c7dcc1ab0e728f Mon Sep 17 00:00:00 2001
From: adanna-a <70187411+adanna-a@users.noreply.github.com>
Date: Sat, 22 May 2021 09:55:59 -0400
Subject: [PATCH 23/27] code clean up/commenting

---
 backend/app/analysis/text_parser.py         | 12 +++++-------
 frontend/src/textToSpeech/textToSpeech.js   |  9 ---------
 frontend/src/textToSpeech/textToSpeech.scss |  9 ---------
 3 files changed, 5 insertions(+), 25 deletions(-)

diff --git a/backend/app/analysis/text_parser.py b/backend/app/analysis/text_parser.py
index 1478a61..fcbdfb3 100644
--- a/backend/app/analysis/text_parser.py
+++ b/backend/app/analysis/text_parser.py
@@ -5,8 +5,6 @@
 import string
 import Levenshtein as Lev
 
-# Ours
-
 
 # Modified Code from Bing library
 def get_sentences(text):
@@ -29,8 +27,7 @@ def correct_sentence(given_sent, correct_sent):
     :param given_sent: str, sentence the user types into the text box
     :param correct_sent: str, the correct sentence that the instructor inputs
     :return: dictionary with parameters holding the missing words, correct words, length of user
-             input, word/correctness at each index,
-
+             input, word/correctness at each index
     """
 
     grade = {}
@@ -86,10 +83,9 @@ def correct_sentence(given_sent, correct_sent):
     # incorrect indices
     for word_index in incorrect_word_index:
 
-        # find a similar word
+        # find the  most similar word
         sim_word = most_similar_word(given_tok[word_index], words_missing)
 
-
         if sim_word is not None:
             word_grade = correct_words(given_tok[word_index], sim_word)
             grade[word_index]["word_grade"] = word_grade
@@ -100,6 +96,7 @@ def correct_sentence(given_sent, correct_sent):
 def most_similar_word(word, comparisons):
     """
     Take a word and find the most similar word in a given list
+
     :param word: string with one word
     :param comparisons: list of words
     :return: string, most similar word in comparisons to word
@@ -123,6 +120,7 @@ def most_similar_word(word, comparisons):
 def correct_words(given_word, correct_word):
     """
     Determine which letters in a input word are correct and incorrect
+
     :param given_word: string with one word, the incorrect word from the user's input
     :param correct_word: string with one word, the similar word that is correct
     :return:
@@ -138,8 +136,8 @@ def correct_words(given_word, correct_word):
         if char_missing.count(char) != 0:
             char_missing.remove(char)
 
-
     grade["missing"] = list(char_missing)
+
     # for each character, hold whether it is correct or incorrect
     index = 0
     for ind_1, char in enumerate(given_word):
diff --git a/frontend/src/textToSpeech/textToSpeech.js b/frontend/src/textToSpeech/textToSpeech.js
index 63fd160..b1e5852 100644
--- a/frontend/src/textToSpeech/textToSpeech.js
+++ b/frontend/src/textToSpeech/textToSpeech.js
@@ -114,7 +114,6 @@ export class TextToSpeech extends Component {
             const apiURL = `/api/get_sentence_grade/${input}/${this.getCurrentSentence()}`;
             const response = await fetch(apiURL);
             const grade = await response.json();
-            // this.setState({ pictureBookWords });
             console.log(grade);
 
             this.setState({ grade: grade, graded: true });
@@ -143,15 +142,12 @@ export class TextToSpeech extends Component {
     giveGrade = () => {
         const words = [];
         for (let i = 0; i < this.state.grade['length']; i++) {
-            // let word = this.state.grade[i]['word']
             if (this.state.grade[i]['grade'] === 'correct') {
-                // const color = '#3ED7AF';
                 words.push(
                     <span className="correct-word">{this.state.grade[i]['word']}</span>,
                 );
                 words.push(<span> </span>);
             } else {
-                // const color = '#F64F4F';
                 words.push(
                     <span className="incorrect-word">{this.state.grade[i]['word']}</span>,
                 );
@@ -174,7 +170,6 @@ export class TextToSpeech extends Component {
 
         this.shuffle(words);
         return words;
-        // return 'missing words was called';
     }
 
     shuffle = async (arr) => {
@@ -191,18 +186,14 @@ export class TextToSpeech extends Component {
             return (<LoadingPage text='Loading Sentences...'/>);
         }
 
-        /* Generate Text On Top of Progress Bar */
         const sentenceLength = textData.length;
         const progressText = sentenceLength === 0
             ? 'No Sentences Available'
             : `${sentenceIndex + 1}/${sentenceLength} Words`;
 
-
-        /* Actual Return statement */
         let missingWord = null;
         if (this.state.graded) {
             missingWord = this.giveMissingWords();
-            // const missingWordsLength = missingWords.len
         }
 
         return (
diff --git a/frontend/src/textToSpeech/textToSpeech.scss b/frontend/src/textToSpeech/textToSpeech.scss
index 2bdaedd..c38bdf7 100644
--- a/frontend/src/textToSpeech/textToSpeech.scss
+++ b/frontend/src/textToSpeech/textToSpeech.scss
@@ -1,14 +1,10 @@
 /* Styles for the text to speech page */
 .correct-word {
     color: #28a745;
-    // font-size: 25px;
-    // font-weight: bold;
 }
 
 .incorrect-word {
     color: #F64F4F;
-    // font-size: 25px;
-    // font-weight: bold;
 }
 
 .hide-button {
@@ -30,8 +26,6 @@
     width: 100%;
     color: #5941A9;
     font-size: 25px;
-    // margin-right: 1vh;
-    // font-weight: bold;
 }
 
 .box-missing-words{
@@ -42,9 +36,6 @@
     color: #5941A9;
     font-size: 20px;
     height: 100%;
-
-    // margin-left: 1vh;
-    // font-weight: bold;
 }
 
 .play-button-buffer {

From 3f62955231e732a57eb14c1600bde40837cd53ce Mon Sep 17 00:00:00 2001
From: taokinbo <70776613+taokinbo@users.noreply.github.com>
Date: Sat, 22 May 2021 19:35:43 -0400
Subject: [PATCH 24/27] fixed linter issues

---
 backend/app/analysis/text_parser.py | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/backend/app/analysis/text_parser.py b/backend/app/analysis/text_parser.py
index fcbdfb3..cf45504 100644
--- a/backend/app/analysis/text_parser.py
+++ b/backend/app/analysis/text_parser.py
@@ -1,8 +1,8 @@
 """
 Custom command to populate text model with definition, examples, and images
 """
-import nltk
 import string
+import nltk
 import Levenshtein as Lev
 
 
@@ -38,15 +38,15 @@ def correct_sentence(given_sent, correct_sent):
     correct_tok = nltk.tokenize.word_tokenize(correct_sent.lower().translate(
         str.maketrans('', '', string.punctuation)))
 
-    words_missing = correct_tok.copy()
+    # hold all the correct words and removed every word that is found to hold only
+    # the missing words
+    grade["missing"] = correct_tok.copy()
 
     for word in given_tok:
-        if words_missing.count(word) != 0:
+        if grade["missing"].count(word) != 0:
             # remove the words that the user typed in to get the missing words
-            words_missing.remove(word)
+            grade["missing"].remove(word)
 
-    # hold all the missing words
-    grade["missing"] = words_missing
 
     incorrect_word_index = []
 
@@ -84,7 +84,7 @@ def correct_sentence(given_sent, correct_sent):
     for word_index in incorrect_word_index:
 
         # find the  most similar word
-        sim_word = most_similar_word(given_tok[word_index], words_missing)
+        sim_word = most_similar_word(given_tok[word_index], grade["missing"])
 
         if sim_word is not None:
             word_grade = correct_words(given_tok[word_index], sim_word)
@@ -109,7 +109,7 @@ def most_similar_word(word, comparisons):
         current_val = Lev.distance(word, current_word)
 
         # see if the word is less or more similar
-        if min_lev_val == None or min_lev_val > current_val:
+        if min_lev_val is None or min_lev_val > current_val:
             min_lev_val = current_val
             min_lev_word = current_word
 

From 065c8c15515334c1738ee04433bf697ee894322a Mon Sep 17 00:00:00 2001
From: taokinbo <70776613+taokinbo@users.noreply.github.com>
Date: Sat, 22 May 2021 19:38:10 -0400
Subject: [PATCH 25/27] fixed more linter issues

---
 backend/app/analysis/text_parser.py | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/backend/app/analysis/text_parser.py b/backend/app/analysis/text_parser.py
index cf45504..2e5f99c 100644
--- a/backend/app/analysis/text_parser.py
+++ b/backend/app/analysis/text_parser.py
@@ -48,7 +48,7 @@ def correct_sentence(given_sent, correct_sent):
             grade["missing"].remove(word)
 
 
-    incorrect_word_index = []
+    grade["incorrect_word_index"] = []
 
     # hold the length of the users input
     grade["length"] = len(given_tok)
@@ -76,12 +76,12 @@ def correct_sentence(given_sent, correct_sent):
                             "grade": "correct"}
             index = match_index + 1
         else:
-            incorrect_word_index.append(ind_1)
+            grade["incorrect_word_index"].append(ind_1)
             grade[ind_1] = {"word": word,
                             "grade": "incorrect"}
 
     # incorrect indices
-    for word_index in incorrect_word_index:
+    for word_index in grade["incorrect_word_index"]:
 
         # find the  most similar word
         sim_word = most_similar_word(given_tok[word_index], grade["missing"])

From a8701d914a7720fa2013bc3435e14dd1df479cc8 Mon Sep 17 00:00:00 2001
From: taokinbo <70776613+taokinbo@users.noreply.github.com>
Date: Mon, 24 May 2021 17:51:43 -0400
Subject: [PATCH 26/27] updated code to account for review

---
 backend/app/analysis/text_parser.py       | 44 +++++++++++++----------
 backend/app/views.py                      |  5 +--
 frontend/src/textToSpeech/textToSpeech.js | 27 +++++++-------
 3 files changed, 40 insertions(+), 36 deletions(-)

diff --git a/backend/app/analysis/text_parser.py b/backend/app/analysis/text_parser.py
index 2e5f99c..0149e1b 100644
--- a/backend/app/analysis/text_parser.py
+++ b/backend/app/analysis/text_parser.py
@@ -9,12 +9,19 @@
 # Modified Code from Bing library
 def get_sentences(text):
     """
-    Given a Text object, stores the definitions, examples, and image urls for all the words
-    in this text.
-    :param text: the Text object that we want to get sentences from
+    This function, when given a string of words, breaks it apart into individual
+    sentences through markers of sentence breaks and line breaks(\n)
+
+    :param text: str, any text
+    :return: list containing the fragments of the broken down text
     """
+    # breaks up text by line breaks first
+    lines = [p for p in text.split('\n') if p]
+    sentences = []
 
-    sentences = nltk.tokenize.sent_tokenize(text.replace("\n", " "))
+    # breaks up each line by sentence markers
+    for line in lines:
+        sentences.extend(nltk.tokenize.sent_tokenize(line))
 
     return sentences
 
@@ -26,8 +33,8 @@ def correct_sentence(given_sent, correct_sent):
 
     :param given_sent: str, sentence the user types into the text box
     :param correct_sent: str, the correct sentence that the instructor inputs
-    :return: dictionary with parameters holding the missing words, correct words, length of user
-             input, word/correctness at each index
+    :return: dictionary with parameters holding the missing words, correct words,
+        word/correctness at each index
     """
 
     grade = {}
@@ -50,15 +57,13 @@ def correct_sentence(given_sent, correct_sent):
 
     grade["incorrect_word_index"] = []
 
-    # hold the length of the users input
-    grade["length"] = len(given_tok)
-
     # True if the user inputs the same sentence as the correct answer
     grade["isCorrect"] = given_tok == correct_tok
 
+    grade["words"] = []
+
     index = 0
     for ind_1, word in enumerate(given_tok):
-
         match_found = False
 
         # loop until the match is found or all words are looked at and no match is found
@@ -72,13 +77,13 @@ def correct_sentence(given_sent, correct_sent):
         # if the match is found then the grade is correct, incorrect otherwise
         # increase match_index by 1 if the match is found
         if match_found:
-            grade[ind_1] = {"word": word,
-                            "grade": "correct"}
+            grade["words"].append({"word": word,
+                            "grade": "correct"})
             index = match_index + 1
         else:
             grade["incorrect_word_index"].append(ind_1)
-            grade[ind_1] = {"word": word,
-                            "grade": "incorrect"}
+            grade["words"].append({"word": word,
+                            "grade": "incorrect"})
 
     # incorrect indices
     for word_index in grade["incorrect_word_index"]:
@@ -88,7 +93,7 @@ def correct_sentence(given_sent, correct_sent):
 
         if sim_word is not None:
             word_grade = correct_words(given_tok[word_index], sim_word)
-            grade[word_index]["word_grade"] = word_grade
+            grade["words"][word_index]["word_grade"] = word_grade
 
     return grade
 
@@ -137,6 +142,7 @@ def correct_words(given_word, correct_word):
             char_missing.remove(char)
 
     grade["missing"] = list(char_missing)
+    grade["letters"] = []
 
     # for each character, hold whether it is correct or incorrect
     index = 0
@@ -149,11 +155,11 @@ def correct_words(given_word, correct_word):
                 match_index = ind_2 + index
                 break
         if match_found:
-            grade[ind_1] = {"char": char,
-                            "grade": "correct"}
+            grade["letters"].append({"char": char,
+                            "grade": "correct"})
             index = match_index + 1
         else:
-            grade[ind_1] = {"char": char,
-                            "grade": "incorrect"}
+            grade["letters"].append({"char": char,
+                            "grade": "incorrect"})
 
     return grade
diff --git a/backend/app/views.py b/backend/app/views.py
index cc0c321..0474bb8 100644
--- a/backend/app/views.py
+++ b/backend/app/views.py
@@ -151,7 +151,6 @@ def get_picturebook_data(request):
     API endpoint for getting the picture book images given the story the user wrote.
     """
     story_content = request.query_params.get('content')
-    print('hmmm:', story_content)
     urls = get_story_data(story_content)
     misspelled = get_misspelled_words(story_content)
     res = [{'word': word,
@@ -251,13 +250,15 @@ def get_response_quiz_data(request, text_id):
         raise Http404 from text_not_exist
     res = get_quiz_questions(text_obj.content)
     return Response(res)
+
+
+@api_view(['GET'])
 def get_indiv_sentences(request, text_id):
     """
     API endpoint for getting the individual sentences from the given text.
     """
     text_obj = Text.objects.get(id=text_id)
     sentences = get_sentences(text_obj.content)
-    # return Response(sentences)
     res = [{'sentence': sentence} for sentence in sentences]
     return Response(res)
 
diff --git a/frontend/src/textToSpeech/textToSpeech.js b/frontend/src/textToSpeech/textToSpeech.js
index b1e5852..a219f6a 100644
--- a/frontend/src/textToSpeech/textToSpeech.js
+++ b/frontend/src/textToSpeech/textToSpeech.js
@@ -125,9 +125,9 @@ export class TextToSpeech extends Component {
 
     modalHandler = (event) => {
         event.preventDefault();
-        this.setState({
-            showModal: !this.state.showModal,
-        });
+        this.setState((prevState) => ({
+            showModal: !prevState.showModal,
+        }));
     }
 
     checkProgress = () => {
@@ -141,19 +141,16 @@ export class TextToSpeech extends Component {
 
     giveGrade = () => {
         const words = [];
-        for (let i = 0; i < this.state.grade['length']; i++) {
-            if (this.state.grade[i]['grade'] === 'correct') {
-                words.push(
-                    <span className="correct-word">{this.state.grade[i]['word']}</span>,
-                );
-                words.push(<span> </span>);
-            } else {
-                words.push(
-                    <span className="incorrect-word">{this.state.grade[i]['word']}</span>,
-                );
-                words.push(<span> </span>);
-            }
+
+        for (let i = 0; i < this.state.grade['words'].length; i++) {
+            const word = this.state.grade['words'][i]['word'];
+            const grade = this.state.grade['words'][i]['grade'];
+            const isWordCorrect = grade === 'correct';
+            const classNameString = isWordCorrect ? 'correct-word' : 'incorrect-word';
+            words.push(<span className={classNameString}>{word}</span>);
+            words.push(<span> </span>);
         }
+
         return words;
     }
 

From 84248da2f48346ccc1363a64aac172e8d245b1fd Mon Sep 17 00:00:00 2001
From: taokinbo <70776613+taokinbo@users.noreply.github.com>
Date: Mon, 24 May 2021 17:55:24 -0400
Subject: [PATCH 27/27] fixed linter error

---
 backend/app/analysis/text_parser.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/app/analysis/text_parser.py b/backend/app/analysis/text_parser.py
index 0149e1b..99eccb4 100644
--- a/backend/app/analysis/text_parser.py
+++ b/backend/app/analysis/text_parser.py
@@ -146,7 +146,7 @@ def correct_words(given_word, correct_word):
 
     # for each character, hold whether it is correct or incorrect
     index = 0
-    for ind_1, char in enumerate(given_word):
+    for char in given_word:
         match_found = False
         for ind_2, match in enumerate(correct_word[index:]):