Going Global: Creating a Webpage for Engagement [Systems thinking & modelling series]
This is part 74 of a series of articles featuring the book Beyond Connecting the Dots, Modeling for Meaningful Results.
Now that we have made it through some of the technical details, let’s jump into building a webpage for an interactive model that users can comment on. There are three basic things we want this webpage to have:
- A description of the challenge we are tackling, why we built the model, and what the model contains.
- An interactive version of the model that the user can explore and use to run simulations.
- A discussion forum where users can post comments on the model and see what others have posted.
This might seem ambitious, and it is! But using freely available technologies and services we will be able to put this webpage together very quickly. Let us split the webpage development process into three steps: first we’ll create the general page framework, then we will add the interactive model, and lastly we will add the discussion forum.
Creating the Page and Description
Assume we decide to create a webpage exploring population growth and whether the Earth can sustain humanity into the future. We start building our webpage by creating an HTML file and putting the following text in it.
<head>
<title>A Fragile Future</title>
</head>
<body>
<h1>Introduction</h1>
<p>This is a model of world population
changes into the future.</p>
[Model goes here]
[Discussion forum goes here]
</body>
</html>
This creates a page with three sections: Introduction, The Model, and Discussion. We can fill in the Introduction section with text describing the problem we face and our approach to understanding it in our model. In this example page, we have just written a single sentence but you could extend it with more details on the model to fully explain to the viewer why this is important and how we have modeled it.
The placeholders [Model goes here] and [Discussion forum goes here] are where we will insert our model and discussion forum later on. For now though, we just want to layout the structure of the page.
Adding an Interactive Model
Now that we have created the structure for our webpage, we can add the interactive model. There are several ways to do this. One way would be to write the model in JavaScript and include it directly in the webpage. JavaScript is a full-featured programming language and could be used to implement any of the models described in this Interactive Learning Environment (ILE). Although implementing a model in JavaScript is definitely possible, it would require a lot of work. Writing a model in JavaScript would be time consuming and would not be possible without extensive programming experience.
Fortunately, using Insight Maker there is a much easier approach. Insight Maker models can be easily embedded in a webpage without any special effort on your part. So rather than writing our world population model in JavaScript, we can simply build the model in Insight Maker and embed the resulting model in our webpage. So build your model in Insight Maker just as you would build one normally. You can also use existing model. For this example, we will use the World3 model, which has a detailed worldwide model of population change.1
Once you have finished constructing your model, click the button in the section of the Insight Maker toolbar. A window will open containing HTML code that you should paste into your webpage. This code will embed a version of the insight when it is placed in a webpage document. For the World3 model this code is something like:
TITLE=“Embedded Insight” width=600 height=420></IFRAME>
Use this code to replace the [Model goes here] placeholder in your webpage. Save the webpage and open it in a browser. You now have a rich interactive version of your model embedded directly in your webpage!
You can control several features of the embedding by editing the “<IFRAME>” tag. For instance the “width” and “height” attributes control the size of the embedded model. They are specified in pixels and you may change them to make the embedded model smaller or larger. The “topBar” and “sideBar” parts of the URL control whether the toolbar and the sidebar will be shown in the embedded model’s interface. By default, they are set to 1, which means these elements will be shown. Set them to 0 to hide the bars when the model is displayed. The “zoom” part determines whether the model diagram is shown at its full size or if it is zoomed to fit the window (the default). Set this to 0 to prevent the model diagram from automatically being resized to fit the window.
Adding a Discussion Section
Now we have one last piece to add before we have completed our webpage. We want people to be able to carry on a discussion about the model directly within the page. To make this possible, we need to add some sort of forum or discussion software.
We could program our own custom discussion system, but, as with the model itself, it is easier to leverage existing free software than it is to develop our own. A number of free commenting and discussion systems are available. One of these is called Disqus. If you read a number of different news sites or blogs you have probably already used Disqus, as many sites use their software.
You will need to sign up for a Disqus account to be able to embed their discussion software, but fortunately (like Insight Maker) it should not cost you a thing. Once you have signed up at Disqus, follow the site for directions on how to embed Disqus in your own webpage. You should be given code that looks similar to the following to place into your webpage:
<script type=“text/javascript”>
var disqus_shortname = ‘SHORT-NAME-DEMO’; // required: replace example with
your forum shortname
(function() {
var dsq = document.createElement(‘script’); dsq.type = ‘text/javascript’;
dsq.async = true;
dsq.src = ‘//’ + disqus_shortname + ‘.disqus.com/embed.js’;
(document.getElementsByTagName(‘head’)[0] || document.getElementsByTagName(‘body’)
[0]).appendChild(dsq);
})();
</script>
First edit this code as instructed (e.g., replace any usernames or ids with the ones you have been provided by Disqus) and then replace the [Discussion forum goes here] placeholder in your page with this code. Load the page and test to see if it is working. One issue with Disqus is that it might not work if the webpage is being opened from a file on your computer. You may need to upload it to the domain name you entered when you signed up for Disqus to ensure it works correctly.
Completed Page
We have just put together a powerful site very quickly. Our site lets us share an interactive model with people anywhere in the world and allows them to comment directly on the model. All that it took to do this was the following completed code:
<head>
<title>A Fragile Future</title>
</head>
<body>
<h1>Introduction</h1>
<p>This is a model of world population
changes into the future.</p>
<IFRAME SRC=“http://InsightMaker.com/insight/1954/embed?topBar=1&sideBar=1&zoom=1″
TITLE=“Embedded Insight” width=600 height=420></IFRAME>
<div id=“disqus_thread”>Discussion Here</div>
<script type=“text/javascript”>
var disqus_shortname = ‘SHORT-NAME-DEMO’; // required: replace example with
your forum shortname
(function() {
var dsq = document.createElement(‘script’); dsq.type = ‘text/javascript’;
dsq.async = true;
dsq.src = ‘//’ + disqus_shortname + ‘.disqus.com/embed.js’;
(document.getElementsByTagName(‘head’)[0] ||
document.getElementsByTagName(‘body’)[0]).appendChild(dsq);
})();
</script>
</body>
</html>
| Exercise 11-7 |
|---|
| Go through these same steps with a model of your choosing. Make your own custom interactive webpage. |
Next edition: Going Global: Flight Simulators and Serious Games.
Article sources: Beyond Connecting the Dots, Insight Maker. Reproduced by permission.
Notes:
- This model was described and discussed in detail in the book The Limits to Growth. ↩
