You are on page 1of 5

Insharika Developer Documentation

Architecture
UML Package Diagram

Walkthrough
The landing page (index.html) and the poem forms (<poem_form>.html) are linked: any poem page can traverse back to
the landing page, and the landing page links to all poem forms. Poem forms cannot currently link to one another - the
user must return to the landing page to access a dierent editor. They share a Resources file, containing all fonts and
images used in the application. Both also use the google JQuery API, as well as Bootstrap and PureCSS. Landing has its
own main stylesheet, landing.css, and all poem forms share a basic stylesheet, poem.css. Poem forms have sole access
to the Styles folder and to Mongoose, which create the highlight-to-populate function for the rhyme box. In addition, each
poem form has the main menu, created by side-menu.js, and the highlight-to-populate function, implemented with
Mongoose. The rhyme box and function were created using the RhymeBrain.com web application, with a modified
javascript file to change the way the results are displayed. This modified javascript file is used by all poem forms and is
included in the main Javascript folder.

Detailed Design
The Insharika web app is a Client-side application made of static HTML files styled and controlled with CSS and
javascript. API requests manipulate the data to keep the functionality in-browser.

Dynamic Behavior
[page flow diagram goes here too -- For web applications, this might include a page navigation graph, along with
summaries of the scripts running on each page.]
On each poem page, the script running is the side_menu.js file which contains the rhyme scraper, the function that
populates the search input with the currently highlighted text, functions that populate the description and poem name
elements with the appropriate html taken from the poems.json file using jQuery, and finally a function that creates a
lightbox of the corresponding poem example again taken from the poems.json file and overlays it over the specific poemform textbox layout for instruction-also using jQuery. On the pantoum.html page, an additional script runs in the html file
that upon change in the poem text boxes, will add a prompt that when clicked will copy the contents of the textbox to the
corresponding text box that needs to be identical according the pantoum poem form using jQuery. Once copied, the
prompt disappears.

Data Storage
The only need for persistent data in the system is for each poem form to have a universal description and example. The
original design called for the description for each form to be available not only on each individual editing page but on the
landing page as well. For this reason the design team decided to create a file, poems.json, that holds the single standard
description for each poem type. The format of the json file is of several name:object paired attributes for each poem form.
For example, a single example per poem form was also added to the json. So sonnet contains a pair of example: and
a single string containing the entire example sonnet. This formatting allows for more examples or attributes to be added
to a form the same way in future.

User Interface
Insharikas user interface is designed to be clean and friendly so that the target audience, middle and high school
students, can easily figure out how to use the application and enjoy the experience of writing poetry with us. The interface
consists of two main stages - the landing page and the workspace page for each fixed poetry form.

The Landing Page

The landing page is the first thing that users see when they enter Insharika. It is aesthetically appealing and very simple,
with only necessary information displayed. The combination of a subtle pattern and clean white space brings an element
of the elegant image of poetry to the modern, flat, minimalistic design of our overall site. The main banner has the
instruction to choose your form, indicating that the user should select a type of poem from the twelve listed in the
middle (cinquain, ghazal, haiku, pantoum, prose, quatrain, sestina, sonnet, tanka, tercet, terzanelle, and villanelle). When
the user hovers over a type of poem or form, that text will turn white and the background surrounding that one word will
change to a dark almost-black color - this is to highlight which form users are currently selecting in a visually appealing
way. Clicking on any of these poem forms will take the user to the specific workspace page for that poem. The small
faded badges at the bottom of the banner come to full opacity when the user hovers on them, and each one links to the
portfolio or website of the contributor whose initials are on that badge.

The Workspace

The workspace page for a poem carries over the pattern and whitespace from the landing page. It displays a main
editable section where the user can type the text of the poem line by line, with a separate field for the title which is
marked by placeholder text. Just under each line, aligned in the center for easy reading, is a tip about what that line ought
to contain according to the rules of that poem form. For example, in the haiku page, these tips tell the user how many
syllables ought to be in each line. In other poems, the tips might provide information about the number of words, the
rhyme scheme, or the line scheme.
The top left corner with the Insharika logo takes the user back to the home landing page when clicked. On the bottom
left, there are again the badges with links to each contributors websites.
On the right, there is another panel with three distinct sections that do not manipulate the poem but rather assists the
user in the creative writing process.
Description - a definition of the poem form in question, so that the user has a convenient reference to the poems
structure, style, usage, etc.
Examples - links to published examples of the specific poem form so that the user can have convenient
references. When these links are clicked, a lightbox will open displaying the text of that example poem in the same
format as the user-editable area of the workspace; each line is clearly separated and the tips for each line are
shown so that the user can see how the poem breaks down according to the form rules. Additionally, each line in
this lightbox example is an editable field so the user can fiddle with the example text. The user can exit the
lightbox at any time by pressing the escape key, clicking outside of the box, or clicking the X in the top-right corner
of the box. Note that even if the user fiddles with the example, the next time it is opened, it will still have the
original text so that the real reference is never gone.
Rhyming - this section contains a field that the user can fill by either typing manually or by highlighting any word
on the page, whether in the user-editable fields or not. The highlighted word will automatically populate the field for
the users convenience. Next to the field is a button that, when clicked, will take the word in that field and display
rhyme suggestions for it below. This functionality is accomplished by scraping the results of a query to the
RhymeBrain website, which displays rhyme and near-rhyme suggestions for a given word.
Each poem forms page is based o of this interface, but of course with the Description text, Examples links, and format
of the text editor fields being adjusted according to the selected poem. For instance, a haikus page would only have
three lines whereas a cinquain would have five, the tips beneath the lines would have dierent syllable rules, etc.

You might also like