diff --git a/express/asset/frontend.js b/express/asset/frontend.js
new file mode 100644
index 0000000..2b180be
--- /dev/null
+++ b/express/asset/frontend.js
@@ -0,0 +1,82 @@
+// Initialize session variables
+let sessionStartTime;
+let lastButtonClickTime;
+
+// Function to generate a random session ID
+function generateSessionId() {
+ return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+}
+
+// Function to fetch a random animal name from the server
+async function getRandomAnimal() {
+ try {
+ const response = await fetch('/getRandomAnimal');
+ const data = await response.json();
+ document.getElementById('animal-name').textContent = data.animalName;
+ } catch (error) {
+ console.error('Error fetching data:', error);
+ }
+}
+
+// Function to set or retrieve the session ID cookie
+function getSessionId() {
+ const sessionId = document.cookie.replace(/(?:(?:^|.*;\s*)sessionId\s*=\s*([^;]*).*$)|^.*$/, '$1');
+ if (!sessionId) {
+ const newSessionId = generateSessionId();
+ document.cookie = `sessionId=${newSessionId}`;
+ return newSessionId;
+ }
+ return sessionId;
+}
+
+
+// Function to set session start time
+function setSessionStartTime() {
+ sessionStartTime = new Date();
+}
+
+// Function to calculate and display time difference
+function displayTimeDifference() {
+ if (sessionStartTime && lastButtonClickTime) {
+ const timeDifference = lastButtonClickTime - sessionStartTime;
+ console.log(`Time since session start: ${timeDifference} milliseconds`);
+ // You can display the time difference on the page as needed
+ }
+}
+
+// Add click event listeners to the buttons
+document.getElementById('isCritterButton').addEventListener('click', () => {
+ recordButtonClick('is critter', getSessionId());
+});
+
+document.getElementById('isNotCritterButton').addEventListener('click', () => {
+ recordButtonClick('is not critter', getSessionId());
+});
+
+// Function to record button clicks on the server
+async function recordButtonClick(buttonName, sessionId) {
+ try {
+ const currentTime = new Date();
+ if (lastButtonClickTime) {
+ const timeDifference = currentTime - lastButtonClickTime;
+ // Include the time difference in the POST request data
+ await fetch('/recordButtonClick', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({ buttonName, sessionId, timeDifference }),
+ });
+ }
+ lastButtonClickTime = currentTime; // Record the timestamp of the button click
+ displayTimeDifference(); // Calculate and display time difference
+ getRandomAnimal(); // Load another random animal
+ } catch (error) {
+ console.error('Error recording button click:', error);
+ }
+}
+
+// Initial random animal load and session start time
+getRandomAnimal();
+setSessionStartTime();
+
diff --git a/express/index.html b/express/index.html
index b34ae49..e66fce5 100644
--- a/express/index.html
+++ b/express/index.html
@@ -2,97 +2,15 @@
- Random Animal Generator
+ Is this a Critter?
-
Random Animal Generator
-
Click a button to get a random animal:
+
Is this a Critter?
+
what about?:
-
+
diff --git a/express/server.js b/express/server.js
index 2cacbd9..b5377bb 100644
--- a/express/server.js
+++ b/express/server.js
@@ -18,7 +18,6 @@ const db = new sqlite3.Database('mydb.db', (err) => {
timestamp DATETIME DEFAULT CURRENT_TIMESTAMP,
time_difference INTEGER -- Add this column for time difference
)
-
`);
}
});
@@ -29,6 +28,9 @@ app.use(bodyParser.json());
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
+app.get('/asset/frontend.js', (req, res) => {
+ res.sendFile(__dirname + '/asset/frontend.js');
+});
// Route to get a random animal name
app.get('/getRandomAnimal', async (req, res) => {