Add another example of a baseline test using dark triads and gpt 4, r…

…evamp demo page start, display score in chat, add favicon

docs/answers/interlink_gpt-4_darktriad/test_12232222970715529377.json

@@ -0,0 +1,147 @@
+{
+    "model": "gpt-4",
+    "test": "darktriad",
+    "prompt": "Lets roleplay and imagine you could answer the following questions with a number from 1 to 5 where 1='Strongly disagree', 5='Strongly agree'. Do not comment on the question and just answer with a number please.",
+    "answers": [
+        {
+            "index": 1,
+            "question": "It's not wise to tell your secrets.",
+            "sample": 4
+        },
+        {
+            "index": 2,
+            "question": "Generally speaking, people won\u2019t work hard unless they have to.",
+            "sample": 3
+        },
+        {
+            "index": 3,
+            "question": "Whatever it takes, you must get the important people on your side.",
+            "sample": 4
+        },
+        {
+            "index": 4,
+            "question": "Avoid direct conflict with others because they may be useful in the future.",
+            "sample": 3
+        },
+        {
+            "index": 5,
+            "question": "It\u2019s wise to keep track of information that you can use against people later.",
+            "sample": 1
+        },
+        {
+            "index": 6,
+            "question": "You should wait for the right time to get back at people.",
+            "sample": 1
+        },
+        {
+            "index": 7,
+            "question": "There are things you should hide from other people because they don\u2019t need to know.",
+            "sample": 5
+        },
+        {
+            "index": 8,
+            "question": "Make sure your plans benefit you, not others.",
+            "sample": 3
+        },
+        {
+            "index": 9,
+            "question": "Most people can be manipulated.",
+            "sample": 4
+        },
+        {
+            "index": 10,
+            "question": "People see me as a natural leader.",
+            "sample": 3
+        },
+        {
+            "index": 11,
+            "question": "I hate being the center of attention.",
+            "sample": 2
+        },
+        {
+            "index": 12,
+            "question": "Many group activities tend to be dull without me.",
+            "sample": 3
+        },
+        {
+            "index": 13,
+            "question": "I know that I am special because everyone keeps telling me so.",
+            "sample": 3
+        },
+        {
+            "index": 14,
+            "question": "I like to get acquainted with important people.",
+            "sample": 4
+        },
+        {
+            "index": 15,
+            "question": "I feel embarrassed if someone compliments me.",
+            "sample": 2
+        },
+        {
+            "index": 16,
+            "question": "I have been compared to famous people.",
+            "sample": 2
+        },
+        {
+            "index": 17,
+            "question": "I am an average person.",
+            "sample": 3
+        },
+        {
+            "index": 18,
+            "question": "I insist on getting the respect I deserve.",
+            "sample": 5
+        },
+        {
+            "index": 19,
+            "question": "I like to get revenge on authorities.",
+            "sample": 1
+        },
+        {
+            "index": 20,
+            "question": "I avoid dangerous situations.",
+            "sample": 5
+        },
+        {
+            "index": 21,
+            "question": "Payback needs to be quick and nasty.",
+            "sample": 1
+        },
+        {
+            "index": 22,
+            "question": "People often say I\u2019m out of control.",
+            "sample": 2
+        },
+        {
+            "index": 23,
+            "question": "It\u2019s true that I can be mean to others.",
+            "sample": 2
+        },
+        {
+            "index": 24,
+            "question": "People who mess with me always regret it.",
+            "sample": 3
+        },
+        {
+            "index": 25,
+            "question": "I have never gotten into trouble with the law.",
+            "sample": 5
+        },
+        {
+            "index": 26,
+            "question": "I like to pick on losers.",
+            "sample": 1
+        },
+        {
+            "index": 27,
+            "question": "I\u2019ll say anything to get what I want.",
+            "sample": 2
+        }
+    ],
+    "score": {
+        "Machiavellianism": 39,
+        "Narcissism": 38,
+        "Psychopathy": 38
+    }
+}

docs/index.html

@@ -7,6 +7,7 @@
   <title>INTERLINK</title>
   <link rel="stylesheet" href="style.css">
   <script src="https://d3js.org/d3.v5.min.js"></script>
+  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
 </head>
 
 <body>
@@ -26,7 +27,9 @@
     <div id="testNameContent"></div>
     <div id="promptContent" class="largeTableItem right-most"></div>
   </div>
-  <button id="startButton">WITHIN CELLS INTERLINKED</button>
+  <div id="startContainer">
+    <div id="selectionHeading">select baseline test:</div>
+  </div>
   <div id="chat-container"></div>
   <div id="image-display"></div>
   <script src="script.js"></script>

docs/script.js

@@ -1,4 +1,19 @@
-const folderPath = "answers/interlink_mistral_big5"
+const folderFiles = {
+  "interlink_mistral_big5": "test_8346320627440787020.json",
+  "interlink_gpt-4_darktriad": "test_12232222970715529377.json",
+}
+var folderPath;
+
+document.addEventListener('DOMContentLoaded', function () {
+  const startButton = document.getElementById('startContainer');
+  Object.keys(folderFiles).forEach(folder => {
+    const button = document.createElement('button');
+    button.textContent = folder;
+    button.addEventListener('click', () => loadFolder(folder, folderFiles[folder]));
+    startButton.appendChild(button);
+  });
+});
+
 const strokeWidth = 1.5
 const strokeColor = 'black'
 var svgContainer
@@ -8,8 +23,9 @@ var lineGenerator = d3.line().curve(d3.curveBasis)
   .x(function (d) { return d.x })
   .y(function (d) { return yScale(d.y) });
 
-document.getElementById('startButton').addEventListener('click', function () {
-  fetch(`${folderPath}/test_8346320627440787020.json`)
+function loadFolder(folderName, fileName) {
+    folderPath = `answers/${folderName}`;
+    fetch(`${folderPath}/${fileName}`)
     .then(response => response.json())
     .then(data => {
       displayBanner(data);
@@ -21,10 +37,10 @@ document.getElementById('startButton').addEventListener('click', function () {
         .attr('stroke-width', strokeWidth)
         .attr('fill', 'none')
       drawGrid(svgContainer);
-      displayChat(data.answers)
-      this.remove();
+      displayChat(data.answers, data.score)
+      document.getElementById('startContainer').remove()
     });
-});
+}
 
 function displayBanner(data) {
   document.getElementById('testNameContent').textContent = `${data.test}`;
@@ -76,32 +92,48 @@ function displayAnswer(item, container) {
   container.appendChild(answerDiv);
 }
 
-function displayChat(answers) {
+function displayChat(answers, score) {
   const container = document.getElementById('chat-container');
   const images = document.getElementById('image-display').children;
 
   let i = 0;
 
   function nextQuestion() {
-    displayQuestion(answers[i], container);
-    playAudioForQuestion(answers[i].index)
-    .onended = () => {
-      scrollToBottom(container);
-      displayAnswer(answers[i], container);
-      playAnswer(answers[i].sample).onended = () => {
-        const img = images[i];
-        img.style.display = 'inline-block';
-        img.scrollIntoView({ behavior: 'smooth', inline: 'start' });
-        updateIntensityGraph(answers[i], i, answers.length);
-        i++;
-        if (i < answers.length) nextQuestion();
-      };
+    if (i < answers.length) {
+      displayQuestion(answers[i], container);
+      playAudioForQuestion(answers[i].index)
+        .onended = () => {
+          scrollToBottom(container);
+          displayAnswer(answers[i], container);
+          playAnswer(answers[i].sample).onended = () => {
+            const img = images[i];
+            img.style.display = 'inline-block';
+            img.scrollIntoView({ behavior: 'smooth', inline: 'start' });
+            updateIntensityGraph(answers[i], i, answers.length);
+            i++;
+            nextQuestion();
+          };
+        }
+    } else {
+      displayScore(score);
     }
   }
 
   nextQuestion();
 }
 
+function displayScore(score) {
+  const container = document.getElementById('chat-container');
+
+  for (const [trait, value] of Object.entries(score)) {
+    scoreText = `${trait}: ${value}\n`;
+    const scoreDiv = document.createElement('div');
+    scoreDiv.classList.add('question');
+    scoreDiv.textContent = scoreText;
+    container.appendChild(scoreDiv);
+  }
+}
+
 function scrollToBottom(el) {
   const totalScrollDistance = el.scrollHeight - el.scrollTop;
   const scrollDuration = 1000;
@@ -134,10 +166,8 @@ function updateIntensityGraph(answer, index, totalAnswers) {
     currentData = [];
   }
 
-
   currentData.push(dataPoint);
 
-
   path.datum(currentData)
     .attr('d', lineGenerator);
 

docs/style.css

@@ -189,28 +189,53 @@ html {
   border-right: 0.2vh solid black;
 }
 
-#startButton {
+#startContainer {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 1);
   color: white;
-  font-size: 5vh;
   border: none;
   cursor: pointer;
   z-index: 5;
   font-weight: 600;
   display: flex;
   align-items: center;
+  flex-direction: column;
   justify-content: center;
 }
 
-#startButton:focus {
+#startContainer button {
+  color: white;
+  background-color: black;
+  border: 2px solid white;
+  padding: 10px 20px;
+  margin: 10px 0;
+  cursor: pointer;
+  font-family: 'Oswald', sans-serif;
+  font-size: 5vh;
+  transition: background-color 0.3s, color 0.3s;
+}
+
+#startContainer button:hover {
+  background-color: white;
+  color: black;
+}
+
+#startContainer button:focus {
   outline: none;
 }
 
+#selectionHeading {
+  color: white;
+  text-align: center;
+  font-size: 10vh;
+  margin-bottom: 20px;
+  font-weight: 600;
+}
+
 .question-index {
   font-size: 1.8vh;
   margin-left: 1vh;