# Final Project for MSTU 5003
###### by Charlotte Price

[CodePen Link to Project](https://codepen.io/cp2876/pen/829e5df7cd2f1c9bca7a09ce654d34d0?editors=0010)

### Definitions
* **Call number**: The "address" of a book on the library shelf, part of a classification system
* **Catalog**: The database where information on the items within a library collection is held
* **Information Literacy (or IL)**: "The set of skills needed to find, retrieve, analyze, and use information." (*from the [ACRL](http://www.ala.org/acrl/issues/infolit/overview/glossary)*)
* **LCC**: The Library of Congress Classification system, used by most academic libraries
* **Records**: An entry in a catalog holding describing information on an item or resource (also called a *bibliographic record*)
* **Stacks**: Rows of bookshelves in libraries where the bulk of the collection is held

This project builds off of a previous one. See [documentation](https://hackmd.io/@cp2876/HytTLScOB) and [CodePen](https://codepen.io/cp2876/pen/RwwxpXr) of that version.

## Functional Design Document

### 1. Strategy / Objective

#### Goals
The primary goals of this site are for users to..:
* Understand the basics of call number organization
* Understand that each term has some kind of meaning
* Understand that subjects are involved in the assignation of the terms
* Learn how to read an LCC call number
* Learn how to navigate the library
* Gain experience in sorting books

#### Learning Targets
Using the learning targets as definied in Schwartz & Hartman (who took inspiration from Romiszowski), I identify the targets for this page as:
* Explanations: I want them to see the similarities in organization in the library with the rest of their world
* Attitude: I want them to believe they have the capabilities to find what they need in a college library
* Skills: I want them to be able to read a call number, and to find a book on the shelf
* Facts: I want them to know that a call number corresponds to subjects and authors.

#### Users
##### Identification
Primary users of this site are the undergraduate liberal arts students of Barnard College, mostly focusing on first-year and transfer students.

Librarian instructors will be the ones teaching using this site, but are not for this case considered the primary users. And while other users may use this site, the bulk of Barnard library instruction occurs within a student's first year, making those students the primary focus.

##### Needs
Information literacy (IL) is a much-researched facet of academic librarianship, having been written about extensively in many books and articles. With such a volume of literature dedicated to assessing and documenting the need for IL in college students, I will instead focus on the more specific needs within this facet of IL.

The majority of first-year students are unfamiliar with libraries as a whole. Most school libraries (pre-collegiate) have been turned into study or computer rooms, and school librarianship as a field has been struggling to survive. Public libraries also have faced many funding and staffing shortages over the past 20 years. As such, when students arrive at college, they are woefully unprepared for the realities of college research.

While we may wish everything was available online in full-text, many factors (such as licensing, copyright, storage, and more) make this a dream only, and liberal arts students especially will have to use a library in order to successfully write a research paper. But without much (if any) library experience from before college, the mere concept of a classification system may be foreign to them. If they are familiar with any, it'd be the Dewey Decimal Classification (DDC) system, which mostly public libraries use.

Without that prior experience, they do not understand that library systems are organized mostly by subject rather than genre or author, which means they also do not understand how to use this to their benefit by tapping into the *serendipity* that is a feature of subject-based classification systems.

In addition, anxiety and fear are common problems for incoming college students, especially ones from marginalized backgrounds. That anxiety/fear, coupled with running into a wholly unfamiliar organization system, creates barriers for them that we as librarians hope to remove or alleviate.

Explaining how to locate an LCC call number is difficult to do, and demonstrating to an entire class is onerous and inefficient. Sending students into the stacks uses up an inordinate amount of class time, so a digital interactive learning tool is preferable.

So to sum up, students need to feel both confident and competent in navigating the library shelves, and need to learn to do so within a classroom setting.

### 2. Scope
Since this website is a student project, the scope is partially defined by the [assignment](https://hackmd.io/@jmk2142/HJdzo6hxG?type=view).

The expected classtime spent on this page as a learning tool would be 10-15 minutes.

#### Functional Specifications
The site will:
* Provide explanation/definitions for what a call number is
* Break down the call number into parts
* Demonstrate where to locate the call number in the catalog
* Provide corresponding stack maps
* Link to additional video explanations
* Provide interactive quizzes to test call number knowledge
* Provide a contact form for librarian appointments, collecting relevant student information and allowing a date for appointments to be chosen.
* For the purposes of this assignment, only the form is provided - data will not actually be collected and stored.

Social media integration is currently out of scope.

### 3. Structure
#### Interaction Design
The user behaves by scrolling down through the page, clicking button elements which reveal more information, until the quiz section. The quiz section presents a series of pairs for the user to choose between, clicking a radio button and submitting at the end. The system then responds by revealing right and wrong answers. In the sorting quiz, the user drags a book-object into one of two bins. The system then checks if it's the correct bin and pops up an alert saying if it is or is not, and hiding the book object. The user can press a button to reset the books to starting position. User can fill in email address and name in the contact form. User can choose from a list of class-years and calendar dates, before submitting the form.

#### Information Architecture
This singular page has a top-down approach, starting with the broadest introduction of the content, with the user scrolling down to see new sections which present the content in narrower ways. The page ends with the contact form, opening up avenues for further individual learning that way.

Conceptually, content is grouped like this:
1. Overview & Definitions
2. Information on the call number
a. HOW to read a call number
b. WHERE to find the call number...
i. online (in catalog)
ii. in the physical library
iii. on the shelf
c. WHAT each call number term means
d. VIDEO explaining it all together
3. Quiz/testing knowledge
a. Comparing call numbers in pairs in increasingly challenging questions
b. Sorting book-objects into "shelves"
4. Contact form
5. Copyright footer

### 4. Skeleton & Surface
#### Navigation
Since this page is intended to be used as a class exercise, navigation is almost wholly within this one page, with only two courtesy navigation tools - one link to describe LCC, another to the embedded video.

#### Wireframe
A site wireframe was created for planning purposes using whiteboard:
The "map page" depicted was created but then merged into the primary page after difficulties in execution.

#### Surface
Bootstrap was used for nearly all the "surface" level components. A javascript program to randomize book object background color, though, was implemented. Light blue was featured throughout, as that is the official color of Barnard.

## Slightly less-functional document of process
### Stuff that didn't make the cut
*or, room for future developments*

* Drag and drop into a map
* More than two options for the book sorting drag and drop to be deposited into
* Each book object have a different random color
* Book object having the call number appear with breaks instead of on one line
* Make the form produce an output
* Reward for multiple choice quiz

### The map
My initial goals were loftier than I could achieve, as happens. My biggest issue was making sections of a map clickable - without somehow turning it into an SVG, I wasn't able to find a way to take an existing JPG map and have different sections of it be interactive.

I had built in section elements within each book object to correspond with a map, so this could be used in the future

### Sorting Drag and Drop
I had a difficult time getting the book sorting drag and drop to work without a Boolean model, which then limited me to two shelves to sort into. I would have liked to replicate this at least with other shelves, but since I'd just had a quiz with a pairing factor, this was not ideal.

Getting the book objets to display correctly was also difficult - I tried to create breaks between call number sections, but I think it may have to be separate elements within the object to make that work. I also couldnt get the text to stick to the bottom of the book spine without the "book" turning into a thin line. Using a relative position for the `bookItem` class and absolute position at the bottom for the `callNumber` did the trick

I would have also liked to have them on images of book spines, rather than a colored-in div, and also to randomize the location of the books.

Hiding the book objects after being dragged led me to call them using the `event.target` and change their visibility style to "hidden", but I would like to only have that happen upon a correct answer. I wonder if using Riot JS would have helped with some of these issues, as I saw some clean-looking drag and drop examples there.

### Random Background Colors
It took me a while to figure out how to take a variable from javascript and put it into CSS, but I finally did using `:root` and creating a variable `--bookColor` that I called within the CSS for the `bookItem` class.

However, I wasn't able to get each book to display a different color separately. I did manage to use the DOM to apply the color to the corresponding style.

### Multiple choice quiz
I would have liked to come up with something slightly different, but I had a tough time envisioning how else to do this after studying the [quiz lesson](https://codepen.io/jmk2142/pen/QWwbwog) in class. One thing that could have been good to add would be some kind of "reward" for finishing all the questions correctly - a gif appearing, alert, etc. Similarly, if they were not getting it right, some kind of guidance to show a hint. could pop up

### Form Output
While I would have liked the form to produce an output, maybe a confirmation, this also is probably one of the lease vital things for me considering we already have booking systems both using Google Forms and another booking software, both of which are more secure. I had this roughly and then decided to focus on other aspects of the page.

function formOutput() {
  var textName = document.getElementByID("textName");
  var textOutput = document.getElementById("textOutput");
  var apptDate = document.getElementById("apptDate");
  var classOutput = document.getElementById("classOutput");
  var textEmail = document.getElementByID("textEmail");
  var sayMyName = textName.value;
  textOutput.value = "Hello, " + sayMyName + "! Your appointment is on " + apptDate + ". A confirmation has been sent to " + textEmail + ". Thank you!";
}

function submit output