Info 202 F12

In this assignment you will:

1. Familiarize yourself with a browser based faceted classification tool
   
2. Design a faceted classification for the 15 animals your organized in A5
   
3. Adjust your classification given additional instances.
4. Build and upload your faceted classification using html and JavaScript.
5. Reflect on your experience designing and iterating your classification.

You will upload a .zip file named FirstNameLastNameA6.zip. You will be editing three files from the attached zip file (index.html, data.js, and report.txt)

Download the attached zip file, which contains all the files you need to get Facet Browser running.

The two files you will be interacting with are the index.html file and the data.js file located in the js/ folder.

Open the index.html file in your favorite web browser and explore the provided example. The left-hand navigation area provides a way to explore the collection by different facets while the right-hand area shows the relevant instances.

Under the Category facet, try clicking on Bird. What do you think is happening behind the scenes when you click on a facet? Try clicking on Bird again. What happened the second time?

The data model used by Facet Browser is an array of JSON objects with each JSON object representing an instance. JSON, like XML, is human readable and easy to manipulate. Unlike XML, JSON uses key:value pairs to store data. 

 

JSON Syntax

       {

           "key1":"value",

           "key2": ["value1", "value2"] //an array of values

       }

In the data.js file, you’ll see that the properties are title, imageURL, description, facet1, facet2, facet3. 

Try changing some of the first instance’s values in the data.js file. Change the value of the “title” attribute from “Mouse” to “Polar Bear”. What happens on the front end?

Sticking with the same instance, change the value of facet3 from “Africa” to “Antarctica” and refresh the page. Again, what happens on the front end? What happens if you click on Antarctica?

Add a fourth facet called “facet4” after “facet3” with the value of “Large”. Reload the page. Did anything change in the navigation area? Did the display of the instance change at all?

Let’s make that new facet you added show up in the UI. Switch over to the index.html file. Scroll down to the <script> area at the bottom of the file and look for the variable settings. There are two attributes in settings you’ll be changing throughout the course of the assignment:

items : instances tells facetedsearch.js what data to look at

facets : {

‘facet1’ : ‘Category’

‘facet2’ : ‘Language’

‘facet3’ : ‘Continent’

}

tells factedsearch.js how many facets to look for and what to label them in the UI.

Uncomment facet4 and update the value from “Another Facet” to a more meaningful title (remember the value we gave our instance was “Large”). Reload the page. What happens on the front end? What happens if you click on the new facet? 

Now that you have familiarized yourself with how Facet Browser works, you need to design a faceted classification system to accommodate the set of 15 animal instances from A5 http://pinterest.com/202organizer/animals/

You can have as many facets as you like, but you should have at least five facets and every instance should be classified according to the facets you create. (You’ll have to do some extra fiddling with the code to get more facets to show up). 

You will need to be creative but make sure that someone else could use them without your help. They can be abstract or practical or a mix of both so long as they classify the instances in a way that other people could understand. Make sure that your facets are flexible enough to handle additions to the list of instances.

** Don't look at these instances until you've completed Part 2 **

A good faceted classification scheme should be able to accommodate new instances without adjustment. Try to fit these additional 5 animals into your faceted classification. http://pinterest.com/202organizer/more-animals/ 

Revise your facets if necessary so that your system can classify all 20 instances.

Once you have a faceted classification system that handles all your instances, encode it in the data.js file. Use the instances variable in data.js for your 20 instances. Use the same format as the example instances making sure to have five facets for each instance. (Make sure you delete or comment out the sample data).

Once you’ve encoded your instances, switch over to the index.html file, scroll down to the <script> tag and uncomment facet4 and facet5 in the settings so your additional facets show up. 

Load up the index.html page in the browser, and voila, you now have a faceted classification system that lets your dynamically browse your instances based on the attributes you select!

In the report.txt file, answer the following questions:

1. List the 5 facets you chose in Part 2 and describe what constitutes valid values for that facet. For example, if you were organizing music, a facet might be Genre and your values might be Hip Hop, Alternative, Electronica, Rock, etc. For each facet, explain why you chose it. Did you make use of any of the advice about resource properties or universal facets in Chapters 6-7?
2. What were your biggest challenges you faced in designing your classification? Did you discover any benefits over other organization methods we’ve covered in class?
3. How well did your initial facet design handle the additional instances? What changes did you need to make to accommodate the new instances?

Create a zip file named FirstNameLastNameA6.zip with all the files needed to run your faceted classification system (including the /css and /js folders) and uploaded it to the course website.