- Sentence Diagramming Tool User Manual
- Table of Contents
Sentence Diagramming Tool is an only web application that allows you to learn, draw sentence diagram, and complete quizzes to test your knowldge in how to draw sentence diagrams.
The use of this web apllication and its respective portal would require a web browser. The prefered choice would be the latest version of Google Chrome (111.0) or Mozilla FireFox (111.0).
The application has not been tested using any version of Internet Explorer or Microsoft Edge or any other browser apart from the two previously mentioned, therefore full functionality of the product is not gaurunteeed when using any alternative browser.
The web application is know to run on all versions of mainstream operating system (i.e MacOS X, Windows & Linux) that are able to fulfil the browser requirements
The online sentence diagramming tool can be found at https://sentence-diagramming-hymxh8azs-kristienn.vercel.app/ Alternatively, you may install the website and host it locally using the installation guide (see Installation)
To move across the various pages of the website, you can use the navigation bar which is located at the top of the website, as shown in the image below.
Figure 1.0 - buttons and links are circled in red
Click the words (as shown in Fig. 1.1) to go their respective pages.
This panel is visible on every single page of the website and serves to help you access everything the webstie has to offer.
| Button Link | Destination |
|---|---|
| Sentence Diagramming Tool | Home Page |
| Learn | Learn Page |
| Draw | Draw Page |
| Test | Quiz Page |
| Quizzes | N/A |
Tabel 1.1 - table showing destination of buttons
The homepage consists of 4 buttons which serve as links to the different pages that the application has to offer. This is also a way of navigating
Figure 1.1 - home page with navigation buttons circled in red
The Learn page consists of a chatbot called RoboGram that you can use to get up to speed with how to draw a sentence diagram and the various components that the structure of a sentence entails.
Click a prompt button on in the chat box to use RoboGram and information about what you clicked will show up in the chat box.
Figure 2.0 - prompt buttons circled in red
Figure 2.1 - button clicked and response circled in red
Figure 2.2 - button clicked and response circled in red
There are various examples that are shown in the learn page. Each example is the sentence followed by its respect sentence diagram image which contain indicators of the different parts of the sentence to help you know how where to place the different sentences in the sentence diagram.
Figure 2.1 - button clicked and response circled in red
The canvas offers a wide range of functionality for a user to draw a sentence diagram.
The canvas consists of a top panel of buttons and interactive elements, the main canvas screen, and a bottom panel of interactive elements.
Figure 2.2.1 - top panel of canvas
Figure 2.2.2- main canvas
Figure 2.2.3 - bottom panel of canvas
The bottom panel consists of three buttons that also make edits to the canvas. These are the 'Clear' 'Undo', 'Redo' buttons.
The 'Clear' button, removes all lines and words from the canvas.
Figure 2.2.4 - bottom panel of canvas
The 'Undo' button removes the line that was previously drawn onto the canvas and if there is a word or are words on the line, the word(s) will also be removed with it.
The 'Redo' button redraws the line that was removed by way of 'Undo', and puts back the word(s) that were associated with this line.
Figure 2.2.5 - bottom panel of canvas
These elements vary between the drawing page and the quiz page. For details for the repspective canvases (see Canvas)
The tool box contains buttons that you are supposed to use when drawing the line structures for the sentence diagram.
It is located in the top right corner outside of the canvas, as shown in the images below.
| Button | Image | Fucntionality |
|---|---|---|
| Subject |  |
Draws a subject line |
| Predicate |  |
Draws a predicate line structure |
| Modifier |  |
Draws a modifer line |
| Object |  |
Draws a object line structure |
| Subject Compliment |  |
Draws a subject compliment line structure |
| Preposition |  |
Draws a preposition line strucuture |
Please Note that to add a Modifier or a Predicate, one of the horizontal lines must be selected to indicate which line will be attached to it.
Once a line is drawn, a word in the sentence can be dragged and dropped into an allocated spot on any of the lines of the sentence. See images below to see how this works
- when a word is dragged, rectangluar boxes pop up to show all possible placements of this word.
- shows a word that has been placed into an allocated box
alternatively, if you would like to replace the word that is in a particular slot, you can drag and drop a new word in their and this should replace the word that is in that slot.
The drawing canvas contains an input box for a users sentence. To set this as the sentence that you would like to use, press the tick and the element will make the words draggable so that you can drag them into the positions that wish to drag them into on the canvas.
The drawing canvas also has additional buttons to download the sentence diagram either as an image file or a JSON Object.
The quiz canvas contains different elements to help the user navigate through different sentences consecutively.
The quiz canvas has a circle which indicates the number of your current sence and also indicates how many sentences there are in the quiz overall.
This helps you keep track of your progress. This is located in the top left of the page above the canvas and beside the sentence as shwon in the image below.
The quiz canvas also has a score element which shows how accurate the sentence diagramming that a user is drawing in real time. Alternatively, the user may refresh the score by pressing the refesh button which is located beside the score number.
The quiz features a 'Next' and 'Prev' button which navigate to the next sentence in the quiz, and previous sentence respectively.
Use the either the navigation panel or the button on the landing page to to navigate to the draw page. See Navigation if you do not know how to do this.
Type a sentence into the the box provided
And then press the tick button the set the sentence to be drawn
If you make a mistake or would like to change the sentence, you are able to do so by pressing the red button to remove the sentence and an fresh sentence may be drawn into the empty text box.
The canvas gives you functionality in order to draw a sentence diagram for the sentence you have enetered.
See Canvas for a detailed guide on how to use the canvas to draw a diagram.
Once you are done drawing the canvas, you are able to download your drawing as an image using the 'Download SVG' button, or if you are a developer you are able to download the sentence diagram structure in the form of a JSON OBject using the 'Download JSON' button.
Alternatively, you are able to copy the JSON Structure from the JSON Field below the canvas.
Use The navigation bar or the buttons on the home page to navigate to the quiz page by pressing the Test link.
See Navigation for more details
Use the canvas and all interactive elemts surrounding the canvas to draw a sentence diagram.
See Canvas for more detailed explanation of drawing a diagram.
Once completed drawing the setence diagram, press next and repeat this step until you finsih diagramming the last question.
To finish the quiz, press the 'Finish' Button. This will calculate your total grade and send you to an intermediary page where you will view your grade and have an option to go home by clicking a button as shown in the image below.
The admin portal can be accessed here or by using the this link:
Similar to the main web application, the portal application includes a navigation panel which appears at the top of each page.
The quiz page ,which is also the homepage of the application, contains a table of information about the quizes that are in the database.
| Field | Information Displayed |
|---|---|
| Name | Name of quiz |
| Length | Number of sentences in the quiz |
| Difficulty | The difficulty of the quiz |
| Sentence types | The type of sentences present in the quiz (simple, complex, cojunctions, complex-conjuction) |
| Actions | Links to actions that you can perform on that quiz object (add, remove, edit) |
The sentence page contains a table of information about the sentences that are in the database.
| Field | Information Displayed |
|---|---|
| Quiz | Name of quiz |
| Type | The type of sentence that it is (simple, complex, cojunctions, complex-conjuction) |
| Sentence | The sentence that is stored |
| Actions | Links to actions that you can perform on that sentence object (add, remove, edit |
The Grades page contains a table displaying information that
| Field | Information Displayed |
|---|---|
| Name | Name of quiz |
| Length | Number of sentences in the quiz |
| Score | The grade that was acheived on this quiz |
| Date Taken | THe Date and time of submission of the quiz |
To add a sentence to the Test Quiz, click on the 'add' link that is located in the add field next to the field that holds information for the desired quiz.
Once pressed, a user will be navigated to a page which contains a form and an example JSON structure that a user can copy by pressing 'copy structure' and paste into the JSON Structure Field.
Alternatively, a user can use the draw page on the main web application for a sentence that want to add by drawing the sentence on the canvas and then copying the JSON structure that is shown at the bottom of the canvas. Once the form is completed they can use the submit button to save the new sentence to the database.
(See Drawing Canvas for more information)
To update or delete a sentence, a user must navigate to the sentence page of the portal. Here they can press the 'Edit' or 'Delete' Link under the actions field of the sentence that they wish to complete an action on.
They will be directed to a similar form page where they must alter the details and then press the submit button to save the changes.
The latest version of node must be installed on your computer to have run both the website and its respective portal. A version of redis also must be installed on your computer.
The use of this web apllication and its respective portal would require a web browser. The prefered choice would be the latest version of Google Chrome (111.0) or Mozilla FireFox (111.0).
The application has not been tested using any version of Internet Explorer or Microsoft Edge or any other browser apart from the two previously mentioned, therefore full functionality of the product is not gaurunteeed when using any alternative browser.
The web application is know to run on all versions of mainstream operating system (i.e MacOS X, Windows & Linux) that are able to fulfil the software and browser requirements
Download the files for the backend services at this link.
Open a terminal and navigate to the folder using the terminal
Eg.
cd /Path/To/Folder/fyp-backend
Or use the 'Open folder using terminal option' that is available when you right click a folder in your folder navigation.
Download all the dependenceies using the command
npm install
Once the dependencies have been downloaded you may start the redis server the application using the command
npm run redis
In another terminal window run the command to start the application
npm start
alternatively you can use local instance of a docker container run the application.
Once in the file, run the following commands
docker-compose build
docker-compose up
To run the program.
Then in a new terminal, navigate to the frontend of the application
Run the application by using the
npm start
Language The frontend end web application is built using React with TypeScript.
Modules Used
- d3
- axios
- uuid
- heroicons/react
- react-tool-tip
- tailwind
Language The backend is built using NodeJS with TypeScript.
Modules Used
- jest
- cors
- swagger-jsdoc
- swagger-ui
- dayjs
- pino
- mongoose
- express
- dotenv
- axios
- supertest
- pug
- openai
- zod
- ts-jest
- ts-node
- ts-node-dev
- postcss
- postcss-cli
- autoprefixer
- typegoose
- redis
The database used is a NoSQL Database that is hosted on MongoDB Atlas.
The cache used is Redis
API Documentation is available at the site: