Student Engineering Portfolios

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:

  1. it is too complicated for me to work on until I learn javascript enough.
  2. There doesn’t seem to be an index page that updates automatically (like Simple below) which is needed
  3. There doesn’t seem to be multiple templates. you get what you get, though it does look quite nice.
  4. 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.

redditIcons

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:

  1. 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…
  2. 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.
  3. 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.
  4. 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.

Adam-Atom

Doctoral Dissertation or Master’s Thesis Template

I’ve already mentioned one good tool for research papers, so here’s another that might be helpful.

Most schools have a set format for their dissertations and theses. My school was the same.  They provide a manual showing what they expect your formatting to be.  Many people have trouble with this. You must make a meeting with a specific faculty member in the graduate school and she will take a ruler and measure your margins, and go over in extreme detail the spacing, numbering, etc. of your document. Many many people get rejected and I’ve even talked to people who pay lots of money for other people to format the documents for them.  They don’t provide an exact template for any specific software, but using the google machine can help you find Microsoft Word or LaTeX tempaltes.  Personally, I like LibreOffice it is completely cross-platform (works on windows, mac, and linux systems)  completely free, open source, has lots of great plugins and it lives in the world between Microsoft Windows and LaTeX. It is GUI-based (WYSIWYG, visual) like Microsoft Word, but also much more powerful like LaTeX.   I dislike LaTeX because it is incredibly buggy and you have to program your text documents.  I program other stuff all day long, I am sick of that!

Anyway, I made my own template and write up a very detailed explanation on how to use it and my best tips and tricks for modifying the basic template if you want.  I also have a chart of suggested plugins to make your papers look amazingly good and professional. Again, I used LibreOffice, so it can be used in OpenOffice as well. This is specific to my school, so be sure you double check your school’s documents to see exactly what kind of margins and page numbering they require.  (Note it is in Open document Format and though I haven’t tested it, it *might* work in other programs like Microsoft Word).

Download my template here!

Adam-Atom

Annotating (Grading) PDF Assignments

For a while now, I’ve been asking my students to submit their work as PDFs online using moodle (or email).  I always use open source tools to annotate and grade these documents.  There are several apps out there for this, I happen to use Xournal.  The problem was that my preferences in Xournal were never saved.  So I figured if I had the problem, maybe others do to.  Here’s how to fix it:

First find where the preferences are stored.  In Linux, these are found in a text file in my Home folder. I assume it will be similar in Windows.  I edited this text file to automatically start with good grading tools already selected: ie. Red text with a Serif font.

$ gedit ~/.xournal/config

Then Ctrl+F and find “startup_tool”  set this to “text”

Then Ctrl+F for “pen_color”and change this to “red”

Finally Ctrl+F for “default_font” and set this to “Serif”.

Save the file and you are done. Now every time you open Xournal, these settings will be loaded and you can just start commenting and grading without having to do any additional tool selections.

 

UPDATE: In Windows, Xournal configurations are hard to find.  You must first set it up so you can view hidden folders and files (Go to Start menu–> Control panel –> Appearances and Optimizations –> Folder Options –> Show hidden files and Folders.  Look for the radio buttons and select “Show hidden files, folders, or drives”.  While I’m in here I usually also uncheck “Hide extensions of known filetypes”  which lets me rename files including their filetype and see what types of files they are directly.

Once you do this, you can run Xournal and “Save Preferences” once as Ken mentioned in the comments below. Close Xournal first, then go to the path “C:Users\<username>\.xournal  (Notice the dot in “.xournal”!!!) Open the “Config” file in a text editor (like notepad or notepad++ or Sublime text editor)  Now you can make the changes above, and save.

A note of caution, edit a PDF with text, export it, then open it in another PDF reader to make sure it does not mess up.  Sometimes when editing the config file, the Font doesn’t work correctly and I end up with garbage text and random characters on my exported copy which isn’t useful for students.  If this happens to you, simply delete the config file and start over.

 

Adam-Atom

W.A.S.P. 2.0 Manual and Schematic Online

WASP2-0_smallA while back, we released all the manuals for SheekGeek kits like the WASP Original and Black Widow Walker manuals to the public.  We have a newer version of the WASP called the WASP 2.0 and we are releasing the Manual and schematic for it.  We’d love to see what modifications you can make with the new WASP! Feel free to post in the comments.