This repository features a series of static site games created with the Twine framework relating to civic engagement and democratic participation. The Twine framework allows for building narrative games that place players in a story and enable them to make choices and see how their strategy plays out. The result is a fun, engaging, and scalable way to teach concepts around civic engagement through an immersive environment that shows the concepts in action.
The site is built with simple HTML, CSS, and Javascript, and therefore does not have any dependencies that need to be installed.
This repository is connected to a CI/CD pipeline that will automatically deploy any new code pushed to the master branch to the active site (https://games.demcloud.org). Any tests or partial code that are not intended for production should be committed to a separate branch, and can be merged into production when finished.
In order to add a new game to the site, simply add the .html file for the new game to the main directory of this repository. Once the new code has been automatically deployed, the new game will be available at games.demcloud.org/name-of-file.html.
When a new version of a Twine game is created, it will be exported into a new HTML file that will not have the Google Analytics tags in it. To re-enable Google Analytics, two tags must be added back in, one at the top of the <head> section and one directly inside the <body>
For the Leading Change game, insert the following tag at the top of the <head> section:
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-MPR5NLN');</script>
<!-- End Google Tag Manager -->
Insert the following tag at the top of the <body> section.
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MPR5NLN"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
For the Cybersecurity game, insert the following tag at the top of the <head> section:
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-WK7KXHM');</script>
<!-- End Google Tag Manager -->
Insert the following tag at the top of the <body> section.
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WK7KXHM"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
If using Transifex Live, you must wrap all strings of text you wish to translate or elements like images that you do not want to translate in divs. Translated links to new passages will not work unless you've wraped it in a div.
When a new version of a Twine game is exported from Twinery, it will be exported into a new HTML file that will not have the Google Analytics tags in it. To re-enable Transifex Live, one tags must be added back in at the top of the <head> section.
For the Cybersecurity game, insert the following into the section:
<!-- Tranifex Live -->
<script type="text/javascript">window.liveSettings={api_key:"ac21286b2e664433b7a18a92c55654af"}</script>
<script type="text/javascript" src="//cdn.transifex.com/live.js"></script>
<!-- End Transifex Live -->
The HTML files are the authoritative file. When making changes, make sure your repository is up-to-date with the most recent version of the HTML file. Build the Twee file from the updated HTML file if you want to edit in Twee. When done editing, re-export from Twee to the standard HTML format and push your changes to Github.
To create a new Twee file from an existing exported Twine HTML file, use "tweego -o exampleout.twee examplein.html -d" To then create the HTML file, use "tweego -o exampleout.html examplein.twee" It is critical that changes are exported from the Twine editor and saved and from Twee and saved in the primary html file, and that each are reloaded every time, or there will be sync errors.