JS on Grok creates puzzle nostalgia

Text-based adventure games aren’t dead. Who knew?

Yasmin Clarke
Nov 5, 2019 · 6 min read

For Grok’s 2019 web design competition, we created an all-new Advanced stream. This incorporated JavaScript for the first time on Grok — super exciting!

You’ve already seen our favourite designs from the Beginners and Intermediate streams of Web.Comp 2019, but we’ve been saving this. Since we’ve just released our new JS course, this was the perfect time to publish the best of the best from Advanced Web.Comp 2019 💪 🏆.

The tournament component of the Advanced stream was to create an online puzzle using JS elements to create interactivity for the user.

This was a free-form project, so students were encouraged to explore, experiment, and let their creativity run free! The only rule was Do No Harm, so that means:

  • It’s every programmer’s responsibility to not make programs or write code that harms people. That means no exploits, nothing offensive and no inappropriate content. We didn’t accept any unsafe projects.
  • This also means nothing that interacts with the wider Internet, like iframe, AJAX or fetch calls.
  • As a programmer you should always make sure you understand all the code you use, so don’t copy snippets from the internet.

Grok developers Shelley, Ben, and Jack spent a super fun couple of days reviewing all the submissions to this tournament. Here’s our top faves of the puzzle competition!

Minesweeper, created by Jon (grade 10, Barker College)

By and large, Grok staff are children of the early internet, and we just couldn’t resist this nostalgia hit. You can choose how big to make your puzzle board, and how many mines to include, a neat way of allowing the user to set their own difficulty level. I could spend hours lost here. Minesweeper is a really complicated game, and this is a great rendition.

Click here to play the puzzle!

Treasure of Java, created by Ela (grade 10, Redlands)

A very Indiana Jones puzzle game, this one. There’s multiple levels, and each puzzle seems easy….at first! Great design — clean, clear, and easy to use. We particularly love the use of background images to really make this game pop. Ela has taken our initial puzzle game to the next level.

Click here to play the puzzle!

Guess the password, created by Sher Wen (grade 8, Methodist Ladies’ College)

This is a very cute word game puzzle. It’s got a solid design, with a good choice of font. All the colours are clear and easy to read, with good use of CSS and Javascript.

The answer might be intuitive to some, or perhaps not! Give it a go and see if you can work out the super secret password. A lot of fun to play, and a great programming reference 😉.

Click here to play the puzzle!

Click to Play, created by Zac & Jack (grade 11, Reddam House)

This game has us in stitches every time! 😂 There’s a lot of complicated JS in here and some neat CSS transforms. We loved the oh-so-simple game mechanic…but so addictive, as with all really good internet games.

Telegraph Mystery, created by Oliver (grade 9, Reddam House)

A film noir-esque puzzle adventure game — where do we sign up?! There’s a nice variety of puzzles in this one to keep you on your toes. The maze game and the swapping puzzle are also very original and neat concepts. The design suits the content of the puzzle perfectly, and we love the storytelling aspect — clearly a lot of effort went into fleshing it out.

Adventure.io, created by Ethan (grade 9, Reddam House)

A classic text-based adventure game, now with pictures! This was super fun to explore, and it reminded me of the old Hitchhikers Guide to the Galaxy text game. (Since nothing is ever deleted from the internet, you’ll be pleased to know that yes, you can still play it online!). We’re really impressed by the amount of work that went into this one.

Special mention: Financial Superiority

We couldn’t resist sharing this one! A special mention to Melonie, a teacher from Cobram Anglican Grammar School, who created a financial literacy puzzle to test her students’ maths skills.

This is incredible! Very detailed and clearly a lot of effort. We especially liked the learning aspect of the puzzles. The design is clean and consistent, and it’s great that to see a variety of inputs rather than just text. A fantastic way to incorporate coding skills into the maths classroom too!

Click here to play the puzzle!
NB: you’ll need to get the correct answers¹ to be rewarded.

Which one is your fave? Comment below!

If you’re inspired by these games, you can jump into our new JS course with your students right now.

Students will need a Grok Learning subscription to access the JS course, which includes an HTML refresher, 4 modules of JavaScript content and problems, and 2 open-ended projects for students to build their own puzzle games.

  1. For those of us who aren’t so numbers-minded, here’s a cheatsheet so you can play the puzzle: Car answers: $25/week, 62 weeks, 106 weeks, 335 weeks, Swift; Bank answers: Bank First, Conn Bank, Benalla; House answer: (any of the three) $571 or $916 or $270; Investment: $16598, $4152; Scholarship: $114286 (slider)

Grok Learning

Articles about coding by the team at Grok Learning &…