diff --git a/public/saveGameData.js b/public/saveGameData.js
new file mode 100644
index 0000000..8ac6170
--- /dev/null
+++ b/public/saveGameData.js
@@ -0,0 +1,64 @@
+const queryString = window.location.search;
+const urlParams = new URLSearchParams(queryString);
+const userId = urlParams.get('userid');
+const gameId = urlParams.get('id');
+
+
+const url = window.location.href;
+const gameName = url.split('/');
+const gameType = gameName[3].split('?id=');
+const gameVersion = gameType[0] + '-' + gameName[4];
+
+
+function submitUserData(drawingZone) {
+    let imageCode;
+    // console.log(drawingZone);
+    drawingZone.renderer.snapshot((image) => {
+        submitButton.setVisible(true);
+        snapshotButton.setVisible(true);
+        customCursor.setVisible(true);
+        image.style.width = '160px';
+        image.style.height = '120px';
+        image.style.paddingLeft = '2px';
+        document.body.appendChild(image);
+        // Download the snapshot as an image
+        const link = document.createElement('a');
+        link.href = image.src;
+        link.download = 'my_drawing.png';
+        link.click();
+        document.body.removeChild(image);
+        imageCode = image.src;
+        
+
+        let userData = {
+        'gameType': gameVersion,
+        'gameID': gameId,
+        'screenShot': imageCode,
+        'userId' : userId
+        // 'starts': formattedDateTime,
+        // 'game_start' : gameStartTime,
+        };
+        console.log(userData);
+
+        fetch(`https://save-game-data.teachertrainingchennai.in/saveGameData`, {
+        method: 'POST',
+        headers: {
+            'Content-Type' : 'application/json'
+        },
+        body: JSON.stringify(userData)
+        })
+        .then(response => {
+            if(response.ok){
+            console.log('Data Saved', response)
+            } else{
+            // console.log('Something Wrong', response)
+            }
+        })
+        .catch(error => {
+            console.error('An error occured', error)
+        }); 
+            
+            // Clear the drawing
+            // graphics.clear();
+        });        
+};
\ No newline at end of file
diff --git a/src/pages/drawing/drawing_phonics.astro b/src/pages/drawing/drawing_phonics.astro
index f91b17e..3180342 100644
--- a/src/pages/drawing/drawing_phonics.astro
+++ b/src/pages/drawing/drawing_phonics.astro
@@ -9,6 +9,7 @@ import Layout from '../../layouts/Layout.astro';
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
     const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
     const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
@@ -149,33 +150,33 @@ import Layout from '../../layouts/Layout.astro';
             .catch(error => {
                 console.error('Error fetching initial data:', error);
             });
-            const URL = window.location.href;
-            const gameName = URL.split('/');
-            let userData = {
-                'user': 'drawing@beanstalkedu.com',
-                'game_name': gameName[3],
-                'starts': formattedDateTime,
-                // 'game_start' : gameStartTime,
-            };
-            function submitUserData() {
-            fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-                method: 'POST',
-                headers: {
-                'Content-Type' : 'application/json'
-                },
-                body: JSON.stringify(userData)
-            })
-            .then(response => {
-                if(response.ok){
-                // console.log('Data Saved', response)
-                } else{
-                // console.log('Something Wrong', response)
-                }
-            })
-            .catch(error => {
-                console.error('An error occured', error)
-            }); 
-            };
+            // const URL = window.location.href;
+            // const gameName = URL.split('/');
+            // let userData = {
+            //     'user': 'drawing@beanstalkedu.com',
+            //     'game_name': gameName[3],
+            //     'starts': formattedDateTime,
+            //     // 'game_start' : gameStartTime,
+            // };
+            // function submitUserData() {
+            // fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+            //     method: 'POST',
+            //     headers: {
+            //     'Content-Type' : 'application/json'
+            //     },
+            //     body: JSON.stringify(userData)
+            // })
+            // .then(response => {
+            //     if(response.ok){
+            //     // console.log('Data Saved', response)
+            //     } else{
+            //     // console.log('Something Wrong', response)
+            //     }
+            // })
+            // .catch(error => {
+            //     console.error('An error occured', error)
+            // }); 
+            // };
             // window.load
 
             const borderBottom = this.add.graphics();
@@ -213,7 +214,7 @@ import Layout from '../../layouts/Layout.astro';
             submitButton.setVisible(false);
             submitNotic.setVisible(true);
             // windowLoad();
-            submitUserData();
+            submitUserData(this);
             })
             const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
             if(!isMobile){
diff --git a/src/pages/drawing/drawing_writo.astro b/src/pages/drawing/drawing_writo.astro
index 8ccf1a4..6355d33 100644
--- a/src/pages/drawing/drawing_writo.astro
+++ b/src/pages/drawing/drawing_writo.astro
@@ -9,6 +9,7 @@ import Layout from '../../layouts/Layout.astro';
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
     const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
     const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
@@ -150,33 +151,33 @@ import Layout from '../../layouts/Layout.astro';
             .catch(error => {
                 console.error('Error fetching initial data:', error);
             });
-            const URL = window.location.href;
-            const gameName = URL.split('/');
-            let userData = {
-                'user': 'drawing@beanstalkedu.com',
-                'game_name': gameName[3],
-                'starts': formattedDateTime,
-                // 'game_start' : gameStartTime,
-            };
-            function submitUserData() {
-            fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-                method: 'POST',
-                headers: {
-                'Content-Type' : 'application/json'
-                },
-                body: JSON.stringify(userData)
-            })
-            .then(response => {
-                if(response.ok){
-                // console.log('Data Saved', response)
-                } else{
-                // console.log('Something Wrong', response)
-                }
-            })
-            .catch(error => {
-                console.error('An error occured', error)
-            }); 
-            };
+            // const URL = window.location.href;
+            // const gameName = URL.split('/');
+            // let userData = {
+            //     'user': 'drawing@beanstalkedu.com',
+            //     'game_name': gameName[3],
+            //     'starts': formattedDateTime,
+            //     // 'game_start' : gameStartTime,
+            // };
+            // function submitUserData() {
+            // fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+            //     method: 'POST',
+            //     headers: {
+            //     'Content-Type' : 'application/json'
+            //     },
+            //     body: JSON.stringify(userData)
+            // })
+            // .then(response => {
+            //     if(response.ok){
+            //     // console.log('Data Saved', response)
+            //     } else{
+            //     // console.log('Something Wrong', response)
+            //     }
+            // })
+            // .catch(error => {
+            //     console.error('An error occured', error)
+            // }); 
+            // };
             // window.load
 
             const borderBottom = this.add.graphics();
@@ -212,7 +213,7 @@ import Layout from '../../layouts/Layout.astro';
             submitButton.setVisible(false);
             submitNotic.setVisible(true);
             // windowLoad();
-                submitUserData();
+                submitUserData(this);
             })
             const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
             if(!isMobile){
diff --git a/src/pages/drawing/index.astro b/src/pages/drawing/index.astro
index 9915a38..860e00b 100644
--- a/src/pages/drawing/index.astro
+++ b/src/pages/drawing/index.astro
@@ -9,6 +9,7 @@ import Layout from '../../layouts/Layout.astro';
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
     const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
     const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
@@ -514,58 +515,58 @@ import Layout from '../../layouts/Layout.astro';
     const url = window.location.href;
     const gameName = url.split('/');
     const gameType = gameName[3].split('?id=');        
-    function submitUserData(drawingZone) {
-        let imageCode;
-        // console.log(drawingZone);
-        drawingZone.renderer.snapshot((image) => {
-            submitButton.setVisible(true);
-            snapshotButton.setVisible(true);
-            customCursor.setVisible(true);
-            image.style.width = '160px';
-            image.style.height = '120px';
-            image.style.paddingLeft = '2px';
-            document.body.appendChild(image);
-            // Download the snapshot as an image
-            const link = document.createElement('a');
-            link.href = image.src;
-            link.download = 'my_drawing.png';
-            link.click();
-            document.body.removeChild(image);
-            imageCode = image.src;
+    // function submitUserData(drawingZone) {
+    //     let imageCode;
+    //     // console.log(drawingZone);
+    //     drawingZone.renderer.snapshot((image) => {
+    //         submitButton.setVisible(true);
+    //         snapshotButton.setVisible(true);
+    //         customCursor.setVisible(true);
+    //         image.style.width = '160px';
+    //         image.style.height = '120px';
+    //         image.style.paddingLeft = '2px';
+    //         document.body.appendChild(image);
+    //         // Download the snapshot as an image
+    //         const link = document.createElement('a');
+    //         link.href = image.src;
+    //         link.download = 'my_drawing.png';
+    //         link.click();
+    //         document.body.removeChild(image);
+    //         imageCode = image.src;
             
 
-            let userData = {
-            'userID': 'drawing@beanstalkedu.com',
-            'gameType': gameType[0],
-            'gameID': gameType[1],
-            'screenShot': imageCode
-            // 'starts': formattedDateTime,
-            // 'game_start' : gameStartTime,
-            };
-            console.log(userData);
+    //         let userData = {
+    //         'userID': 'drawing@beanstalkedu.com',
+    //         'gameType': gameType[0],
+    //         'gameID': gameType[1],
+    //         'screenShot': imageCode
+    //         // 'starts': formattedDateTime,
+    //         // 'game_start' : gameStartTime,
+    //         };
+    //         console.log(userData);
 
-            fetch(`https://save-game-data.teachertrainingchennai.in/saveGameData`, {
-            method: 'POST',
-            headers: {
-                'Content-Type' : 'application/json'
-            },
-            body: JSON.stringify(userData)
-            })
-            .then(response => {
-                if(response.ok){
-                console.log('Data Saved', response)
-                } else{
-                // console.log('Something Wrong', response)
-                }
-            })
-            .catch(error => {
-                console.error('An error occured', error)
-            }); 
+    //         fetch(`https://save-game-data.teachertrainingchennai.in/saveGameData`, {
+    //         method: 'POST',
+    //         headers: {
+    //             'Content-Type' : 'application/json'
+    //         },
+    //         body: JSON.stringify(userData)
+    //         })
+    //         .then(response => {
+    //             if(response.ok){
+    //             console.log('Data Saved', response)
+    //             } else{
+    //             // console.log('Something Wrong', response)
+    //             }
+    //         })
+    //         .catch(error => {
+    //             console.error('An error occured', error)
+    //         }); 
                 
-                // Clear the drawing
-                // graphics.clear();
-            });        
-    };
+    //             // Clear the drawing
+    //             // graphics.clear();
+    //         });        
+    // };
     // function captureSnapshot(drawingZone) {
     //     submitButton.setVisible(false);
     //     // snapNotice.setVisible(true);
diff --git a/src/pages/drawing/v2.astro b/src/pages/drawing/v2.astro
index e676abb..04a2d9c 100644
--- a/src/pages/drawing/v2.astro
+++ b/src/pages/drawing/v2.astro
@@ -9,6 +9,7 @@ import Layout from '../../layouts/Layout.astro';
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
     const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
     const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
@@ -168,33 +169,33 @@ import Layout from '../../layouts/Layout.astro';
             .catch(error => {
                 console.error('Error fetching initial data:', error);
             });
-            const URL = window.location.href;
-            const gameName = URL.split('/');
-            let userData = {
-                'user': 'drawing@beanstalkedu.com',
-                'game_name': gameName[3],
-                'starts': formattedDateTime,
-                // 'game_start' : gameStartTime,
-            };
-            function submitUserData() {
-            fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-                method: 'POST',
-                headers: {
-                'Content-Type' : 'application/json'
-                },
-                body: JSON.stringify(userData)
-            })
-            .then(response => {
-                if(response.ok){
-                // console.log('Data Saved', response)
-                } else{
-                // console.log('Something Wrong', response)
-                }
-            })
-            .catch(error => {
-                console.error('An error occured', error)
-            }); 
-            };
+ 
+            // console.log(gameType[0]);
+            // let userData = {
+            //     'user': 'drawing@beanstalkedu.com',
+            //     'game_name': gameName[3],
+            //     'starts': formattedDateTime,
+            //     // 'game_start' : gameStartTime,
+            // };
+            // function submitUserData() {
+            //     fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+            //         method: 'POST',
+            //         headers: {
+            //         'Content-Type' : 'application/json'
+            //         },
+            //         body: JSON.stringify(userData)
+            //     })
+            //     .then(response => {
+            //         if(response.ok){
+            //         // console.log('Data Saved', response)
+            //         } else{
+            //         // console.log('Something Wrong', response)
+            //         }
+            //     })
+            //     .catch(error => {
+            //         console.error('An error occured', error)
+            //     }); 
+            // };
             // window.load
             const borderBottom = this.add.graphics();
             const x = 0; const y = 54;
@@ -231,7 +232,8 @@ import Layout from '../../layouts/Layout.astro';
             // console.log('Clicked');
             submitNotic.setVisible(true);
             // windowLoad();
-            submitUserData();
+            // submitUserData();
+            submitUserData(this);
             })
             const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
             if(!isMobile){
diff --git a/src/pages/drawing/v3.astro b/src/pages/drawing/v3.astro
index a14cff4..4b225b0 100644
--- a/src/pages/drawing/v3.astro
+++ b/src/pages/drawing/v3.astro
@@ -9,6 +9,7 @@ import Layout from '../../layouts/Layout.astro';
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
     const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
     const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
@@ -155,33 +156,33 @@ import Layout from '../../layouts/Layout.astro';
             .catch(error => {
                 console.error('Error fetching initial data:', error);
             });
-            const URL = window.location.href;
-            const gameName = URL.split('/');
-            let userData = {
-                'user': 'drawing@beanstalkedu.com',
-                'game_name': gameName[3],
-                'starts': formattedDateTime,
-                // 'game_start' : gameStartTime,
-            };
-            function submitUserData() {
-            fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-                method: 'POST',
-                headers: {
-                'Content-Type' : 'application/json'
-                },
-                body: JSON.stringify(userData)
-            })
-            .then(response => {
-                if(response.ok){
-                // console.log('Data Saved', response)
-                } else{
-                // console.log('Something Wrong', response)
-                }
-            })
-            .catch(error => {
-                console.error('An error occured', error)
-            }); 
-            };
+            // const URL = window.location.href;
+            // const gameName = URL.split('/');
+            // let userData = {
+            //     'user': 'drawing@beanstalkedu.com',
+            //     'game_name': gameName[3],
+            //     'starts': formattedDateTime,
+            //     // 'game_start' : gameStartTime,
+            // };
+            // function submitUserData() {
+            // fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+            //     method: 'POST',
+            //     headers: {
+            //     'Content-Type' : 'application/json'
+            //     },
+            //     body: JSON.stringify(userData)
+            // })
+            // .then(response => {
+            //     if(response.ok){
+            //     // console.log('Data Saved', response)
+            //     } else{
+            //     // console.log('Something Wrong', response)
+            //     }
+            // })
+            // .catch(error => {
+            //     console.error('An error occured', error)
+            // }); 
+            // };
             // window.load
             const borderBottom = this.add.graphics();
             const x = 0; const y = 54;
@@ -218,7 +219,7 @@ import Layout from '../../layouts/Layout.astro';
             // submitButton.setVisible(false);
             submitNotic.setVisible(true);
             // windowLoad();
-            submitUserData();
+            submitUserData(this);
             })
             // const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
             // if(!isMobile){