Planning for the experiment

This next experiment focuses on a more three-dimensional approach in representing the hypertext ‘space’. In the Talmud Project by David Small, planes of related texts are layered over each other and viewers are able to bring into focus any plane of text.

As an extension of experiment 3, I wanted the different links in each fragment to display the following possible text fragments, which would be styled as planes. This way, viewers would know what they click into, making them more aware of the choices they make and the agency they have in defining the narrative sequence.

A sketch of how the texts would be positioned and layered.
The transition between the first and second fragments prototyped on Figma.

Breaking the coding process down

I outlined a few steps that I think could get me started with the experiment:

  1. Position the fragments behind the links
  2. Style the fragments with opacity and perhaps transform3d()
  3. With addEventListener(“click”, newfunction), create a function that:
    • Changes the position, opacity and the perspective of the new fragment that was clicked on
    • Brings in the next round of possible forks in the narrative (unsure how to carry this out)

Attempting to code

First, the text associated with the link is assigned position: absolute so that its position can later on be manipulated.

The text is now taken out of the normal flow of the HTML and the display: flex on the parent container aligns it to the centre of the page.

To get the x and y coordinates of the hyperlink created on “the woman”, getBoundingClientRect() is called on the link. However, I tried a bunch of ways to adjust the position of the ‘ghost’ text but they didn’t work.

HTML and JS with the multiple methods of adjusting the coordinates of the ghost text.

I even tried left:”100px” to check if I was targeting the right element and it did alter the position.

Adjusting the position of text-1 by using numbers instead of variables.
The ghost text is repositioned.

This meant that I was doing something wrong when using style.transform = “translateX(a)”, or style.transform = “translateX(${a})”, or style.left = `${a}`. Just to check if all the expressions and functions are working, I used console.log to print the values.

console.log added to check the x coordinate of the button “link-0-1” and the ghost text “text-1”.
The values don’t match.

After racking my brain and staring at the code for a long time, I finally realised that I didn’t use any units when assigning const a to style.left.

Added units to the left property. The values now match but the ghost text isn’t aligned to the centre of the button.
Subtracting half of the button’s width to the left property which fixed the alignment of the texts.

A checkpoint

While I managed to figure a tiny part of the experiment in code, it took me a long time just to get this far. Since the Figma prototype conveys the idea quite well, I’ll continue adding the rest of the fragments to the Figma prototype.