Toggle text

gwu-libraries · Sep 9, 2024 · d63d1f4 · d63d1f4
1 parent 39018c1
commit d63d1f4
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 14 deletions.
diff --git a/docs/text-as-data.html b/docs/text-as-data.html
@@ -5,7 +5,11 @@
     </head>
     <body>
         <h1>Text vs. Tokens</h1>
-        <h2>What would you say that the following text is <i>about</i>?</h2>
-        <div id="text"></div>
+        <h2>The following text has been tokenized, and the tokens are presented in alphabetical order (exclusing punctuation). What would you say that the text is <i>about</i>?</h2>
+        <div id="tokens"></div>
+        <h2>Now review the original text. How close was your original guess?</h2>
+        <div id="text">
+            <p>Click here to show the text.</p>
+        </div>
     </body>
-</html>
+</html>
diff --git a/docs/text_swap.css b/docs/text_swap.css
@@ -6,10 +6,10 @@ h2 {
     font-weight: lighter;
 }
 
-#text {
+#text, #tokens {
     padding-left: 25px;
     padding-right: 25px;
     font-size: 1.25em;
     text-align: justify;
     font-family: sans-serif;
-}
+}
diff --git a/docs/text_swap.js b/docs/text_swap.js
@@ -7,15 +7,24 @@ TOKENIZED_TEXT = `
 African African African An Business CCDL Center Cissé Cissé Cyber Diplomacy GW GWSB GWSB GWSB Leadership Pape School a about academic adjunct advances against aiming aims also ambassadors an and and and and and and and and and announced as between cofounder community conferences connects cyber cyberattacks cybersecurity cybersecurity cybersecurity defend diplomacy during education enhance for government heads help help include information last leaders leaders leaders members ministers month of of of of of officials opportunity organization partnership partnership partnership policy policymaking practices prepare problems professor providing rapidly real said said seminars shape solve state students technology technology that the the the the the the the to to to to understanding while will with with world year
 `
 
-function randomDisplay() {
-    let randIndex = Math.floor(Math.random() * (2 - 0) + 0);
-    let displayText = [TEXT, TOKENIZED_TEXT][randIndex];
+function createP(text, div) {
+    let p = document.createElement('p');
+    p.innerHTML = text;
+    div.appendChild(p);
+}
+
+function addText(e) {
+    let textDiv = document.getElementById('text');
+    textDiv.innerHTML = "";
+    TEXT.split('\n\n').forEach(paragraph => createP(paragraph, textDiv));
+    textDiv.removeEventListener("click", addText);
+}
+
+function textDisplay() {
+    let tokensDiv =  document.getElementById('tokens');
+    createP(TOKENIZED_TEXT, tokensDiv)
     let textDiv = document.getElementById('text');
-    displayText.split('\n\n').forEach(paragraph => {
-        let p = document.createElement('p');
-        p.innerHTML = paragraph;
-        textDiv.appendChild(p);
-    });
+    textDiv.addEventListener("click", addText);
 }
 
-window.onload = randomDisplay;
+window.onload = textDisplay;