4.3.2: Prototyping

Opacity in the Opaque Online Publishing Platform (OOPP) functions for two different kinds of digital information: text and image. The code which Sagar Prabhu developed for the image opacity function during the 2023 IDAH Summer Incubator operated using JavaScript which toggled access to the image files with three distinct buttons. The JavaScript allowed users to click back and forth between different states which would activate a span class in the text and change the image file displayed on the site. Here is the code which Sagar wrote by the end of the incubator:

At the top of the file:¹

<div class="toggle-buttons">

<button class="toggle-button" onclick="toggleOpacity('partial')" data-mode="partial">Partial</button>

<button class="toggle-button" onclick="toggleOpacity('opaque')" data-mode="opaque">Opaque</button>

<button class="toggle-button" onclick="toggleOpacity('non-opaque')" data-mode="non-opaque">Non-Opaque</button>

</div>

An example image placed in the text:

<img id="HenryReport" src="/diss/assets/img/ReportoftheHenryPhippsIns3_1905-1906158.jpg" alt="ReportoftheHenryPhippsIns3" width="1200" height="600">

The code at the bottom of the file:

<script>

function toggleOpacity(mode) {

const partialLines = document.querySelectorAll('.partial-lines');

const opaqueLines = document.querySelectorAll('.opaque-lines');

const HenryReport = document.getElementById('HenryReport');

const henrydetail = document.getElementById('henrydetail');

// Remove the "active" class from all buttons

const buttons = document.querySelectorAll('.toggle-button');

buttons.forEach(button => {

button.classList.remove('active');

});

if (mode === 'partial') {

// Toggle partial lines

partialLines.forEach(line => {

line.style.backgroundColor = '#000000'; // Set background color to black

HenryReport.src = "/diss/assets/img/ReportoftheHenryPhippsIns3_1905-1906158_Partial.png";

});

// Ensure opaque lines are fully visible

opaqueLines.forEach(line => {

line.style.opacity = '1';

line.style.backgroundColor = ''

});

        

} else if (mode === 'opaque') {

// Toggle opaque lines

opaqueLines.forEach(line => {

line.style.backgroundColor = '#000000'; // Set background color to black

HenryReport.src = "/diss/assets/img/ReportoftheHenryPhippsIns3_1905-1906158_Full.jpg";

});

// Ensure partial lines are fully visible

partialLines.forEach(line => {

line.style.opacity = '1';

line.style.backgroundColor = ''

});

}

else if (mode === 'non-opaque'){

HenryReport.src = "/diss/assets/img/ReportoftheHenryPhippsIns3_1905-1906158.jpg";

partialLines.forEach(line => {

line.style.opacity = '1';

line.style.backgroundColor = ''

});

opaqueLines.forEach(line => {

line.style.opacity = '1';

line.style.backgroundColor = ''

});

}

// Add the "active" class to the clicked button

const activeButton = document.querySelector(`button[data-mode="${mode}"]`);

activeButton.classList.add('active');

    

}

</script>

This code works for both the images and the text. First, by classifying unique images in the “img id” function in Hyper Text Markup Language (HTML). The unique tag, in this case for the image example given is “HenryReport”, is matched with a set of reference information in the footer JavaScript. It appears in three “if/else” functions tagged as “partial”, “opaque” and “non-opaque”. When the buttons, which are found in the top part of the code, are clicked, the script changes the file name for the images based on what is provided in the “HenryDetail.src” lines of the code. Most simply, the code changes what file the browser displays for a reader, based on what button is selected.

This means that the opacity function is not something that is applied by the code, it is a function that swaps between different files.² This is important for the workflow described later in this chapter, because it means that each image has to be custom edited as part of its formatting for web (4.3.4).

What is important to note about Sagar’s code is that it functions in such a way as to scrub the non-selected images from the site as it is being viewed. Using this code means that if someone is interfacing with the “opaque” class, they cannot actually access the specific information to find and read the “transparent” and “partial” images in the site.

In terms of actually erasing the other version, Sagar’s code is exceptional, but it runs into a few functionality issues which emerged in the period following the incubator. Most simply, there is a lot of excruciatingly fine work required to get both the image class and the footer to function properly. This poses two problems: first, for the creation of a dissertation that has dozens of images, this detailed work requires hours of additional labor to get it to function; second, as the OOPP was designed to eventually become a usable template, requiring an additional set of conceptual and technical aptitudes to get the opacity feature to function would place the final platform outside the aptitudes of its desired audience.