fix

Author: nethical6

interface.md

@@ -1,7 +1,9 @@
 
 # WebAppInterface Methods Documentation
 
-This document describes all the interface methods available in questphone. check [here](index.html) for complete usage
+This document describes all the interface methods available in questphone. check [here](index.html) for complete usage.
+
+Check interface listener's code for questphone on android [here](https://github.com/QuestPhone/questphone/blob/main/app/src/main/java/neth/iecal/questphone/app/screens/quest/view/external_integration/webview/WebAppInterface.kt)
 ---
 
 ## `onQuestCompleted()`

setup.html

@@ -118,7 +118,7 @@ <h3>Your Quest Configuration</h3>
                 unique_id: generateUUID(),
                 quest_json: {
                     // This is the link to your page that displays when a quest is opened.
-                    webviewUrl: "https://questphone.github.io/apidocs/index.html",
+                    webviewUrl: "https://questphone.github.io/api-docs/view.html",
                     setting1: document.getElementById('setting1')?.value || '',
                     setting2: document.getElementById('setting2')?.value || '',
                     option1: document.getElementById('option1')?.checked || false

setup.md

@@ -37,7 +37,6 @@ Your page should have these sections:
    * Time Range (`array of two numbers`)
    * Optional Settings (`all strings`)
 
-     > **Important:** These values will be dynamically set and are **directly injected into your webpage at `webviewUrl`**.
 
 3. **Generate Button**
 
@@ -223,17 +222,3 @@ Header → Quest Title → Active Days → Time Range → Custom Settings → Ge
 * Later, make your page interactive, colorful, and fun
 
 **Working example page:** [setup.html](setup.html)
-
----
-
-This guide now clearly states that:
-
-* **All custom settings in `quest_json` are strings**
-* They are **dynamic**, user-editable values
-* They are **directly injected into your webpage at `webviewUrl`**, so your webpage can use them for the quest
-
----
-
-If you want, I can also write a **tiny “cheat sheet table”** that shows beginners exactly **what keys, types, and example values** to put in `quest_json` to speed up their setup.
-
-Do you want me to make that cheat sheet too?

view.html

@@ -206,6 +206,36 @@ <h2>Live Camera Test</h2>
 function onStatsReceived(stats) {
     WebAppInterface.toast("Quest stats: " + stats);
 }
+
+
+// This is the function that automatically receives the quest_json data injected from the setup page when questphone loads this page
+function injectData(data) {
+    try {
+        let parsed;
+        if (typeof data === "object") {
+            parsed = data;
+        } else if (typeof data === "string") {
+            parsed = JSON.parse(data);
+            if (typeof parsed === "string") {
+                parsed = JSON.parse(parsed);
+                WebAppInterface.toast("Parsed nested JSON string");
+            }
+        } else {
+            throw new Error("Invalid data format");
+        }
+    }
+    catch (e) {
+        WebAppInterface.toast("Error parsing injected data: " + e.message);
+        return;
+    }
+}
+
+// This is a function that automatically applies the theme  based on user preference in questphone
+function applyTheme(theme) {
+    // the theme data is in this format https://github.com/QuestPhone/questphone/blob/0e965be267e60f870aff11a86eeaff9de9966171/app/src/main/java/neth/iecal/questphone/app/screens/quest/view/external_integration/webview/ExtIntWebview.kt#L107
+
+    // example usage: https://github.com/nethical6/qp_pomodoro/blob/main/index.html
+}
 </script>
 </body>
 </html>