Over the next several blog posts I am going to publish my Twine guide. What is Twine?

Twine is an open source (GPL) program that uses wiki formatting to create hypertext. The Twine program is available for free for Windows/Mac OSX and there is also a convenient web-based version. There isn't currently an iOS version. There is also an advanced command-line version called "Twee" that uses Python. Often people refer to Twine creations as "interactive fiction" or "choose your own adventure stories", but I'm just going to refer to them as Twine projects. In my middle school computer classes, students have used Twine to create websites, games, and quizzes.

A Twine project is organized in a nice graphical interface that shows connections between passages and points out any broken links. Once finished, the program generates a single HTML page which contains the entire project.

The Twine program allows you to create a project without needing to know HTML, CSS, and Javascript. Projects can be enhanced by more advanced coding, but the fact that such knowledge is unnecessary leads to a more friendly/equitable approach to HTML and game design. In my middle school computer classes, I have used Twine to introduce hypertext, interactive media, variables, conditional statements, and random numbers.

CONTINUE TO THE NEXT POST: How To Use Twine, Level One

Kidblog allows teachers to easily create a class blog in which students may create blog posts, but all submissions must be approved before being posted. Students do not need email addresses to join. Additionally, the site is secure and students must login in order to read blog posts.

Upon signing up, I immediately found two problems with the "Basic Free" version of Kidblog: a 100MB storage limit and strict limits on filetypes that can be uploaded. I needed students to be able to upload images, Twine games, and HTML files. I also quickly realized that Kidblog is built on WordPress and that with the right plugins, I could create by own version of Kidblog.

There were only three plugins that were needed to create a Kidblog-esque blog:

1. Add Multiple Users – by HappyNuclear | Visit plugin site –This plugin allows you to add multiple user accounts to your Wordpress blog using a range of tools including CSV. Create Contributor accounts for students. Contributors are able to create posts, but their posts must then be approved by an Admin before being published.
2. Upload Media For Contributors – by GeekPress | Visit plugin site – This plugin adds the ability to upload media for the contributors of your site.
3. Restricted Site Access – by Jake Goldman, 10up, Oomph | Visit plugin site – This plugin limits access to your site to users who are logged in or accessing the site from a set of specific IP addresses. Send restricted visitors to the log in page, redirect them, or display a message or page. Powerful control over redirection, including SEO friendly redirect headers.

Edit 8-1-15: Additional plugins that were helpful were Export User Data by Q Studio, Iframe to Embed by sw-galati.ro, Improved User Search in Backend by David Stöckl, Title to Tags by Thomas J. Belknap, WP User Avatar by flippercode, and Menus by dsader.
 

EDITED 8-10-15: Click here for an updated version of the Endless scrolling photo slideshow in Javascript


var total = 11;/* Total number of slides */
var currentSlide = 1;
function goto(slideID) {
if (slideID==total+2){/*If we are at the end of the slideshow tape, instantly rewind to the beginning of the tape*/
document.getElementById("slideshowTape_1").className = "slideshowTape speedZero/*set up the transition speed via a css class*/";
document.getElementById("slideshowTape_1").style.left = "0px";
currentSlide = 2;
setTimeout("goto(2)", 5);
}
else{
document.getElementById("slideshowTape_1").className = "slideshowTape speedSix/*set up the transition speed via a css class*/";
document.getElementById("slideshowTape_1").style.left = ((slideID - 1) * -400/*width of one slide*/) + "px";
var count;
for(count=1; count<=total; count++) {
document.getElementById("slideTab"+count).className = "slideTab hidden";
}
document.getElementById("slideTab"+slideID).className = "slideTab";
currentSlide = slideID;
}
}
function ran() {
randomNumber=currentSlide+1;
goto(randomNumber);
setTimeout("ran()", 6000/*change slides every 6 seconds*/);
}
setTimeout("ran()", 5);
// ]]></script>