number 4 complete start from 5 tomorow

src/pages/drag/index.astro

@@ -59,6 +59,7 @@ import Layout from '../../layouts/Layout.astro';
   };
   let submitButton;
   let formattedDateTime;
+  let shortUniqueID;
   gameResult = [];
   window.onload = function() {
     // Get the current date and time
@@ -68,8 +69,18 @@ import Layout from '../../layouts/Layout.astro';
    formattedDateTime = currentDate.toLocaleString();
     
     // Log the formatted date and time to the console
-    console.log("Page loaded on: " + formattedDateTime);
+    // console.log("Page loaded on: " + formattedDateTime);
   };
+  function generateShortUniqueID(length) {
+      const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+      let result = '';
+      for (let i = 0; i < length; i++) {
+          const randomIndex = Math.floor(Math.random() * characters.length);
+          result += characters.charAt(randomIndex);
+      }
+      return result;
+  };
+  shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
   if(isMobile){
       noticeWidth = 100;
       noticeHeight = 0;
@@ -305,17 +316,19 @@ import Layout from '../../layouts/Layout.astro';
         const displayW = window.innerWidth;
         const URL = window.location.href;
         const gameName = URL.split('/');
-        var gameResult = {
-          'f1' : gameName[3],
-          'f2' : formattedDateTime,
-        }
+        let userData = {
+            'status' : 'published',
+            'user_id': 'drag@beanstalkedu.com',
+            'game_name': gameName[3],
+            'game_open': formattedDateTime,
+        };
         function submitUserData() {
           fetch(`https://management.beanstalkedu.com/items/game_result`, {
             method: 'POST',
             headers: {
               'Content-Type' : 'application/json'
             },
-            body: JSON.stringify(gameResult)
+            body: JSON.stringify(userData)
           })
           .then(response => {
             if(response.ok){