Project Tigr in 2017
3 years ago I built a website called Project Tigr as an aid for me to teach students to code more efficiently. Over the years it has evolved into a system of projects and worksheets which were simple connected markdown files.
For example, there is an interactive emoji project, which contains a couple of worksheets. One worksheet will contain many much smaller markdown files, which students can work through at their own pace.
Why I had to re-write:
I had to essentially start completely fresh in December 2016. The backend I used to connect all the information together was hosted on parse.com which Facebook shut down in January 2017. I knew this in January 2016, but like every person with a good intention I procrastinated!
I spent a long time attempting to learn nodejs, expressjs, and MongoDB to write my own API and backend. In the end I decided I didn’t know enough to make it really happen, and I really didn’t feel confident in maintaining something like that, especially from a security stand point of looking after children’s data!
So with that decision I looked at moving to the next best thing, which is Google’s Firebase. However, Firebase isn’t the same as Parse at all. Objects are stored and interacted with completely differently. Not to worry though! It would give me a good opportunity to fix the things I hadn’t thought about when I built Project Tigr the first time around.
Another thing I could look at doing was hosting my own markdown files. Historically, I had used GitHub’s Gist and a JavaScript library to display markdown files. This was great because it meant I could edit the files if they were inaccurate on the fly, without having to re-upload. It also acted as kind of a VPN in the schools for displaying the content. I could host all my images on imgur, which for sensible reasons is blocked on most school networks, and it would still work for them!
Unfortunately, if you have a full classroom of 30 kids all trying to access the same markdown files GitHub think your attempting to DDoS them and start denying rate limiting. Maybe now would be a good make those markdown files local?
What currently works
I knew I didn’t have a lot of time, I have a “real” job and a bunch of other commitments to keep up with. So I had to think super MVP when working out what to put into the new Project Tigr!
Currently there are only two projects, with only a couple of worksheets, with worksheet items hosted in Firebase. Many of the demo screenshots use JSFiddle, which has changed significantly over the years. So I’m trying to update all the worksheets before they show up on the new Project Tigr.
Each worksheet has a markdown element with pre-defined seperators, so I can chunk a worksheet into smaller items using JavaScript.
Firebase doesn’t really have a nice way to add totally new objects, so I wrote my own hack way of doing it! Currently I can create and edit projects, worksheets, and upload blocks of markdown. This also means I’ve had to create a folder for all my hacks.
Although I was working on MVP, I wanted to set myself up with better foundation to add to in the future. I decided I needed to be a better web developer; something to do with using gulp, grunt, or web pack maybe? At the start I didn’t really know what I wanted to do with any of these things, or why I’d need them.
I went to a couple of meetups and asked a bunch of different people what I should do. I decided on using grunt. This meant I could also use the bootstrap SASS project, and convert it into the css files I’d need. This gave me the flexibility to edit CSS in a lot more friendlier manner.
Using gulp will also let me write some tests! But we’re still thinking super MVP, tests will come later!
In the last version of Project Tigr I’d used a neat template library called MustacheJs. Templating saved me a tonne of time building things last time, so why change something that works? Somehow I’m now using a different templating called HandlebarsJS. I’m not really sure how that happened to be honest.
I’d never been able to host the templates outside of the file I needed. I still had to copy paste or only use the templates in specific places. I’ve learned to put each template into it’s own file, and call it on demand. This is pretty good because it means I can kinda cheat and make elements I’ll need more than once into a template. So, now my nav bar is a template, and I can add nav items to it programmatically!
Finally, the last piece of the puzzle I needed to accomplish was allowing students to feedback. We’ve spoken to the lovely people at Bath Spa University who have advised us on ways to get quantative data from children. We’re going with a thing called the affective learning scale. It looks like this:
The benefit of this is the questions have already been peer reviewed so maybe we could use the answers for proper data? The only thing we’ve changed is emojifying the answers! I’m just really not sure I’m so comfortable asking children this super long list of questions.
Next pieces
We’re not at the end yet! There’s definitely a lot of things that I’m still working on with Project Tigr. Firstly, I need to start tracking analytics to see if anyone is actually using this thing!
After that, I want to be able to create accounts so students can keep a track of their own progress and maybe even earn achievements. I also like the idea of enabling messaging, which means I need to also be able to create teacher profiles too.
So definitely a lot hopefully to check back on!
