{"id":14,"date":"2026-04-17T09:09:07","date_gmt":"2026-04-17T09:09:07","guid":{"rendered":"https:\/\/vidclear.empowersalesme.com\/?page_id=14"},"modified":"2026-04-17T12:36:38","modified_gmt":"2026-04-17T12:36:38","slug":"elementor-14","status":"publish","type":"page","link":"https:\/\/vidclear.empowersalesme.com\/","title":{"rendered":"Elementor #14"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\nAI Avatar Training Simulation<\/title>\r\n\r\n<style>\r\nhtml, body {\r\n margin: 0;\r\n padding: 0;\r\n width: 100%;\r\n height: 100%;\r\n overflow: hidden;\r\n background: #2f3136;\r\n font-family: 'Segoe UI', sans-serif;\r\n}\r\n\r\n\/* FRAME *\/\r\n.app-frame {\r\n width: 100%;\r\n height: 100%;\r\n padding: 40px 80px;\r\n box-sizing: border-box;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n\/* VIDEO *\/\r\n.video-wrapper {\r\n position: relative;\r\n width: 100%;\r\n max-width: 1200px;\r\n aspect-ratio: 16 \/ 9;\r\n max-height: calc(100vh - 80px);\r\n border-radius: 28px;\r\n overflow: hidden;\r\n background: #000;\r\n}\r\n\r\nvideo {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n}\r\n\r\n\/* START BUTTON *\/\r\n.start-btn {\r\n position: absolute;\r\n inset: 0;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n background: rgba(0,0,0,0.4);\r\n color: white;\r\n font-size: 20px;\r\n cursor: pointer;\r\n z-index: 10;\r\n}\r\n\r\n\/* SUBTITLE *\/\r\n.subtitle {\r\n position: absolute;\r\n bottom: 110px;\r\n width: 100%;\r\n text-align: center;\r\n font-size: 20px;\r\n color: white;\r\n}\r\n\r\n\/* OVERLAY *\/\r\n.overlay {\r\n position: absolute;\r\n bottom: 20px;\r\n width: 100%;\r\n display: none;\r\n justify-content: center;\r\n}\r\n\r\n.box {\r\n width: 340px;\r\n background: rgba(15,23,42,0.95);\r\n padding: 18px;\r\n border-radius: 16px;\r\n text-align: center;\r\n}\r\n\r\nbutton {\r\n width: 100%;\r\n padding: 12px;\r\n margin: 6px 0;\r\n border: none;\r\n border-radius: 10px;\r\n background: linear-gradient(135deg,#3b82f6,#6366f1);\r\n color: white;\r\n cursor: pointer;\r\n}\r\n\r\n\/* SCORE *\/\r\n.score {\r\n position: absolute;\r\n top: 20px;\r\n right: 20px;\r\n background: rgba(0,0,0,0.5);\r\n padding: 8px 14px;\r\n border-radius: 999px;\r\n color: white;\r\n}\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<div class=\"app-frame\">\r\n\r\n <div class=\"video-wrapper\">\r\n\r\n <video id=\"video\"><\/video>\r\n\r\n <!-- START OVERLAY -->\r\n <div class=\"start-btn\" id=\"startBtn\">\u25b6 Klik untuk mulai<\/div>\r\n\r\n <div class=\"score\" id=\"score\">Score: 0<\/div>\r\n\r\n <div class=\"subtitle\" id=\"subtitle\"><\/div>\r\n\r\n <div class=\"overlay\" id=\"overlay\">\r\n <div id=\"contentBox\"><\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\nconst video = document.getElementById(\"video\");\r\nconst overlay = document.getElementById(\"overlay\");\r\nconst contentBox = document.getElementById(\"contentBox\");\r\nconst subtitle = document.getElementById(\"subtitle\");\r\nconst scoreDisplay = document.getElementById(\"score\");\r\nconst startBtn = document.getElementById(\"startBtn\");\r\n\r\nlet totalScore = 0;\r\nlet currentScenario = \"intro\";\r\n\r\n\/* \ud83c\udfae SCENARIO *\/\r\nconst scenarios = {\r\n intro: {\r\n video: \"https:\/\/vidclear.empowersalesme.com\/wp-content\/uploads\/2026\/04\/1.mp4\",\r\n time: 3.5,\r\n subtitle: \"Halo pak, ada yang bisa saya bantu?\",\r\n answers: [\r\n { text: \"Urus kartu kredit\", next: \"kredit\", score: 10 },\r\n { text: \"Ganti akun\", next: \"akun\", score: 5 }\r\n ]\r\n },\r\n\r\n kredit: {\r\n video: \"https:\/\/vidclear.empowersalesme.com\/wp-content\/uploads\/2026\/04\/1.mp4\",\r\n time: 3,\r\n subtitle: \"Good day sir, how may I assist you today?\",\r\n answers: [\r\n { text: \"Sudah\", next: \"end_good\", score: 10 },\r\n { text: \"Belum\", next: \"end_normal\", score: 5 }\r\n ]\r\n },\r\n\r\n akun: {\r\n video: \"https:\/\/interactive-examples.mdn.mozilla.net\/media\/cc0-videos\/flower.webm\",\r\n time: 3,\r\n subtitle: \"Baik pak, terkait akun...\",\r\n answers: [\r\n { text: \"Ya\", next: \"end_good\", score: 10 },\r\n { text: \"Tidak\", next: \"end_bad\", score: -5 }\r\n ]\r\n },\r\n\r\n end_good: {\r\n ending: true,\r\n message: \"\ud83c\udf89 Excellent Service!\",\r\n desc: \"Kamu memberikan solusi terbaik.\"\r\n },\r\n\r\n end_normal: {\r\n ending: true,\r\n message: \"\ud83d\ude42 Cukup Baik\",\r\n desc: \"Masih bisa ditingkatkan.\"\r\n },\r\n\r\n end_bad: {\r\n ending: true,\r\n message: \"\u274c Kurang Tepat\",\r\n desc: \"Customer tidak puas.\"\r\n }\r\n};\r\n\r\n\/* LOAD *\/\r\nfunction loadScenario(key) {\r\n const s = scenarios[key];\r\n s.triggered = false;\r\n\r\n video.src = s.video;\r\n video.load();\r\n video.play();\r\n\r\n subtitle.innerText = s.subtitle || \"\";\r\n\r\n currentScenario = key;\r\n}\r\n\r\n\/* START CLICK (UNLOCK AUDIO) *\/\r\nstartBtn.addEventListener(\"click\", () => {\r\n startBtn.style.display = \"none\";\r\n loadScenario(currentScenario);\r\n});\r\n\r\n\/* TRIGGER *\/\r\nvideo.addEventListener(\"timeupdate\", () => {\r\n const s = scenarios[currentScenario];\r\n\r\n if (!s.ending && !s.triggered && video.currentTime >= s.time) {\r\n video.pause();\r\n showAnswers(s);\r\n s.triggered = true;\r\n }\r\n});\r\n\r\n\/* SHOW ANSWERS *\/\r\nfunction showAnswers(s) {\r\n overlay.style.display = \"flex\";\r\n\r\n contentBox.innerHTML = `\r\n <div class=\"box\">\r\n ${s.answers.map(a =>\r\n `<button onclick=\"choose('${a.next}', ${a.score})\">${a.text}<\/button>`\r\n ).join(\"\")}\r\n <\/div>\r\n `;\r\n}\r\n\r\n\/* CHOOSE *\/\r\nfunction choose(next, score) {\r\n totalScore += score;\r\n scoreDisplay.innerText = \"Score: \" + totalScore;\r\n\r\n overlay.style.display = \"none\";\r\n\r\n const nextScene = scenarios[next];\r\n\r\n if (nextScene.ending) {\r\n showEnding(nextScene);\r\n } else {\r\n loadScenario(next);\r\n }\r\n}\r\n\r\n\/* ENDING *\/\r\nfunction showEnding(s) {\r\n overlay.style.display = \"flex\";\r\n\r\n contentBox.innerHTML = `\r\n <div class=\"box\">\r\n <h2>${s.message}<\/h2>\r\n <p>${s.desc}<\/p>\r\n <p>Total Score: ${totalScore}<\/p>\r\n <button onclick=\"location.reload()\">Restart<\/button>\r\n <\/div>\r\n `;\r\n}\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>AI Avatar Training Simulation \u25b6 Klik untuk mulai Score: 0<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-14","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/vidclear.empowersalesme.com\/index.php\/wp-json\/wp\/v2\/pages\/14","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vidclear.empowersalesme.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vidclear.empowersalesme.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vidclear.empowersalesme.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vidclear.empowersalesme.com\/index.php\/wp-json\/wp\/v2\/comments?post=14"}],"version-history":[{"count":91,"href":"https:\/\/vidclear.empowersalesme.com\/index.php\/wp-json\/wp\/v2\/pages\/14\/revisions"}],"predecessor-version":[{"id":112,"href":"https:\/\/vidclear.empowersalesme.com\/index.php\/wp-json\/wp\/v2\/pages\/14\/revisions\/112"}],"wp:attachment":[{"href":"https:\/\/vidclear.empowersalesme.com\/index.php\/wp-json\/wp\/v2\/media?parent=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}