This is an assignment for Digital History, a digital humanities course taught in the History Department at the University of Toronto. If you’re a teacher, feel free to fork and repurpose for your own courses. If you’re a student, keep reading!
Note: if you’re reading this in Atom, the org-mode syntax probably won’t display properly. Sorry about that! It’s likely easiest to read these instructions online instead.
This assignment is graded pass/fail. You will only get credit if all of your code runs as required. To pass the assignment, you must:
- successfully copy this repository on github and clone a local copy
- complete at least the first two parts of this assignment (plus the third part if you hope to get an A in the class), such that both the student-visible tests and the instructor/machine-visible tests all pass.
- commit your work to git as you go, so that a query of the git history will show multiple steps. Please note that git commits are timestamped and unique; they are an excellent defense against accusations of cheating, so please use them extensively. Tests will fail unless you make at least 6 commits to the repository.
- push all your changes to Github
- the last commit pushed to the master branch by the assignment deadline becomes your submisison automatically
Checking Out And Handing In the Assignment
When your assignment passes all tests and you are satisfied with your work, please be sure that you have also pushed all your commits to the repository. This will ensure that I receive your work.
Let me stress this strongly: you can try to do this assignment without the textbook & practice exercises, but it will be much, much harder.
Once you have read the textbook and done the exercises, you should find this part of the assignment very straightforward. Complete the code in ./Part1/01-functions-and-variables.js and ./Part2/-2-objects-tests-loops.js according to the instruction-comments in those file. Check your code by testing it in the EJ code sandbox, Firefox Scratchpad, the Chrome console, or the js-console package in Atom (the latter should have been installed automatically if you installed the history-hack-pack). I have also written tests for you which will produce the appropriate output when your code is correct.
./Part2/index.html is a very simple HTML file that contains a table of prime ministers. Your task is write one or more functions that will add links to the Wikipedia pages of all the prime ministers.
Look at the structure of the table. Each row looks like this:
<tr> <td class="PM">John Sparrow David Thompson</td> <td class="Party">Conservative</td> <td class="From">1892</td> <td class="To">1894</td> </tr>
Your code should change that to this:
<tr> <td class="PM"><a href="https://en.wikipedia.org/wiki/John_Sparrow_David_Thompson">John Sparrow David Thompson</a></td> <td class="Party">Conservative</td> <td class="From">1892</td> <td class="To">1894</td> </tr>
Rather than asking you to write your code directly in
index.html, I have provided a script tag at the end of the file which loads the file
ministers.js. After the page has loaded completedly, the function
updatePage() will run; your job is to make sure that updatePage() does what it’s supposed to.
There is some template code in link-ministers.js already; complete the template and test your code by (re)loading index.html in your browser. You can also use the built-in tests (see below).
Hints: In this exercise we are beginning to actually do a form of digital history. Notice that we are treating text as data: transforming names into “pointers” that give us access to further information.
This is made possible because the web page itself is already well-structured. Notice the class attribute on each
<td class="PM">John Sparrow David Thompson</td>
Now, consider the structure of Wikipedia links:
We will use skills developed in the exercises from chapter 13. Your function will have to:
- find and collect all the elements with the class “PM”. The method you will need to use is mentioned only once in chapter 13, under “Finding Elements.”
- clear the existing text from the node.
- add a child node of type “a” with text content that comes from the original text, and a link that is constructed from the Wikipedia address prefix + the original content (you can keep the spaces or replace them by underscores, as you wish).
If you find this is too easy: wikify all the fields in each row. Now click on the “party” links. What could you do to fix them? Also, can you change the background color of one or more classes?
One more challenge for the eager. Right now, the wiki links are added immediately when the page loads. Can you defer adding the links until a button is clicked? You will need to add a button element with an “onClick” attribute to index.html, and move the execution of
updatePage() out of the page load and into the button. This is the only part of the assignment that requires you to make changes to
index.html, and it is completely optional & just for fun!
P.S. – you may find it useful or interesting to look at the script I used to generate the table. You will find it in ./Part2/make-minister-table.js
Part 3: Reflection
If and only if you are aiming to achieve an A in the course, you must also complete the Reflection section of the assignment. I’m simplifying things a bit this time – no need to copy or rename a file. Simply answer the questions in
Reflection/reflection.md. Follow the directions in the file.
As in our other assignments, this one conmes with a set of bundled tests designed to make your life a little easier. To run them, first execute
npm install -d from this directory. Then run
npm run test or, to watch the directory continuously,
npm run watch