{"id":5459,"date":"2025-12-29T11:39:27","date_gmt":"2025-12-29T11:39:27","guid":{"rendered":"https:\/\/mbinalpisga.com\/?page_id=5459"},"modified":"2025-12-29T11:52:53","modified_gmt":"2025-12-29T11:52:53","slug":"cefr-test-%d7%9e%d7%a8%d7%91%d7%aa","status":"publish","type":"page","link":"https:\/\/mbinalpisga.com\/?page_id=5459","title":{"rendered":"CEFR TEST \u05de\u05e8\u05d1\u05ea"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"5459\" class=\"elementor elementor-5459\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-221b087 e-flex e-con-boxed e-con e-parent\" data-id=\"221b087\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1debc7c elementor-widget elementor-widget-image\" data-id=\"1debc7c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/mbinalpisga.com\/wp-content\/uploads\/elementor\/thumbs\/WhatsApp-Image-2024-06-16-at-08.28.15-qpqb0vouxk63fqfxnuf4yiappllmof3864210xg7k4.jpeg\" title=\"\u05de\u05d1\u05d9\u05e0\u05d4 \u05dc\u05e4\u05e1\u05d2&quot;\u05d4\" alt=\"\u05de\u05d1\u05d9\u05e0\u05d4 \u05dc\u05e4\u05e1\u05d2&quot;\u05d4\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-172f171 e-flex e-con-boxed e-con e-parent\" data-id=\"172f171\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-01c76cc elementor-widget elementor-widget-heading\" data-id=\"01c76cc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><font face=\"helvetica-w01-bold\">\u05e6\u05e8\u05d5 \u05de\u05e2\u05e8\u05da \u05e9\u05d9\u05e2\u05d5\u05e8 \u05de\u05ea\u05d5\u05e8\u05d2\u05dc \u05e2\u05dc \u05e4\u05d9 CEFR<\/font><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c0fb54a e-flex e-con-boxed e-con e-parent\" data-id=\"c0fb54a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d546007 elementor-widget elementor-widget-heading\" data-id=\"d546007\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">\u05d2\u05e8\u05e1\u05ea \u05e0\u05e1\u05d9\u05d5\u05df <\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2b07a64 e-flex e-con-boxed e-con e-parent\" data-id=\"2b07a64\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3bb091b elementor-widget elementor-widget-global elementor-global-3273 elementor-widget-html\" data-id=\"3bb091b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<!-- Output Area -->\r\n<div id=\"output\"><\/div>\r\n\r\n<script>\r\nvar prompt = null;\r\n  function scanForm(formElement) {\r\n    const inputs = formElement.elements;\r\n    const data = {};\r\n\r\n    for (let i = 0; i < inputs.length; i++) {\r\n      const field = inputs[i];\r\n\r\n      if (field.tagName === 'INPUT' && field.name) {\r\n        const nameMatch = field.name.match(\/form_fields\\[(.*?)\\]\/);\r\n        if (nameMatch) {\r\n          const inputName = nameMatch[1];\r\n\r\n          if (field.type === 'checkbox' || field.type === 'radio') {\r\n            if (field.checked) {\r\n              const labelText = getLabelText(field);\r\n              if (data[inputName]) {\r\n                if (Array.isArray(data[inputName])) {\r\n                  data[inputName].push(labelText);\r\n                } else {\r\n                  data[inputName] = [data[inputName], labelText];\r\n                }\r\n              } else {\r\n                data[inputName] = labelText;\r\n              }\r\n            }\r\n          } else {\r\n            const value = field.value;\r\n            if (data[inputName]) {\r\n              if (Array.isArray(data[inputName])) {\r\n                data[inputName].push(value);\r\n              } else {\r\n                data[inputName] = [data[inputName], value];\r\n              }\r\n            } else {\r\n              data[inputName] = value;\r\n            }\r\n          }\r\n        }\r\n      }\r\n      \/\/ Handle SELECT elements\r\n        else if (field.tagName === 'SELECT' && field.name) {\r\n            const nameMatch = field.name.match(\/form_fields\\[(.*?)\\]\/);\r\n            if (nameMatch) {\r\n                const inputName = nameMatch[1];\r\n                const selectedOptions = Array.from(field.selectedOptions).map(option => option.textContent.trim());\r\n        \r\n                if (selectedOptions.length > 1) {\r\n                    data[inputName] = selectedOptions;\r\n                } else {\r\n                    data[inputName] = selectedOptions[0] || \"\";\r\n                }\r\n            }\r\n        }\r\n\r\n    }\r\n    return data;\r\n  }\r\n\r\n  function getLabelText(inputElement) {\r\n    let label = inputElement.closest('label');\r\n    if (label) {\r\n      return label.textContent.trim();\r\n    } else {\r\n      const id = inputElement.id;\r\n      if (id) {\r\n        label = document.querySelector(`label[for='${id}']`);\r\n        if (label) {\r\n          return label.textContent.trim();\r\n        }\r\n      }\r\n    }\r\n    return inputElement.value;\r\n  }\r\n\r\n  function buildPrompt(formData, template) {\r\n    let tempPrompt = template;\r\n\r\n    for (const key in formData) {\r\n      if (formData.hasOwnProperty(key)) {\r\n        let value = formData[key];\r\n\r\n        if (Array.isArray(value)) {\r\n          value = value.join(', ');\r\n        }\r\n\r\n        const placeholder = new RegExp(`\\\\{${key}\\\\}`, 'g');\r\n        \r\n        tempPrompt = tempPrompt.replace(placeholder, value);\r\n        console.log(tempPrompt);\r\n      }\r\n    }\r\n\r\n    \/\/ Remove any unreplaced placeholders\r\n    tempPrompt = tempPrompt.replace(\/\\{[^}]+\\}\/g, '');\r\n\r\n    return tempPrompt.trim();\r\n  }\r\n\r\n  document.getElementById('sendBtn').addEventListener('mouseenter', function(event) {\r\n    event.preventDefault();\r\n    const formElement = document.querySelector('.elementor-form');\r\n    const formData = scanForm(formElement);\r\n    console.log(formData);\r\n    prompt = buildPrompt(formData, promptTemplate);\r\n    console.log(prompt);\r\n  });\r\n<\/script>\r\n\r\n\r\n\r\n<style>\r\n    .spinner {\r\n    border: 4px solid rgba(0, 0, 0, 0.1);\r\n    border-left-color: #ffffff;\r\n    border-radius: 50%;\r\n    width: 32px;\r\n    height: 32px;\r\n    animation: spin 1s linear infinite;\r\n    margin: 5px auto;\r\n}\r\n\r\n@keyframes spin {\r\n    to {\r\n        transform: rotate(360deg);\r\n    }\r\n}\r\n\r\n.chat-container {\r\n  display: none;\r\n  flex-direction: column;\r\n  max-width: 600px;\r\n  height: 90vh;\r\n  margin: 20px auto;\r\n  border: 1px solid #ccc;\r\n  background-color: #fff;\r\n}\r\n\r\n#chat-window {\r\n  flex: 1;\r\n  padding: 20px;\r\n  overflow-y: auto;\r\n}\r\n\r\n.message {\r\n  margin-bottom: 15px;\r\n}\r\n\r\n.message.user .content {\r\n  background-color: #dcf8c6;\r\n  align-self: flex-end;\r\n}\r\n\r\n.message.bot .content {\r\n  background-color: #ececec;\r\n  align-self: flex-start;\r\n}\r\n\r\n.message .content {\r\n  padding: 10px;\r\n  border-radius: 5px;\r\n  max-width: 80%;\r\n}\r\n\r\n#chat-form {\r\n  display: flex;\r\n  padding: 10px;\r\n  border-top: 1px solid #ccc;\r\n}\r\n\r\n#message-input {\r\n  flex: 1;\r\n  padding: 10px;\r\n  font-size: 16px;\r\n}\r\n\r\n#chat-form button {\r\n  padding: 10px 20px;\r\n  font-size: 16px;\r\n}\r\n\r\n<\/style>\r\n\r\n<div class=\"chat-container\" id=\"chat-container\">\r\n    <div id=\"chat-window\">\r\n      <!-- Chat messages will be appended here -->\r\n    <\/div>\r\n    <form id=\"chat-form\">\r\n      <input type=\"text\" id=\"message-input\" placeholder=\"\u05d0\u05e0\u05d9 \u05e4\u05d4 \u05dc\u05db\u05dc \u05e9\u05d0\u05dc\u05d4 ...\" autocomplete=\"off\" required \/>\r\n      <button type=\"submit\" id=\"submitBtn\">\u05e9\u05dc\u05d7<\/button>\r\n    <\/form>\r\n<\/div>\r\n\r\n<script type=\"module\">\r\nimport { v4 as uuidv4 } from 'https:\/\/cdn.jsdelivr.net\/npm\/uuid@9.0.0\/dist\/esm-browser\/index.js';\r\nimport { GoogleGenerativeAI  } from 'https:\/\/esm.run\/@google\/generative-ai';\r\n\r\ndocument.addEventListener(\"DOMContentLoaded\",async function () {\r\n  \/\/don't touch ....\r\n  const chatContainer = document.getElementById('chat-container');\r\n  const chatForm = document.getElementById('chat-form');\r\n  const chatWindow = document.getElementById('chat-window');\r\n  const messageInput = document.getElementById('message-input');\r\n  const session = uuidv4();\r\n  const apiKey = 'AIzaSyCSRkRIzB48MStqqVhK5QrAKH7TY4ArerM';\r\n  const genAI = new GoogleGenerativeAI(apiKey);\r\n  const model = genAI.getGenerativeModel({ model: \"gemini-2.5-flash\"});\r\n  const chat = await model.startChat();\r\n  const spinner = document.createElement('div');\r\n        spinner.className = 'spinner';\r\n  if(chatLang === 'Arabic'){\r\n      messageInput.placeholder = '\u0627\u0646\u0627 \u0647\u0646\u0627 \u0644\u0627\u064a \u0633\u0624\u0627\u0644...';\r\n      document.getElementById('submitBtn').innerText = '\u0627\u0631\u0633\u0627\u0644';\r\n  }\r\n  \/\/...don't touch\r\n  \r\n  \r\n  \/\/change this part only\r\n  \/\/remove null and add the prompt for example:\r\n  \/\/`I want you to consider ${input1} and answer the following question ${input2}...`\r\n  const lang = chatLang;\r\n  document.getElementById(\"sendBtn\").addEventListener(\"click\", async function(even){\r\n        event.preventDefault();\r\n        event.target.parentElement.appendChild(spinner);\r\n        appendMessage('bot', '...');\r\n        const botMessageElement = chatWindow.lastElementChild;\r\n      if(prompt)\r\n      {\r\n        try {\r\n          const text = await getBotResponse(null, prompt);\r\n          botMessageElement.querySelector('.content').innerHTML = text;\r\n        \/\/   for await (const chunk of botResponse) {\r\n        \/\/             const chunkText = await chunk.text();\r\n        \/\/             console.log(chunkText);\r\n        \/\/             botMessageElement.querySelector('.content').textContent += chunkText;\r\n        \/\/         }\r\n        } catch (error) {\r\n            console.log('error: '+ error.message);\r\n          botMessageElement.querySelector('.content').textContent = 'Error: Unable to fetch response.';\r\n        }\r\n      }\r\n      spinner.remove();\r\n      chatContainer.style.display = 'flex';\r\n  });\r\n    \r\n  await chat.sendMessage(`you will act as an assitant for teachers and will provide all answers in HTML format always, do not change the format even if I ask you to, do not add any wrappers other than pure html content and make sure to attach the prefix \\'chatbox\\' to all css classes, element ids and functions. all answers should be in ${lang}`);\r\n    \r\n    \r\n    \/\/don't touch this is the chat box\r\n  chatForm.addEventListener('submit', async (e) => {\r\n    e.preventDefault();\r\n    const userMessage = messageInput.value.trim();\r\n    if (!userMessage) return;\r\n\r\n    \/\/ Display user's message\r\n    appendMessage('user', userMessage);\r\n    messageInput.value = '';\r\n\r\n    \/\/ Get bot's response\r\n    appendMessage('bot', '...'); \/\/ Placeholder while fetching response\r\n    const botMessageElement = chatWindow.lastElementChild;\r\n\r\n    try {\r\n      const text = await getBotResponse(session, userMessage);\r\n      botMessageElement.querySelector('.content').innerHTML = text;\r\n    \/\/   for await (const chunk of botResponse) {\r\n    \/\/             const chunkText = await chunk.text();\r\n    \/\/             console.log(chunkText);\r\n    \/\/             botMessageElement.querySelector('.content').textContent += chunkText;\r\n    \/\/         }\r\n    } catch (error) {\r\n        console.log('error: '+ error.message);\r\n      botMessageElement.querySelector('.content').textContent = 'Error: Unable to fetch response.';\r\n    }\r\n  });\r\n\r\n  function appendMessage(sender, message) {\r\n    const messageElement = document.createElement('div');\r\n    messageElement.classList.add('message', sender);\r\n\r\n    const contentElement = document.createElement('div');\r\n    contentElement.classList.add('content');\r\n    contentElement.textContent = message;\r\n\r\n    messageElement.appendChild(contentElement);\r\n    chatWindow.appendChild(messageElement);\r\n    chatWindow.scrollTop = chatWindow.scrollHeight;\r\n  }\r\n\r\n  async function getBotResponse(session, message) {\r\n    const result = await chat.sendMessage(message);\r\n  const response = await result.response;\r\n    console.log(response);\r\n    const text = response.text();\r\n    console.log(text);\r\n    return text.replace(\/^html```|```$\/g, '');\r\n    \/\/return formatToRichText(text);\r\n}\r\n\r\nasync function formatToRichText(input) {\r\n    \/\/ Replace titles surrounded by ** with <h4> tags\r\n    const formattedText = input.replace(\/\\*\\*(.+?)\\*\\*\/g, '<h4>$1<\/h4>').replace(\/(\\* .+?)(?=\\*|$)\/gs, match => {\r\n            return '<li>' + match.slice(2) + '<\/li>';\r\n        });\r\n\r\n    \/\/ Wrap bullet points with <ul> tags\r\n    const wrappedText = formattedText.replace(\/(<li>.*<\\\/li>)\/gs, '<ul>$1<\/ul>');\r\n\r\n    return wrappedText;\r\n}\r\n\r\n  });\r\n\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-23ad648 elementor-widget elementor-widget-global elementor-global-3328 elementor-widget-html\" data-id=\"23ad648\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Print Button Example<\/title>\r\n    <link rel=\"stylesheet\" href=\"styles.css\">\r\n<\/head>\r\n<body>\r\n    <button id=\"printButton\">\u05d4\u05d3\u05e4\u05e1<\/button>\r\n\r\n    <script>\r\n    function printTextContent() {\r\n    \/\/ Create a new window\r\n    var printWindow = window.open('', '', 'height=400,width=600');\r\n    \r\n    \/\/ Get the HTML of div\r\n   var divContents = document.getElementById(\"chat-window\").innerHTML;\r\n\r\n   \/\/ Get the HTML of head\r\n   var headContents = document.head.innerHTML;\r\n\r\n    \/\/ Write the text content to the new window\r\n    printWindow.document.write('<html><head>');\r\n    printWindow.document.write(headContents);\r\n    printWindow.document.write('<\/head><body dir=\"rtl\">');\r\n    printWindow.document.write(divContents);\r\n    printWindow.document.write('<\/body><\/html>');\r\n    \/\/ Close the document to ensure all resources are loaded\r\n    printWindow.document.close();\r\n    \r\n    \/\/ Wait for the content to be fully loaded, then print\r\n    printWindow.onload = function() {\r\n        printWindow.print();\r\n    };\r\n}\r\n        document.getElementById('printButton').addEventListener('click', printTextContent);\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d08bd68 e-flex e-con-boxed e-con e-parent\" data-id=\"d08bd68\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-66035ac elementor-widget elementor-widget-html\" data-id=\"66035ac\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"he\" dir=\"rtl\">\r\n  <head>\r\n    <meta charset=\"UTF-8\" \/>\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n    <title>HSL Lesson Planner - A1<\/title>\r\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Rubik:wght@300;400;500;700&display=swap\" rel=\"stylesheet\">\r\n    <style>\r\n      body {\r\n        font-family: 'Rubik', sans-serif;\r\n        background-color: #f3f4f6;\r\n      }\r\n      @keyframes fadeIn {\r\n        from { opacity: 0; transform: translateY(10px); }\r\n        to { opacity: 1; transform: translateY(0); }\r\n      }\r\n      .animate-fade-in {\r\n        animation: fadeIn 0.4s ease-out forwards;\r\n      }\r\n      \/* Custom scrollbar for better aesthetics *\/\r\n      ::-webkit-scrollbar {\r\n        width: 8px;\r\n        height: 8px;\r\n      }\r\n      ::-webkit-scrollbar-track {\r\n        background: #f1f1f1; \r\n      }\r\n      ::-webkit-scrollbar-thumb {\r\n        background: #cbd5e1; \r\n        border-radius: 4px;\r\n      }\r\n      ::-webkit-scrollbar-thumb:hover {\r\n        background: #94a3b8; \r\n      }\r\n    <\/style>\r\n    <script type=\"importmap\">\r\n    {\r\n      \"imports\": {\r\n        \"react\/\": \"https:\/\/esm.sh\/react@^19.2.3\/\",\r\n        \"react\": \"https:\/\/esm.sh\/react@^19.2.3\",\r\n        \"lucide-react\": \"https:\/\/esm.sh\/lucide-react@^0.561.0\",\r\n        \"react-dom\/\": \"https:\/\/esm.sh\/react-dom@^19.2.3\/\",\r\n        \"@google\/genai\": \"https:\/\/esm.sh\/@google\/genai@^1.33.0\"\r\n      }\r\n    }\r\n    <\/script>\r\n  <\/head>\r\n  <body>\r\n    <div id=\"root\"><\/div>\r\n    <script type=\"module\" src=\".\/index.tsx\"><\/script>\r\n  <\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\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>\u05e6\u05e8\u05d5 \u05de\u05e2\u05e8\u05da \u05e9\u05d9\u05e2\u05d5\u05e8 \u05de\u05ea\u05d5\u05e8\u05d2\u05dc \u05e2\u05dc \u05e4\u05d9 CEFR \u05d2\u05e8\u05e1\u05ea \u05e0\u05e1\u05d9\u05d5\u05df \u05e9\u05dc\u05d7 Print Button Example \u05d4\u05d3\u05e4\u05e1 HSL Lesson Planner &#8211; A1<\/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-5459","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mbinalpisga.com\/index.php?rest_route=\/wp\/v2\/pages\/5459","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mbinalpisga.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mbinalpisga.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mbinalpisga.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mbinalpisga.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5459"}],"version-history":[{"count":4,"href":"https:\/\/mbinalpisga.com\/index.php?rest_route=\/wp\/v2\/pages\/5459\/revisions"}],"predecessor-version":[{"id":5465,"href":"https:\/\/mbinalpisga.com\/index.php?rest_route=\/wp\/v2\/pages\/5459\/revisions\/5465"}],"wp:attachment":[{"href":"https:\/\/mbinalpisga.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5459"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}