d3.js force tree

The core of the idea is the node tree visualisation, this is achieved with a d3.js force layout and zoom libraries. My intuition for the force layout is that there’s a force bringing the nodes towards the center of the screen and then a second force keeping the distances between each set of nodes an optimal length and then it settles where those two forces balance each other out. Decoding the d3 force layout documentation is a challenge in itself and I resist the urge to write a new force layout for myself that is more intuitive to me.

search box

The search box is designed as a reusable module for my projects. I really like search boxes for navigation because they can make it easy to sort through a lot of options very quickly. All of the various nodes can be searched through and user setting configuration pages show up alongside those results colour-coordinated so that it’s easy to tell the difference between them. It can also be configured so that multiple search phrases result in the same page (e.g. both the “shortcuts” and “help” pages result in the same page that shows a list of custom search phrases). When the search field is empty but focused, other content can be shown such as the next suggested node.

suggested nodes

The site design is largely target-driven. When a node is set as a target all of the prerequisites to that node on the tree turn red. However the user doesn’t need to think about where to begin that journey to their target because the next step is calculated for them. Based on the current target, the script will recursively check if the user has all of the dependencies to understand it, and if they don’t then it will ask the same question of its dependencies, and the dependencies dependencies and so on. This continues until it comes across a node that either has no dependencies, or the user has completed all of them and then suggests that the user completes that to help reach their target. I like this kind of recursive structure because it allows for complex systems to be designed with very little code.

form generator

This is a subtle feature nobody would notice unless I pointed it out, but it’s a reusable module I can use in many of my projects. I wanted an input form that could expand and contract allowing for variable-sized arrays of data to be input all at once. This is a tedious component to design again and again for differently shaped data structures so I made an object that when initialised with an object creates a form of the same structure recursively. The object can then retrieve all of the fields of the form recursively regardless of how many entries the user has selected the form to have.

Form Generator input

Form Generator output

infinite test feed

This page is based on the freerice.com model and is intended as a starting point for new users to the site. The site content covers a wide range of education levels from primary school to undergraduate university and each user will find themselves beginning with a unique footprint of knowledge. The first question is generated randomly from the entire pool of nodes and then the pool of possible next nodes is then divided into two sections: nodes that are dependent on the node currently being tested and nodes that the node currently being tested depends on. If they answer correctly then it is assumed that they can handle the more challenging questions that depend on that node, but if they answer incorrectly then it’s assumed that they need easier questions that come from nodes it’s dependent on. This is repeated until there are no harder/easier questions available and then it starts again picking questions from the whole pool. This calculation is done while the user answers the question so that it can be loaded quickly when they complete

celebration animation

the node tree was my first experience using svg graphics and the celebration animation was my first project using canvas raster graphics. Studying mechanical engineering meant that the physics to achieve the aesthetic I was aiming for were quite straight-forward to configure, the challenging part was getting the animation to render smoothly on both mobile and desktop.

scrolling intro tour

I am very inspired by projects like Josh Comeau’s Waveform tutorial that dynamically update the content on the page based on how far the user has scrolled. To provide an intro tour to the site I used the Intersection Observer API along with the css scroll-snap-type property to make sure that there were 10 distinct views that the user couldn’t stop in-between, and an animation when transitioning between each. The trickiest parts were getting everything to work and look appropriate on both desktop and mobile.

simulated navigation

There are JavaScript libraries like React that allow the entire website to function as a single page which means that transitioning between pages is near-instantaneous, however I have an allergic reaction to these kinds of frameworks and prefer to work with plain JavaScript as often as possible. window.history.pushState() and some simple url string parsing was used to simulate the transition between "pages" which was surprisingly effective and even allowed for the use of the browser "back" and "forward" buttons.

email alerts

Since the site is in its early stages I wanted to keep an eye on how it’s being used so I set up a very simple Firebase Function that sends me an email using nodemailer whenever a new user to the site is added. From this I have learned that often people will view the tour, but not get further into the main content of the site behind the authentication wall.

google auth

Login and authentication are handled by Firebase. Currently the only two login options are email/password and Google OAuth.

where to from here

There are some things that can be done that can make the site more efficient (such as stopping the node tree animation after it has been running for a while), but the amendments I’m more focused on are lowering the barrier to entry. Such as allowing people to view the main site content without logging in, making tutorial videos explaining the functionality, and making it easier to add nodes and tests.

contact