This past semester, we radically changed the curriculum for the Intro to Engineering course at the college where I teach. We are focusing more on competency-based learning via constructivism in this introductory practicum course. To track the student progress we used an online website portfolio. We tried to base this concept on the webpages we had to make in the FabAcademy. Here is what tools I used and what I’ve learned.
In the FabAcademy, students were required to make an HTML webpage each week chronicling their progress with that week’s project. This HTML page was saved in a Mercurial repository on the students’ computers, and synchronized with the FabAcademy server. At my college, the port for doing this was blocked, so it was impossible to synchronize the repository unless I did it at home.
Since we can’t run a Mercurial server (due to the port issue) at my campus, and I didn’t want to have to fix the problems of over 100 students creating multiple heads of the repository, I went another direction.
Instead of HTML pages, I created a multiuser WordPress installation only for students at my school. It was available online from any computer, and students can upload any code or design files in any format they wanted as long as it was a .zip. This worked marvelously. I had worked with WordPressMU years ago creating this exact type of environment but I couldn’t get an audience. In fact, I used the same domain name as my first site from long ago. the concept was supposed to be something like instructables.
WordPress was great due to the very low overhead for students. They didn’t have to install any funky toolchain, learn to use the terminal, or anything like that. They could focus on the assignments themselves. It did take a while for them to understand the concept of technical writing but eventually most students turned their website into a great portfolio. That was the main objective. The students last assignment was to export their website and import it into their own wordpress.com site to continue documenting their work to create an engineering portfolio they could show prospective employers. This is similar to the concept behind InnovationPortal created by Project Lead The Way and many other services of this sort.
In the end, just like FabAcademy, I wanted to scrape the pages and create a static HTML version of each student’s website at the end of the semester. This way our future students could benefit from previous generations and build upon their ideas and projects just like in the FabAcademy. being static HTML frees up resources on the server and reduces the chances of being hacked by reducing the number of live users and database entries. The static HTML copy of all the websites didn’t seem to be a hard task. I had found a plugin called Really Static that does exactly what I needed. I tested it on my own old senior project website.
While testing this plugin on a single site on our server, I accidentally activated it on all 100 blogs. This was a disaster! I’m still trying to figure out how to fix this issue. I emailed the support page and even emailed the author who stated he has used it on many multiuser sites, but I got no replies for help. I don’t really know PHP, just enough to hack on it to glue code snippets together (if I am lucky) so there’s no way I’d figure out how to fix it. Also the comments of the code for the plugin are in German, which I’m not great at.
A new solution appears
After this mess, I decided to look more into Static Site Generators (SSGs). This is a system that creates static HTML pages from the get-go. Users write pages and posts in a markdown language of some type in a plain text file, then the site generator turns this markdown language into a static HTML site. Some common ones are Jekyll and also Hyde. There are several large lists of Static Site Generators on google as it is the new fad in webhosting. The issue with almost all of these systems is that it is not user-friendly. For instance, a new post on wordpress is literally as easy as writing an email or word document. To use most of the systems I’ve seen for SSGs, you have to install a compiler (Ruby or python for instance) then some libraries, then you have to write your code in a text file, compile it into HTML, then manually upload these files to the server or to Github pages.
There is no way my students can handle doing all that without asking millions of questions, even if I make a how-to video showing each step (heck, they asked enough about wordpress as stupid-proof as it is…)
There are some relatively simple solutions out there already. Most notably is Dillinger which seems to be fully featured except missing a toolbar to help complete noobs. Having more features scares me since I’m not great at javascript. I just came across this one and had to mention it because it does integrate dropbox, googledrive, Microsoft onedrive, etc. I like it, but there are some drawbacks:
- it is too complicated for me to work on until I learn javascript enough.
- There doesn’t seem to be an index page that updates automatically (like Simple below) which is needed
- There doesn’t seem to be multiple templates. you get what you get, though it does look quite nice.
- There are no buttons to help noobs like I mention below in the RES.
While searching the list of SSGs, I found one solution I think is workable and stripped down enough that I might be able to wrap my heard around it somewhat. It is called “Simple” and it uses Github pages. It is very easy to set up and use and it has a web-based interface with a live preview of the generated HTML from the markdown language. Markdown is a very simple language to learn and is intuitive enough for freshman students to pick up quickly. So I forked Simple so I could hack on it. It has an MIT license, so it is fully manipulable.
While it has a simple interface, I wanted to make it easier for my students to use the Markdown language. I’m taking my cue from the Reddit Enhancement Suite (RES) Chrome plugin. When you make comments on Reddit using RES, there are little icons almost like a rich text editor. You have an icon for Bold, Italic, Strikethrough, quote, link, etc.
These icons make it dead simple to use markdown language, and especially if the user can see a live preview of the results using the “Simple” interface.
The template for Simple is currently hardcoded, but looks clean and easy to use. There are only a couple of issues:
- Students must get their own Github account and host their site there, making it a bit tricky to scrape the content at the end of the semester…
- Students must link images that already exist online somewhere. This means they will either have to upload the files to Github (yeah right, like I want to get 1M questions about using the sync app) or use their google drive from their school account. I’m almost 100% on them creating a folder in google drive to host the pics as long as I can guarantee I can scrape the images well enough. I haven’t tested this yet.
- They cannot directly embed youtube videos into the markdown language. I can skirt this by making a button that links to the video with a screenshot of the video pretty simply. I have seen other people extend the Markdown language to be able to embed youtube and vimeo videos, but I’m not savvy with javascript, which is what Simple is written in.
- There is currently only one template, and it is hardcoded.
Otherwise, it seems pretty darn good. I expect that it could be extended for use completely in google drive, but I’m not sure.
It is going to take me quite a while to implement the RES-style buttons due to my lack of javascript skills. If anyone wants to help, check me out here
Another strong contendor already has a simplified button interface and can be connected to google drive. This is called StackEdit. It has a great editor, fast previewer, and can export to several options as well. Since the buttons are a must, this is a good solution. It is too cocomplicatednot even sure if itis open source) for me to modify in any way, like Dillinger, but we can see how it goes. I haven’t played around with it enough to see if there is a variety of templates to use.
