The website format of National History Day projects has a variety of strengths, one of which is the possibility for user interaction. Wanting to utilize this possibility as much as possible, I created the “interactive data map” for my group’s website, which took advantage of user interaction to convey information on the impact Mao’s reforms on death rates and grain output.

First, we found sources from Chinese archives that contained information we wanted to present. We typed up this information by hand (which took a fairly long time), and then I played around with find and replace in a text editor for a while to get the typed up data into a decent HTML format. We gave each province its own HTML file containing data for just that province.

I then created another HTML file which contained an HTML image map of a map of China (we call it the “map image map”). I put a rectangular click box around the name of each province. I then created yet another HTML file, which contained two iFrames, one to show the map, and one to show the data. I then wrote in the links in the “map image map” to control the other iFrame.

After writing all of the HTML, I uploaded the HTML files for the map and provinces to the website, created a new page, and put in the code for the two side-by-side iFrames into an HTML element in Weebly.

Here’s the code for the “main” HTML that displayed the two iFrames side-by-side:

<iframe name="mapframe" id="mapframe" src="http://18069595.nhd.weebly.com/files/theme/mapframe.html" height=400 width=58%></iframe>
<iframe name="dataframe" id="dataframe" src="http://18069595.nhd.weebly.com/files/theme/dataframe.html" height=400 width=40%></iframe>

Here’s what one of the links looks like in HTML to control another iFrame (note the TARGET attribute):

<a href="/files/theme/map_guangdong.html" TARGET="dataframe" id="rectangle11">