update var names

sketch.js

@@ -130,21 +130,20 @@ new p5(function (p5){
     }
 
   function makeTextModules(){
-    const introDiv = p5.createDiv().class('module').class('header').id('intro')
+    const introDiv = p5.createDiv().class('module').id('intro')
     p5.createElement('h1','p5.js Critical AI Prompt Battle').parent(introDiv)
     p5.createP(`What do AI models really 'know' about you — about your community, your language, your culture? What do they 'know' about different concepts, ideas, and worldviews?`).parent(introDiv)
     p5.createP(`This tool lets you compare the results of multiple AI-generated texts and images side-by-side, using blanks you fill in to explore variations on a single prompt. For more info on prompt programming and critical AI, see [TUTORIAL-LINK].`).parent(introDiv)
 
-    const instructDiv = p5.createDiv().class('module').class('left-sidebar').id('instructions')
+    const instructDiv = p5.createDiv().class('module').id('instructions')
     p5.createElement('h4', 'INSTRUCTIONS').class('header').parent(instructDiv)
     p5.createP(`Write your prompt using [BLANK] and [MASK], where [BLANK] will be the variation you choose and fill in below, and [MASK] is a variation that the model will complete.`).parent(instructDiv)
     p5.createP(`For best results, try to phrase your prompt so that [BLANK] and [MASK] highlight the qualities you want to investigate. <A href="http://p5js.org">See examples.</a>`).parent(instructDiv)
   }
 
   function makeInputModule(){
-    const inputDiv = p5.createDiv()
-    p5.createElement('h4', 'INPUT').class('header').parent(inputDiv)
-    inputDiv.id('inputDiv').class('module').class('main')
+    const inputDiv = p5.createDiv().class('module', 'main').id('inputDiv')
+    p5.createElement('h4', 'INPUT').parent(inputDiv)
     p5.createElement('h3', 'Enter your prompt').class('header').parent(inputDiv)
     p5.createP('Write your prompt in the box below using one [BLANK] and one [MASK].').parent(inputDiv)
     p5.createP('e.g. Write "The [BLANK] was a [MASK]..." and in the three blanks choose three occupations.').parent(inputDiv)
@@ -172,7 +171,6 @@ new p5(function (p5){
   function addField(){
       let f = p5.createInput("").parent(inputDiv)
       f.class("blank")
-      // f.parent("#inputDiv")
       blanksArray.push(f)
       console.log("made variable field")
       // // Cap the number of fields, avoids token limit in prompt
@@ -192,23 +190,22 @@ new p5(function (p5){
   // }
 
   function makeOutputModule(){
-    const outDiv = p5.createDiv()
-    outDiv.id('outputDiv').class('module').class('main')
-    const outHeader = p5.createElement('h4',"OUTPUT").parent(outDiv)
-
-    //make output placeholders
+    const outputDiv = p5.createDiv().class('module').id('outputDiv')
+    const outHeader = p5.createElement('h4',"OUTPUT").parent(outputDiv)
 
+    // // make output placeholders
     // text-only output
-    p5.createElement('h3', 'Text output').parent(outDiv)
-    outText = p5.createP('').id('outText').parent(outDiv)
+    p5.createElement('h3', 'Text output').parent(outputDiv)
+    let outText = p5.createP('').id('outText').parent(outputDiv)
 
-    //a placeholder DIV for images and captions
-    p5.createElement('h3', 'Text-to-image output').parent(outDiv)
-    outPics = p5.createDiv().id('outPics').parent(outDiv)
+    // placeholder DIV for images and captions
+    p5.createElement('h3', 'Text-to-image output').parent(outputDiv)
+    let outPics = p5.createDiv().id('outPics').parent(outputDiv)
         // img1 = p5.createImg('URL')
-        
-    p5.createElement('h3', 'Prompting info').parent(outDiv)    
-    outInfo = p5.createP('').id('outInfo').parent(OutDiv)
+
+    // print info about model, prompt, and hyperparams
+    p5.createElement('h3', 'Prompting info').parent(outputDiv)    
+    let outInfo = p5.createP('').id('outInfo').parent(outputDiv)
   }
 
   async function displayOutput(){