\n \n \n LIVRESQ – Frequently Asked Questions<\/title>\n \n <!-- Google Fonts -->\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&family=Roboto:wght@700;900&display=swap\" rel=\"stylesheet\">\n \n <!-- Tailwind CSS -->\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <!-- Lucide Icons -->\n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n \n <!-- Tailwind Configuration -->\n <script>\n tailwind.config = {\n \/\/ Scope Tailwind styles to our wrapper ID to override WP styles\n important: '#livresq-standalone-app',\n theme: {\n extend: {\n colors: {\n midnight: '#0F1623',\n livresq: {\n fucsia: '#D91278', \n 'fucsia-dark': '#b00e60', \n albastru: '#6fccf0', \n blond: '#faed87', \n darkblue: '#2c3e50', \n light: '#f8f9fa',\n text: '#333333'\n },\n slate: {\n 850: '#151e2e',\n 900: '#0F1623' \n }\n },\n fontFamily: {\n sans: ['Inter', 'sans-serif'],\n heading: ['Roboto', 'sans-serif'],\n },\n boxShadow: {\n 'sm': '0 1px 2px 0 rgba(0, 0, 0, 0.05)',\n 'md': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',\n 'lg': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',\n }\n }\n }\n }\n <\/script>\n\n <!-- WordPress Isolation & Custom Styles -->\n <style>\n \/* \n WORDPRESS ISOLATION LAYER \n Specific resets to prevent theme bleed without breaking layout.\n *\/\n #livresq-standalone-app {\n font-family: 'Inter', sans-serif;\n color: #334155; \/* slate-700 *\/\n line-height: 1.5;\n background-color: #f8fafc; \/* bg-slate-50 *\/\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n width: 100%;\n display: block; \n position: relative;\n }\n\n \/* Box Sizing Reset *\/\n #livresq-standalone-app *, \n #livresq-standalone-app *::before, \n #livresq-standalone-app *::after {\n box-sizing: border-box;\n }\n\n \/* Image Reset *\/\n #livresq-standalone-app img {\n border-style: none;\n max-width: 100%;\n height: auto;\n display: block; \n margin: 0;\n padding: 0;\n }\n\n \/* List Reset *\/\n #livresq-standalone-app ul, \n #livresq-standalone-app li {\n list-style: none !important;\n margin: 0 !important;\n padding: 0 !important;\n }\n #livresq-standalone-app li::before {\n content: none !important;\n display: none !important;\n }\n\n \/* Heading Reset *\/\n #livresq-standalone-app h1, \n #livresq-standalone-app h2, \n #livresq-standalone-app h3, \n #livresq-standalone-app h4, \n #livresq-standalone-app h5, \n #livresq-standalone-app h6 {\n margin: 0;\n font-weight: inherit;\n font-size: inherit;\n line-height: inherit;\n }\n\n \/* Input Reset *\/\n #livresq-standalone-app input[type=\"text\"] {\n appearance: none;\n -webkit-appearance: none;\n background-color: #ffffff;\n color: #334155;\n margin: 0;\n outline: none;\n box-shadow: none;\n }\n #livresq-standalone-app input::placeholder {\n color: #94a3b8; \/* slate-400 *\/\n opacity: 1;\n }\n\n \/* Button Reset *\/\n #livresq-standalone-app button {\n background: transparent;\n border: none;\n padding: 0;\n margin: 0;\n cursor: pointer;\n font-family: inherit;\n color: inherit;\n appearance: none;\n -webkit-appearance: none;\n }\n #livresq-standalone-app button:focus {\n outline: none;\n }\n\n \/* Accordion Animation *\/\n .accordion-content {\n transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;\n max-height: 0;\n opacity: 0;\n overflow: hidden;\n }\n .accordion-content.open {\n opacity: 1;\n }\n \n \/* Sticky Fix *\/\n #livresq-standalone-app .sticky {\n position: -webkit-sticky;\n position: sticky;\n }\n <\/style>\n<\/head>\n<body>\n\n <!-- WRAPPER ID -->\n <div id=\"livresq-standalone-app\">\n\n <!-- Main Content (No Navbar\/Footer) -->\n <main class=\"min-h-screen pb-20 bg-slate-50\">\n \n <!-- Hero Banner -->\n <div class=\"w-full relative h-[300px] md:h-[400px] overflow-hidden\">\n <div class=\"absolute inset-0 bg-gradient-to-r from-slate-900\/90 to-slate-900\/40 z-10\"><\/div>\n <img decoding=\"async\" \n src=\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/05\/Untitled-design-47.png?fit=1200%2C400&ssl=1\"\n alt=\"LIVRESQ Banner\"\n class=\"w-full h-full object-cover\"\n \/>\n <div class=\"absolute inset-0 z-20 flex flex-col items-center justify-center text-center px-4\">\n <h1 class=\"text-4xl md:text-5xl font-heading font-black text-white mb-4 drop-shadow-lg leading-tight\">\n Frequently Asked Questions (FAQ)\n <\/h1>\n <p class=\"text-lg md:text-xl text-slate-200 max-w-2xl drop-shadow-md font-light\">\n Find answers to the most common questions about the LIVRESQ platform, editor, and library.\n <\/p>\n <\/div>\n <\/div>\n\n <!-- Search Bar -->\n <!-- top-0 because no navbar -->\n <div class=\"bg-white border-b border-slate-200 py-8 px-4 sm:px-6 lg:px-8 sticky top-0 z-30 shadow-sm\">\n <div class=\"max-w-4xl mx-auto\">\n <div class=\"relative\">\n <!-- Icon z-10 to stay above input background if stacking context issues arise -->\n <div class=\"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-slate-400 z-10\">\n <i data-lucide=\"search\" class=\"w-5 h-5\"><\/i>\n <\/div>\n <!-- !pl-10 forces padding to ensure text doesn't overlap icon -->\n <input\n type=\"text\"\n id=\"faq-search\"\n class=\"block w-full !pl-10 !pr-3 !py-3 border border-slate-300 rounded-lg leading-5 bg-slate-50 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-livresq-fucsia focus:border-livresq-fucsia sm:text-sm shadow-sm transition-all duration-200 hover:bg-white focus:bg-white text-slate-700\"\n placeholder=\"Search for a question...\"\n \/>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Content Grid -->\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12\">\n <div class=\"lg:grid lg:grid-cols-12 lg:gap-8\">\n <!-- Sidebar -->\n <div class=\"hidden lg:block lg:col-span-3\">\n <!-- top-40 allows spacing from sticky search bar -->\n <nav id=\"faq-sidebar\" class=\"sticky top-40 space-y-1 bg-white p-4 rounded-xl shadow-sm border border-slate-100\" aria-label=\"Sidebar\">\n <!-- Sidebar items generated by JS -->\n <\/nav>\n <\/div>\n\n <!-- Main Questions Area -->\n <div id=\"faq-content\" class=\"mt-8 lg:mt-0 lg:col-span-9 space-y-16\">\n <!-- Content generated by JS -->\n <\/div>\n <\/div>\n <\/div>\n\n <\/main>\n\n <!-- Logic -->\n <script>\n \/\/ --- 1. DATA (Translated to English) ---\n const faqData = [\n {\n id: 'creare',\n title: 'Lesson Creation',\n icon: 'book',\n image: \"https:\/\/livresq.com\/wp-content\/uploads\/2025\/05\/Screenshot-2025-05-13-140636.png\",\n items: [\n { q: \"What is the LIVRESQ platform and what is it used for?\", a: \"LIVRESQ is an online platform that allows the creation, editing, and publishing of interactive lessons, OERs (Open Educational Resources), and e-learning courses. You can easily create courses, textbooks, presentations, or other educational materials with multimedia elements (text, images, video, tests, etc.) without needing advanced programming knowledge.\" },\n { q: \"Do I need to install a program to use LIVRESQ?\", a: \"No installation is required. LIVRESQ works directly in your web browser (such as Chrome, Firefox, Safari, Edge) and is a cloud-based platform. You just access the LIVRESQ website, create an account, and work online \u2013 you only need an internet connection.\" },\n { q: \"Is LIVRESQ free or does it require a subscription?\", a: \"The platform offers both a free plan and subscription options (Premium\/Academic). With a free account, you can create lessons and access most basic functions. The Premium plan adds additional features (e.g., real-time collaboration, planning module, extra storage space, creating lessons with AI assistance), but you can achieve a lot with the free version as well.\" },\n { q: \"How do I create an account on LIVRESQ and how do I log in?\", a: \"Go to the LIVRESQ website and use the registration option. You will provide an email address and a password, then confirm your account by accessing your email. Once the account is active, you log in with your chosen email and password directly in the browser to access the platform.\" },\n { q: \"How do I create a new lesson (new project) in LIVRESQ?\", a: \"After logging in, access the Atelier section (lesson editor). There you will find a 'Create a new project' button. By clicking it, you can choose to start from scratch, use a template if you have a free account, or even let AI generate a lesson structure if you have a premium\/academic account. After selecting, the editor will open where you can start adding content.\" },\n { q: \"Can I use predefined templates to create lessons?\", a: \"Yes. LIVRESQ provides templates (lesson models) that you can use as a starting point. When you create a new project, you can choose an existing template \u2013 it will already contain a structure and basic elements that you can modify and complete with your own content. This saves time and gives you a well-formatted lesson model.\" },\n { q: \"Can I generate content using Artificial Intelligence in the platform?\", a: \"Yes, the platform has integrated AI functions that can create content for you, which you can then modify according to your needs. For example, there are options to generate text (for explanations or questions). These functions are meant to give you ideas and materials that you can later adjust. (Note: AI availability requires a Premium\/Academic plan).\" },\n { q: \"Can I duplicate (copy) an existing lesson to create a new one?\", a: \"Yes. If you already have a project and want to start a new lesson from its structure, you can use the Duplicate function. In the resource list, next to the project name, there is a duplicate option button. This creates a copy of the selected lesson, which you can then rename and modify independently of the original.\" },\n { q: \"What do the terms 'project', 'section', and 'resource' mean in LIVRESQ?\", a: \"In LIVRESQ, a project is the complete lesson (it includes all chapters\/pages). The project consists of one or more sections \u2013 each section can be seen as a chapter, subchapter, or individual page of the lesson. A resource is a content element you insert into a section (e.g., a text block, an image, a video, a test, etc.). Briefly, the project is the whole lesson, sections are the subdivisions, and resources are the actual materials placed in sections.\" },\n { q: \"How do I add a new section to a lesson?\", a: \"In the editor, your lesson (project) has a sections menu. There is an 'Add section' button (represented by the '+' symbol) in the top bar. When you press this button, a new empty section will be created within the project, which you can name (e.g., 'Chapter 2') and then fill with resources.\" },\n { q: \"Can I create sections separately and then include them in a project?\", a: \"Yes. LIVRESQ allows you to create sections as independent resources. For example, you can create a section (with all its content) in the Resources area of the Atelier without it being part of a project yet. Later, you can include it in a project via import or drag-and-drop. This approach is useful if you want to reuse the same section in multiple different lessons.\" },\n { q: \"Where can I find and how do I open a previously created lesson?\", a: \"All your saved projects and sections appear in the Resources page of the Atelier. When you log in, navigate to 'Resources' (the list of projects\/sections). There you will see the titles of the lessons you created. To continue working on a lesson, double-click the project name (or choose 'Open'). The lesson will open in the editor where you can continue from where you left off.\" },\n { q: \"How do I delete a lesson or section I no longer need?\", a: \"On the Resources page, you can delete unwanted elements. To delete an entire project (a lesson), select that project and look for the 'Delete' option (usually represented by a trash can). Upon confirmation, the lesson will be deleted from your account. Similarly, you can delete an individual section: either from within the project or from the general resource list. Note: deletion is permanent, so ensure you no longer need that content.\" },\n { q: \"How do I rename a project or section?\", a: \"To rename a lesson (project), go to the Resources page; in the top bar, you will find a pencil icon representing 'rename'. Enter the desired new title. To rename a section, select it and then follow the same step. You can update titles at any time, even after adding content.\" },\n { q: \"Can I organize my lessons into folders or categories?\", a: \"Yes. In the Resources area of the platform, you can create directories (folders) to organize your projects and resources. For example, you can have a 'Math' folder for all math lessons and a 'Biology' folder for related materials. Create a new folder (using 'Create directory'), then move lessons into them via drag-and-drop or the 'Move' command. This helps maintain order when you have many materials.\" },\n { q: \"Can I have multiple lessons open at the same time?\", a: \"Yes, the editor supports working with multiple projects\/sections simultaneously. In the top bar of the editor, each open lesson or section will be displayed as a tab. You can create or open another project by pressing the '+' button in the tabs area. Then you can switch between lessons by clicking on the desired tab. This allows you to copy content between projects or work in parallel without closing and opening lessons every time.\" },\n { q: \"Can I use LIVRESQ on a phone or tablet to create lessons?\", a: \"The LIVRESQ platform is responsive, meaning it's adapted for mobile devices as well. You can log in and edit content from a tablet or even a phone. However, for the optimal editing experience (given the interface's complexity), using a computer or a tablet with a larger screen is recommended. But yes, in case of need, you can access, view, or make minor changes from mobile devices.\" },\n { q: \"Do I need programming knowledge to create lessons in LIVRESQ?\", a: \"No. LIVRESQ was designed as an easy-to-use tool for teachers and trainers without requiring advanced technical knowledge. Adding interactive elements is done by clicking and filling in fields, and personalizing the appearance via intuitive menus. You don't have to write code to create attractive lessons \u2013 the platform handles the technical side.\" },\n { q: \"What types of materials can I create with LIVRESQ?\", a: \"You can create a wide variety of interactive educational resources. Primarily, LIVRESQ is used for digital lessons (online lessons, course modules), but you can also create digital textbooks, interactive e-books, presentations, assessment tests, simple educational games, or even guides. Basically, any material that combines text with multimedia and interactivity can be realized as a project in LIVRESQ.\" },\n { q: \"Can I integrate tests and interactive exercises into my lessons?\", a: \"Yes, this is one of the platform's core capabilities. Within a lesson, you can blend theoretical content (text, images, video) with practical exercises or assessments (questionnaires, quizzes, crosswords, etc.). Thus, the lesson becomes much more interactive and checks the student's knowledge along the way.\" },\n { q: \"How can I see how the lesson will look to students (preview)?\", a: \"The editor has a preview function. When editing a section, you can press the 'View' button (the eye icon in the top bar). This will open the current section in a view mode exactly as a student would see it. To preview the entire lesson from start to finish, access the preview from the project level (not from a section) or temporarily publish it to your personal shelf.\" },\n { q: \"What happens if I lose my internet connection while working?\", a: \"LIVRESQ automatically saves progress at short intervals. If the connection drops, the platform will attempt to save when the internet returns. In case of disconnection, you will receive a notification in the editor. Usually, the data entered up to that point remains temporarily stored locally; once the reconnection occurs, changes are saved to the server.\" },\n { q: \"Is there an Undo\/Redo function if I make a mistake while editing?\", a: \"Yes. In the editor, in the top options bar, there are buttons for 'Undo' and 'Redo'. If you deleted or changed something by mistake, press Undo to return to the previous state. Similarly, you can use Redo to reapply a change. These functions allow you to experiment without fear.\" },\n { q: \"Can I move or reorder elements added to the page?\", a: \"Yes. Elements (resources) in a section can be arranged as you wish. You can move a block (text, image, etc.) by holding it and dragging it to the desired position (drag-and-drop) within the page or row. You can also change the order of sections in the project in the sections list via dragging or using the 'Move up\/down' option.\" },\n { q: \"Are there tutorials or documentation to help me use the platform?\", a: \"Yes. Besides these FAQs, there is an official LIVRESQ User Manual and various video tutorials provided by the team. You can access documentation on the official website (Help\/Learning Center section). The interface also often has short tips and a guide for first-time use. The user community (Facebook, WhatsApp) is also a good place for advice.\" }\n ]\n },\n {\n id: 'blocuri',\n title: 'Using Blocks',\n icon: 'file-text',\n image: \"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/05\/Screenshot-2025-05-12-112451.png?fit=800%2C542&ssl=1\",\n items: [\n { q: \"How do I add text to a lesson in LIVRESQ?\", a: \"To add text, insert a 'Text Resource' into the section. In the left panel of the editor, select 'Text Resource' and drag it into the workspace. An editable text block will be created. Click inside it to start typing or insert paragraphs. The text editor allows you to type directly and format as needed.\" },\n { q: \"What text formatting options are available?\", a: \"The LIVRESQ text editor offers options similar to a standard word processor: bold, italic, underline, lists (bulleted or numbered), alignment, blockquotes, HTML code, and hyperlinks. You can also choose heading styles (Heading 1, Heading 2, etc.) to highlight titles and subheadings.\" },\n { q: \"How do I insert an image into a lesson?\", a: \"Use the Image resource. In the editor, choose 'Image' from the left panel and place the block. Then double-click the block or use the 'Upload image' button. You can choose a file from your computer or select a 'Stock photo'. Once uploaded, you can position it as needed.\" },\n { q: \"What image formats can I use in LIVRESQ?\", a: \"Standard formats are accepted: JPEG\/JPG, PNG, GIF, etc. PNGs with transparency and animated GIFs are displayed correctly. It's recommended to use high-quality but optimized (small file size) images to keep loading times fast.\" },\n { q: \"Can I resize or edit an image directly in the platform?\", a: \"Yes, you can easily resize images. In the editor, access the 'Edit Image' button to apply filters, crop, flip, rotate, draw, add shapes, text, stickers, and resize.\" },\n { q: \"How do I add an audio file to a lesson?\", a: \"Use the Audio resource. Insert it into a section, then click 'Upload audio' and select your file (MP3 is recommended). An audio player will appear in the lesson for the student.\" },\n { q: \"How do I insert a video clip?\", a: \"Use the Video resource. You can upload a file (MP4\/H.264 is best), choose from stock videos, or generate your own video using AI. A video player will then be displayed in the lesson.\" },\n { q: \"Can I add a video from YouTube or another external site?\", a: \"Yes. While the Video resource is for direct uploads, you can integrate external clips using 'embed'. The simplest way: in the text editor, use the HTML code insertion function (iframe) \u2013 copy the embed code from YouTube\/Vimeo and paste it into the HTML mode of a text block.\" },\n { q: \"What audio and video file formats are supported?\", a: \"For audio, MP3 is the most reliable. For video, MP4 (H.264) is recommended for its high compatibility and good quality-to-size ratio. Other modern formats like WebM or OGG are also usually supported by browsers.\" },\n { q: \"How do I create an image gallery?\", a: \"Look for 'Gallery' in the block list \u2013 insert it, then upload multiple images in the gallery editor. The platform automatically creates a slider or carousel for the student to navigate through.\" },\n { q: \"What types of interactive tests (quizzes) can I include?\", a: \"LIVRESQ offers multiple-choice questions, true\/false, drag-and-drop exercises, ordering\/sorting items, open-ended questions, highlighting quizzes, fill-in-the-blanks, crosswords (matrix), etc. Each serves a different pedagogical purpose.\" },\n { q: \"How do I add a questionnaire (test)?\", a: \"Use the Questionnaire resource. Once added, a specific editor opens where you choose the question type (e.g., 'Multiple Choice'). Enter the question, the answer options, and mark the correct one. You can also set immediate feedback.\" },\n { q: \"How do I create a multiple-choice question?\", a: \"In the questionnaire editor, choose 'Multiple choice'. Type the prompt and add answer options. Check the correct answer(s). You can optionally set feedback messages for each choice. Students will then be able to select an option and check its correctness.\" },\n { q: \"How do I add a 'drag-and-drop' exercise?\", a: \"Within the Questionnaire resource, select 'Drag-and-drop'. This allows creating associations or matching tasks. You define the elements (text or images) and their correct pairings so the platform can evaluate the student's attempt.\" },\n { q: \"How do I make a test where students must order elements?\", a: \"Choose the 'Ordering' (or Sorting) type. Enter a series of items in the correct sequence. The platform will scramble them for the student, who then has to drag them into the right order.\" },\n { q: \"Can I add open-ended questions?\", a: \"Yes, use the 'Open question' type. It provides a text field for the student to type a free-form answer. Note: since these don't have a fixed key, they aren't auto-graded by the platform; you'll need to review them manually if using an LMS.\" },\n { q: \"What is a highlighting quiz?\", a: \"It requires students to mark\/highlight specific correct elements within a text (e.g., finding keywords or errors). You define the text and the correct zones in the editor.\" },\n { q: \"What is a crossword (matrix) resource?\", a: \"The Matrix (Crossword) resource lets you create word games. You define the grid, letters, and clues. Students see an empty grid and fill it in based on the provided hints.\" },\n { q: \"What is an accordion resource and how is it used?\", a: \"The Accordion displays content in collapsible panels. It's useful for presenting points that the student can expand one by one (e.g., FAQs or definitions).\" },\n { q: \"How do I use 'Tabs' in a lesson?\", a: \"The Tabs resource allows presenting content in several horizontal files. Only one tab is visible at a time, making it great for grouping information into categories like 'Definition', 'Example', 'Explanation'.\" },\n { q: \"What is the 'Tags\/Labels' resource?\", a: \"It allows adding interactive markers over an image. You upload an image and place pins that display explanatory text when hovered or clicked \u2013 perfect for interactive diagrams or maps.\" },\n { q: \"What is an 'Attachment' resource and how do I attach a file?\", a: \"The Attachment resource lets students download files like PDFs, Word docs, or ZIP archives. It's useful for extra materials or printable worksheets that can't be presented directly in the lesson.\" },\n { q: \"What is the 'Application' resource?\", a: \"It's a container for external interactive content. You can upload an HTML package (e.g., a simulation or custom game) that will run directly inside the lesson page.\" },\n { q: \"What is the 'Certificate' resource?\", a: \"It generates a diploma of completion. You can customize a template with the student's name, lesson title, score, and date, which they can download as a PDF once they finish the lesson.\" },\n { q: \"How do I insert a hyperlink into text or an element?\", a: \"In a text block, select the words and use the link icon. For images or buttons, use the 'Action' or link settings in the property panel to define a target URL.\" }\n ]\n },\n {\n id: 'organizare',\n title: 'Content Organization',\n icon: 'layout',\n image: \"https:\/\/livresq.com\/wp-content\/uploads\/2025\/05\/Screenshot-2025-05-13-141811.png\",\n items: [\n { q: \"How do I divide the lesson into chapters or sections?\", a: \"A lesson is structured into sections, each acting as a chapter or subchapter. Simply add new sections for each desired chapter (e.g., 'Introduction', 'Chapter 1', etc.) using the 'Add' button in the project editor.\" },\n { q: \"How do I change the order of sections?\", a: \"In the section list on the left side of the editor, reorder them via drag-and-drop. The updated order is how the student will progress through the lesson.\" },\n { q: \"How do I create a Table of Contents for my lesson?\", a: \"LIVRESQ generates a Table of Contents using 'bookmarks'. First, add bookmarks to important titles within sections. Then, at the project level, go to 'Table of Contents' and move the desired bookmarks into the TOC area.\" },\n { q: \"What are bookmarks and how do I use them?\", a: \"Bookmarks are markers placed on important elements to allow quick navigation. They can be included in the Table of Contents or used as targets for internal links (e.g., a 'Continue' button leading to a specific subchapter).\" },\n { q: \"How do I create internal links or navigation buttons between sections?\", a: \"Add a button and set its 'Action' property to 'Jump to bookmark', then select the desired target. This allows creating branching paths or easy returns to the main menu.\" },\n { q: \"What is a 'Barrier' and how does it limit access?\", a: \"A barrier is a navigation control tool. It blocks progress until a certain condition is met (e.g., finishing an interactive exercise). Once the condition is met, the barrier opens, allowing the student to move to the next part.\" },\n { q: \"What is the 'Assistant' (message assistant) and how does it work?\", a: \"The Assistant is an interactive element that displays friendly messages or feedback. It can require the student to click 'Continue' to proceed, ensuring they read important instructions before moving on.\" },\n { q: \"How do I arrange content on the page in rows and columns?\", a: \"LIVRESQ uses a grid-based layout. You create rows and divide them into cells (columns). For example, a 2-cell row can have text on the left and an image on the right. We recommend no more than 5 cells per row.\" },\n { q: \"How do I add new rows or columns to the page structure?\", a: \"Drag a 'Row' structure element from the left menu. Once added, you can add cells to it and resize them as needed. You can even place rows within cells for complex layouts.\" },\n { q: \"How do I copy or move resources from one section to another?\", a: \"Use the Copy\/Cut and Paste buttons in the editor's top bar. Select an element, Copy it, navigate to the target section (even in a different project), and Paste it.\" },\n { q: \"Can I reuse a section from one lesson in another?\", a: \"Yes. Copy the section in the source project and Paste it into the new one. Alternatively, use 'Add from Organizer' to select and insert previously created sections that aren't currently in a project.\" },\n { q: \"Can I tag or filter my resources to organize them easily?\", a: \"Yes. Use the Tag system in the Resources page to label projects (e.g., 'STEM', '7th Grade'). You can then use the filter bar to quickly find materials by their tags.\" },\n { q: \"Is there a search function for my lessons and resources?\", a: \"Yes, there is a Search bar at the top of the Resources page. Type a keyword from the title or metadata to instantly filter the list.\" },\n { q: \"How do I delete a content element from the lesson?\", a: \"Select the block (text, image, etc.) and press 'Delete' on your keyboard or use the trash can icon in the top toolbar. To delete a whole row, ensure the row is selected before deleting.\" },\n { q: \"Is it better to edit sections inside the project or separately?\", a: \"Editing inside the project gives you context of the whole lesson and easy navigation between chapters. Editing separately isolates the section, which is useful if you want to focus on just that part or reuse it in many projects.\" },\n { q: \"How do I create a title page (cover) for the lesson?\", a: \"Create it as the first section of your project. Name it 'Cover' or 'Introduction' and style it with large text, an attractive image, the author's name, and a short description.\" },\n { q: \"How can I ensure the lesson is followed in order (sequentially)?\", a: \"Use Barriers at the end of crucial sections. By linking a barrier to an exercise, you ensure students cannot proceed until they have completed the current requirements.\" },\n { q: \"How do I split a long section into two smaller ones?\", a: \"Use the 'Cut Mode' button (represented by a dashed line through a page). Identify the split point, and the platform will move everything after it into a new section.\" },\n { q: \"How do I merge the content of two sections into one?\", a: \"Manually copy the elements from the second section and paste them at the end of the first section. Then, you can safely delete the now-redundant second section.\" },\n { q: \"Can I create sub-sections or sub-chapters within a section?\", a: \"Yes. While the base structure is project -> sections, you can use heading levels and bookmarks within a section to create a detailed hierarchical structure that acts like sub-chapters.\" },\n { q: \"How do I ensure my lesson looks good on phones or tablets?\", a: \"LIVRESQ produces responsive content automatically. Use the 'Screen Simulation' tool in the editor to check how your layout adapts to mobile and tablet sizes.\" },\n { q: \"Can I preview the entire lesson from start to finish?\", a: \"Yes, press the 'View' button at the project level (when the whole project is open) to test the complete sequence and navigation.\" },\n { q: \"Can I add private notes (invisible to students) in the content?\", a: \"Currently, elements in a section are generally visible. A workaround is to use a text block for notes and delete it before publishing, or keep notes in a separate external document.\" },\n { q: \"What is the Planning (mind-map) module?\", a: \"Available for Premium accounts, it lets you design the lesson as a conceptual map before adding content. The platform then generates a skeleton based on that map.\" }\n ]\n },\n {\n id: 'salvare',\n title: 'Saving and Publishing',\n icon: 'save',\n image: \"https:\/\/livresq.com\/wp-content\/uploads\/2025\/05\/Screenshot-2025-05-13-143246.png\",\n items: [\n { q: \"Does the platform automatically save the lesson while I work?\", a: \"Yes. LIVRESQ has an autosave feature that periodically saves changes in real-time. You can see the last save time in the top-right corner of the editor.\" },\n { q: \"Can I manually save my lesson's changes?\", a: \"Since automatic saving works continuously, there is no traditional 'Save' button for content; the system handles it for you.\" },\n { q: \"Where are my LIVRESQ lessons stored?\", a: \"All materials are stored online in your LIVRESQ account on secure cloud servers. You can access them from anywhere as long as you log in.\" },\n { q: \"Can I access my lessons from another device?\", a: \"Yes, your account is accessible from any device with an internet connection. Just log in with your credentials to pick up where you left off.\" },\n { q: \"How do I publish the lesson I created?\", a: \"In the project page, choose 'Export'. You can publish it to your 'Personal Shelf' first. From there, you can request publication to the 'Public Library'.\" },\n { q: \"What is the LIVRESQ Library and the 'Personal Shelf'?\", a: \"The Personal Shelf is your private space for published materials, visible only to you or those you share the link with. The Public Library is a common catalog where approved lessons are visible to all users.\" },\n { q: \"How do I distribute the lesson to students?\", a: \"After publishing, you get a direct link. Send this link to students (via email, WhatsApp, etc.), and they can open it in any browser without needing to log in.\" },\n { q: \"Can I make my lesson accessible to everyone?\", a: \"Yes, by requesting publication to the Public Library. You can also choose if others can duplicate\/edit your lesson or if it's view-only.\" },\n { q: \"How do I update a lesson after it's been published?\", a: \"Make changes in the editor, then go to your personal shelf and use the 'Overwrite' button to update the existing published version with your new edits.\" },\n { q: \"Does the library keep previous versions of my lesson?\", a: \"The library has a version history tab, but it's primarily for logging changes. To revert to an old version, you'd need to have manually kept a duplicate backup.\" },\n { q: \"What is the difference between publishing in the library and exporting?\", a: \"Publishing keeps the lesson on LIVRESQ for online access via a link. Exporting generates a downloadable package (like SCORM or HTML) for use on external LMS platforms or offline.\" },\n { q: \"Can other users see the lessons on my Personal Shelf?\", a: \"No, your Personal Shelf is private by default. Others can only see them if you share the direct link or publish them to the Public Library.\" },\n { q: \"How do I make a published lesson editable by others?\", a: \"When publishing to the Public Library, check the option to share the source code. This allows other teachers to duplicate and adapt your lesson.\" },\n { q: \"How do I delete a lesson from my Personal Shelf or the Public Library?\", a: \"Find the lesson in your library shelf and use the 'Delete' button. You can also 'Cancel Publication' if you want to keep it privately but hide it from public view.\" },\n { q: \"How many lessons can I save or publish?\", a: \"There is no fixed limit for published lessons. For projects in the editor, free accounts are limited to 5 projects, while premium accounts have unlimited project creation.\" },\n { q: \"Can I modify a lesson directly in the library?\", a: \"The library is for viewing and distribution only. To make changes, return to the Atelier (editor), edit the project, and then republish\/overwrite.\" },\n { q: \"What information should be filled in before publishing?\", a: \"Metadata such as title, description, subject, grade level, and keywords should be filled in to ensure a professional presentation and easier discovery.\" },\n { q: \"Can I publish a lesson even if it's not fully finished?\", a: \"Yes, you can publish to your Personal Shelf for testing. However, incomplete lessons will not be approved for the Public Library.\" },\n { q: \"Can I restrict access to my lesson (e.g., with a password)?\", a: \"The best way to restrict access is to keep it on your Personal Shelf and share the link only with authorized individuals; it won't appear in public searches.\" },\n { q: \"Can I see who viewed my lesson or how many people?\", a: \"LIVRESQ itself doesn't provide a list of students, but if you export as SCORM and use an LMS, your LMS will track user progress and scores.\" },\n { q: \"What happens to my lessons if my subscription expires?\", a: \"Your lessons remain in your account and are not deleted. You will transition to a free account, losing access to premium features but keeping all your created content.\" },\n { q: \"Can I transfer a lesson to another user's account?\", a: \"Yes, by adding them as a collaborator (Premium) or by publishing it as 'editable' so they can duplicate it into their own account from the library.\" },\n { q: \"Is my content private and safe on LIVRESQ?\", a: \"Yes. All lessons on your personal shelf are private by default. LIVRESQ uses secure servers and encrypted connections to protect your data.\" },\n { q: \"How do I create a backup of a lesson?\", a: \"The easiest way is to use the 'Duplicate' function in the Atelier to create an internal copy. You can also export the project as an HTML package to your local computer.\" },\n { q: \"Can I print the lesson or save it as a PDF?\", a: \"Yes! Use the 'Export' button and select 'PDF'. This will generate an organized static version of your lesson content suitable for printing or archiving.\" }\n ]\n },\n {\n id: 'navigare',\n title: 'Platform Navigation',\n icon: 'navigation',\n image: \"https:\/\/livresq.com\/wp-content\/uploads\/2025\/05\/Screenshot-2025-05-13-144708.png\",\n items: [\n { q: \"What are the main sections of the platform (Atelier, Library, etc.)?\", a: \"LIVRESQ is divided into two major zones: the Atelier (Studio), where you create and edit lessons, and the Library, where you access and manage published content. There's also a Profile\/Account Settings section.\" },\n { q: \"How do I find my saved lessons (projects) in the platform?\", a: \"After logging in, go to Atelier -> My Resources. Your projects are organized there in folders and files. You can also check the 'Recent' section for quick access.\" },\n { q: \"What can I find on the 'Home' dashboard?\", a: \"The dashboard provides quick buttons for creating new projects\/sections, displays your recently edited lessons, and shows news or updates from the LIVRESQ team.\" },\n { q: \"How is the lesson editor interface structured?\", a: \"The left side has Resources\/Structure (blocks to drag-and-drop), the middle is your Workspace, the right has the Properties panel (settings for selected blocks), and the top has the Toolbar.\" },\n { q: \"What functions does the top toolbar offer in the editor?\", a: \"It includes Undo\/Redo, Planning (Mind-map), Section Properties, Export, Rename, Split, Bookmarks, Preview, Zoom, and Screen Simulation tools.\" },\n { q: \"How do I preview the lesson while editing?\", a: \"Press the 'View' button in the toolbar. It will open the current section or project in a player mode so you can interact with it exactly as a student would.\" },\n { q: \"How do I switch between multiple open projects or sections?\", a: \"The editor supports tabs, similar to a web browser. Click the tabs below the top toolbar to switch between different open lessons or sections.\" },\n { q: \"How do I go back to the list of resources from the editor?\", a: \"Click the LIVRESQ logo in the top-left corner. This will take you back to the Atelier -> Resources page. Your work is autosaved as you exit.\" },\n { q: \"Is there a search function for my projects?\", a: \"Yes, use the Search bar at the top of the 'My Resources' page in the Atelier to filter by title or keywords.\" },\n { q: \"How do I create folders to organize projects and resources?\", a: \"Click 'Create directory' in the Resources page. You can then name it and move your projects into it via drag-and-drop or the 'Move' command.\" },\n { q: \"How do I move a lesson into a different folder?\", a: \"Either drag the project icon over the target folder or right-click the project, choose 'Move', and select the destination directory from the hierarchy.\" },\n { q: \"How do I log out of my LIVRESQ account?\", a: \"Click on your profile icon\/account name in the top-right corner and select 'Logout' from the dropdown menu.\" },\n { q: \"Can I change the interface language of the platform?\", a: \"Yes. LIVRESQ supports many languages. You can usually find a language selector (globe icon) in the library or your profile settings.\" },\n { q: \"How do I update my profile or account password?\", a: \"Go to the Profile\/Account section. There you can change your display name, email, and password. Remember to save changes before leaving the page.\" },\n { q: \"What browser is recommended for using LIVRESQ?\", a: \"Modern browsers like Google Chrome, Mozilla Firefox, or Microsoft Edge are recommended. Avoid outdated browsers like Internet Explorer.\" },\n { q: \"Where can I find help or documentation inside the platform?\", a: \"Look for a 'Help' button or '?' icon, which usually links to the official online manual or FAQ center. The team also offers webinars and training.\" },\n { q: \"How do I access lessons in the public LIVRESQ library?\", a: \"Go to library.livresq.com. You can browse by category, check 'New Releases', or use the search bar to find specific educational materials.\" },\n { q: \"Can I use the LIVRESQ platform offline?\", a: \"No, LIVRESQ is a cloud-based web application requiring an internet connection for editing and saving. However, you can export lessons as HTML to view them offline.\" },\n { q: \"How can I contact technical support?\", a: \"You can email help@livresq.com or use the contact form on the official website. The support team typically responds within one business day.\" },\n { q: \"Does LIVRESQ work on Mac or Linux?\", a: \"Yes. Since it's browser-based, it works on any operating system (Windows, macOS, Linux) with a compatible modern web browser.\" },\n { q: \"Where can I see when the lesson was last saved?\", a: \"In the top-right corner of the editor workspace, a timestamp indicates 'Last saved at HH:MM:SS' or 'Saved X minutes ago'.\" },\n { q: \"What do the different icons next to my resources mean?\", a: \"A book icon usually indicates a Project, a page icon indicates a Section, and other icons indicate specific media types like images, videos, or quizzes.\" },\n { q: \"Can I filter the resource list by type, tag, or collaborator?\", a: \"Yes, use the filter options above the resource list to narrow down your view by projects, sections, media, or specific tags you've created.\" },\n { q: \"What is the 'New' page in the library?\", a: \"The 'New' or 'Discover' tab lists the most recently published lessons from the community in chronological order.\" },\n { q: \"What are 'Recommended' lessons in the library?\", a: \"These are high-quality or popular lessons hand-picked by the LIVRESQ editorial team to serve as great examples for other creators.\" }\n ]\n },\n {\n id: 'setari',\n title: 'Settings and Customization',\n icon: 'settings',\n image: \"https:\/\/livresq.com\/wp-content\/uploads\/2026\/01\/library.jpg\",\n items: [\n { q: \"Can I change the theme (color scheme) of my lesson?\", a: \"Yes. In the project editor, go to the 'Theme' or 'Preferences' section. You can choose from presets or customize colors for buttons, bars, and highlights.\" },\n { q: \"How do I modify the background color or image of a page?\", a: \"In 'Section Properties', you can set a background color or upload an image. You can also set row-specific backgrounds in the row property panel.\" },\n { q: \"How do I add a custom logo to the lesson?\", a: \"Upload your logo (preferably a transparent PNG) in the 'Project Preferences' under the 'Logo' setting. It will appear on the cover and in the navigation menu.\" },\n { q: \"How do I add the title, author, and description (metadata)?\", a: \"Go to the 'Metadata' tab at the project level. Fill in the title, authors, description, subject, and keywords, then save.\" },\n { q: \"What is lesson metadata and what does it include?\", a: \"Metadata is 'data about data' \u2013 it includes the title, author, summary, discipline, grade level, language, and keywords for classification.\" },\n { q: \"Can I change the Assistant character or its message image?\", a: \"Yes. In 'Assistant Configuration', you can choose different characters or upload your own images\/GIFs for neutral and speaking states.\" },\n { q: \"What are the Assistant display modes (Classic vs Modern)?\", a: \"Classic mode floats the assistant with a speech bubble over the content. Modern mode integrates the assistant directly into the page flow.\" },\n { q: \"How do I restrict the lesson to specific devices (PC, tablet, phone)?\", a: \"In Project Preferences, you can toggle which devices are allowed to run the content. This is useful if your design specifically targets larger screens.\" },\n { q: \"Can I hide the navigation bar or the lesson menu?\", a: \"Yes, in the display preferences, you can toggle the visibility of the top title bar and the table of contents menu.\" },\n { q: \"How do I show or hide the progress percentage?\", a: \"Enable or disable the 'Show student progress' toggle in the project settings. This determines if a progress bar appears for the student.\" },\n { q: \"Can I change the interface language for my students?\", a: \"Yes, set the 'Interface Language' in Preferences. This translates standard UI buttons like 'Continue' and 'Menu' for the student.\" },\n { q: \"Can I insert custom HTML code or scripts?\", a: \"Direct scripts are restricted for security, but you can use iframes in text blocks or the 'Application' resource for custom HTML5 content.\" },\n { q: \"Can advanced users add custom CSS?\", a: \"Yes. The platform provides a 'Custom CSS' field at the project, section, or resource level for advanced styling adjustments.\" },\n { q: \"Is there a limit on storage or file sizes?\", a: \"Storage limits depend on your plan (Free vs Premium). It's best to optimize images and videos to fit within these limits and ensure fast loading.\" },\n { q: \"Can I change the font type used in the lesson?\", a: \"Yes, choose from several web-safe fonts in the Text resource panel, such as Arial, Verdana, Georgia, or Tahoma.\" },\n { q: \"Can I add multiple authors to the metadata?\", a: \"Yes, you can add multiple names in the 'Author' field, separated by commas or using the 'Add author' button.\" },\n { q: \"What extra info can I add to metadata (duration, discipline, etc.)?\", a: \"You can specify duration, specific discipline, educational level, language, and relevant keywords to improve search results.\" },\n { q: \"What does the 'Contribute to score' option for a test mean?\", a: \"If enabled, the test results are counted towards the final lesson score (e.g., for SCORM reports). If disabled, it's just a practice exercise.\" },\n { q: \"How do I customize feedback messages for test questions?\", a: \"In the quiz editor, each answer option has a feedback field where you can type specific responses for correct or incorrect choices.\" },\n { q: \"Are lessons accessible to students with disabilities?\", a: \"LIVRESQ supports accessibility features like 'Alt text' for images and standard HTML structures compatible with screen readers.\" },\n { q: \"How do I ensure my lesson loads quickly?\", a: \"Optimize your media files (compress images, use moderate video resolutions) and split long lessons into multiple sections for sequential loading.\" }\n ]\n },\n {\n id: 'info',\n title: 'More Information',\n icon: 'info',\n items: [\n { q: \"Is it truly free?\", a: \"Yes! LIVRESQ offers a free account for anyone who wants to create educational materials or interactive lessons.\" },\n { q: \"How do I distribute\/export content created in LIVRESQ?\", a: \"There are 5 ways: 1) Export as HTML5 package for any website; 2) SCORM 2004 3rd\/4th edition for LMS; 3) SCORM 1.2 for LMS; 4) Publish privately to your Personal Shelf; 5) Publish publicly to the Library.\" },\n { q: \"Are there templates I can use?\", a: \"Yes! LIVRESQ has templates created by our team including projects, sections, and quizzes. You can find them in the 'Templates' section of the Organizer.\" },\n { q: \"Who owns the content created in LIVRESQ?\", a: \"All content created by you in LIVRESQ belongs to you 100%. You can do whatever you want with it, including selling it.\" },\n { q: \"Is my language supported by the platform?\", a: \"The interface is available in: Romanian, English, French, Spanish, Italian, German, Swedish, Bulgarian, Hungarian, Portuguese, Ukrainian, Chinese, Russian, Korean, and Arabic.\" },\n { q: \"Is LIVRESQ online (cloud-based) or desktop-based?\", a: \"LIVRESQ is completely online (cloud-based). You just log in via your browser; no downloads or installations are needed.\" },\n { q: \"Can I collaborate with others on a project?\", a: \"Yes, multiple users can work together. Using the collaboration function, you can provide a secret editing link to your team.\" },\n { q: \"How do I share a course with a colleague?\", a: \"Use the 'Share' button in the project view. Copy the link and send it to your colleague; once they click it, the project will appear in their 'Shared with me' list.\" },\n { q: \"How easy is it to use LIVRESQ?\", a: \"No programming knowledge is needed. The interface is drag-and-drop, making it very intuitive to assemble your courses.\" },\n { q: \"What devices do LIVRESQ lessons work on?\", a: \"Lessons are responsive and work on desktops, tablets, and smartphones regardless of screen size, as long as they have a browser.\" },\n { q: \"Can LIVRESQ courses be exported for LMS systems?\", a: \"Yes! You can export in SCORM 2004 (3rd\/4th) and SCORM 1.2 formats, which are standard for Learning Management Systems.\" },\n { q: \"How can I communicate with the LIVRESQ team if I need help?\", a: \"The easiest way is to email help@livresq.com. We typically respond within one business day.\" },\n { q: \"Can I create microlearning modules?\", a: \"Yes! LIVRESQ is successfully used by companies to develop microlearning content due to its flexible grid structure.\" },\n { q: \"What types of resources can I use?\", a: \"You can use Images, Galleries, Text Cells, Quizzes, Videos, Audio, Pop-ups, GIFs, iFrames, Tables, and Templates.\" },\n { q: \"Will LIVRESQ work well in my country?\", a: \"Yes, we use a Content Delivery Network (CDN) to serve platform files from the closest geographic location to you for high performance.\" },\n { q: \"I don't have an LMS, can I still use LIVRESQ?\", a: \"Yes! You don't need an LMS. You can export as an HTML5 package for any site or use our Personal Shelf with a secret direct link.\" },\n { q: \"Can I build a course starting from something I've already made?\", a: \"Yes! You can reuse elements from your previous materials or start from our professionally designed templates.\" },\n { q: \"Can I use my brand elements in the course?\", a: \"Yes! LIVRESQ understands the need for consistent branding and allows full customization of logos and themes.\" },\n { q: \"What do I buy when I pay for a 'seat'?\", a: \"A 'seat' is an access account (linked to an email) for all material creation features. The buyer decides who to allocate the seat to.\" },\n { q: \"Will LIVRESQ receive new features in the future?\", a: \"Yes! We launch new features and improvements approximately every two weeks.\" },\n { q: \"If I buy now, will I have access to future features?\", a: \"Yes! All new features launched are available to all active accounts, regardless of when they signed up.\" },\n { q: \"Can I add a LIVRESQ material to Microsoft Teams?\", a: \"Yes! Use the 'Website' tab option in a Teams channel and paste the direct link to your published lesson from your personal shelf.\" },\n { q: \"Can I join a Facebook or LinkedIn group to learn more?\", a: \"Yes! You can find our official social groups in the Training section of our website.\" },\n { q: \"Where can I see examples of courses made with LIVRESQ?\", a: \"You can find many examples directly in the LIVRESQ Library at library.livresq.com.\" },\n { q: \"Are LIVRESQ courses SCORM compliant?\", a: \"Yes, we support SCORM 1.2 and SCORM 2004 (3rd and 4th editions) for maximum LMS compatibility.\" }\n ]\n }\n ];\n\n \/\/ --- 2. RENDERING LOGIC ---\n\n function renderFAQ(searchTerm = '') {\n const contentContainer = document.getElementById('faq-content');\n const sidebarContainer = document.getElementById('faq-sidebar');\n contentContainer.innerHTML = '';\n sidebarContainer.innerHTML = '';\n\n let hasResults = false;\n \n \/\/ Filter Logic\n const filteredData = faqData.map(cat => {\n const filteredItems = cat.items.filter(item => \n item.q.toLowerCase().includes(searchTerm.toLowerCase()) || \n item.a.toLowerCase().includes(searchTerm.toLowerCase())\n );\n return { ...cat, items: filteredItems };\n }).filter(cat => cat.items.length > 0);\n\n \/\/ No Results State\n if (filteredData.length === 0) {\n contentContainer.innerHTML = `\n <div class=\"text-center py-20 bg-white rounded-xl border border-slate-200 shadow-sm\">\n <div class=\"mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-slate-100 mb-6\">\n <i data-lucide=\"search\" class=\"h-8 w-8 text-slate-400\"><\/i>\n <\/div>\n <p class=\"text-slate-500 text-xl font-medium\">No results found for \"${searchTerm}\".<\/p>\n <p class=\"text-slate-400 mt-2\">Try another search term.<\/p>\n <\/div>\n `;\n lucide.createIcons();\n return;\n }\n\n \/\/ Render Categories\n filteredData.forEach((category, idx) => {\n \/\/ Sidebar Link\n const sidebarLink = document.createElement('button');\n \/\/ Add an ID for easy state selection\n sidebarLink.id = `sidebar-btn-${category.id}`;\n \n \/\/ Default Inactive Classes\n sidebarLink.className = `w-full group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 mb-1 text-slate-600 hover:bg-slate-50 hover:text-livresq-fucsia`;\n \n sidebarLink.innerHTML = `\n <span id=\"sidebar-icon-${category.id}\" class=\"mr-3 flex-shrink-0 transition-colors text-slate-400 group-hover:text-livresq-fucsia\">\n <i data-lucide=\"${category.icon}\" class=\"w-5 h-5\"><\/i>\n <\/span>\n <span class=\"truncate\">${category.title}<\/span>\n `;\n \n sidebarLink.onclick = () => {\n const el = document.getElementById(category.id);\n if(el) {\n \/\/ Calculate offset for sticky search bar (top-40 + header offset)\n const y = el.getBoundingClientRect().top + window.scrollY - 100;\n window.scrollTo({top: y, behavior: 'smooth'});\n \/\/ Update Active State\n updateSidebarState(category.id);\n }\n };\n sidebarContainer.appendChild(sidebarLink);\n\n \/\/ Main Content Block\n const catDiv = document.createElement('div');\n catDiv.id = category.id;\n catDiv.className = \"scroll-mt-40\"; \/\/ Scroll margin for sticky headers\n\n \/\/ Header\n const headerHtml = `\n <div class=\"flex items-center gap-3 mb-6 border-b border-slate-200 pb-4\">\n <div class=\"p-2.5 bg-white rounded-xl shadow-sm text-livresq-fucsia border border-slate-100\">\n <i data-lucide=\"${category.icon}\" class=\"w-6 h-6\"><\/i>\n <\/div>\n <h2 class=\"text-2xl font-bold text-slate-900\">${category.title}<\/h2>\n <\/div>\n `;\n\n \/\/ Image Layout - ZigZag Logic matching React (idx % 2 === 1)\n const isZigZag = idx % 2 === 1;\n const imageOrderClass = isZigZag ? 'xl:-order-1' : '';\n\n const imageHtml = category.image ? `\n <div class=\"w-full xl:w-[45%] sticky top-40 ${imageOrderClass} mb-8 xl:mb-0\">\n <div class=\"rounded-2xl overflow-hidden shadow-lg border border-slate-200 group relative\">\n <div class=\"absolute inset-0 bg-slate-900\/0 group-hover:bg-slate-900\/5 transition-colors duration-300 z-10\"><\/div>\n <img decoding=\"async\" \n src=\"${category.image}\" \n alt=\"Image for ${category.title}\"\n class=\"w-full h-auto object-cover transform transition-transform duration-500 group-hover:scale-105\"\n loading=\"lazy\"\n \/>\n <\/div>\n <\/div>\n ` : '';\n\n \/\/ Questions List\n let questionsHtml = '<div class=\"divide-y divide-slate-100\">';\n category.items.forEach((item, index) => {\n const uniqueId = `${category.id}-${index}`;\n questionsHtml += `\n <div class=\"group bg-white transition-colors hover:bg-slate-50\/30\">\n <button\n onclick=\"toggleAccordion('${uniqueId}')\"\n class=\"w-full text-left px-6 py-5 focus:outline-none flex items-start justify-between gap-4\"\n >\n <span id=\"q-text-${uniqueId}\" class=\"flex-1 text-left break-words whitespace-normal pr-4 text-[15px] font-bold leading-snug transition-colors text-slate-700 group-hover:text-slate-900\">\n ${item.q}\n <\/span>\n <span class=\"flex-shrink-0 mt-0.5\">\n <div id=\"icon-bg-${uniqueId}\" class=\"p-1 rounded-full transition-all duration-200 bg-slate-100 text-slate-400 group-hover:bg-slate-200\">\n <i data-lucide=\"chevron-down\" id=\"icon-${uniqueId}\" class=\"w-4 h-4 transition-transform duration-300\"><\/i>\n <\/div>\n <\/span>\n <\/button>\n <div id=\"ans-${uniqueId}\" class=\"accordion-content\">\n <div class=\"px-6 pb-6 pt-0\">\n <div class=\"text-slate-600 text-sm leading-relaxed bg-slate-50 rounded-lg p-4 border border-slate-100\/50\">\n ${item.a}\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n `;\n });\n questionsHtml += '<\/div>';\n\n catDiv.innerHTML = `\n ${headerHtml}\n <div class=\"flex flex-col xl:flex-row gap-8 items-start\">\n <div class=\"w-full xl:flex-1 bg-white shadow-sm rounded-2xl border border-slate-200 overflow-hidden\">\n ${questionsHtml}\n <\/div>\n ${imageHtml}\n <\/div>\n `;\n\n contentContainer.appendChild(catDiv);\n });\n\n \/\/ Re-initialize icons for newly added elements\n lucide.createIcons();\n }\n\n \/\/ --- 3. STATE MANAGEMENT ---\n\n \/\/ Sidebar Active State Manager\n window.updateSidebarState = (activeId) => {\n faqData.forEach(cat => {\n const btn = document.getElementById(`sidebar-btn-${cat.id}`);\n const iconSpan = document.getElementById(`sidebar-icon-${cat.id}`);\n \n if (!btn || !iconSpan) return;\n\n if (cat.id === activeId) {\n \/\/ ACTIVE STATE\n btn.classList.remove('text-slate-600', 'hover:bg-slate-50', 'hover:text-livresq-fucsia');\n iconSpan.classList.remove('text-slate-400', 'group-hover:text-livresq-fucsia');\n \n btn.classList.add('bg-livresq-fucsia', 'text-white', 'shadow-md', 'scale-[1.02]');\n iconSpan.classList.add('text-white');\n } else {\n \/\/ INACTIVE STATE\n btn.classList.remove('bg-livresq-fucsia', 'text-white', 'shadow-md', 'scale-[1.02]');\n iconSpan.classList.remove('text-white');\n \n btn.classList.add('text-slate-600', 'hover:bg-slate-50', 'hover:text-livresq-fucsia');\n iconSpan.classList.add('text-slate-400', 'group-hover:text-livresq-fucsia');\n }\n });\n };\n\n \/\/ --- 4. INTERACTION HANDLERS ---\n\n \/\/ Accordion Toggle\n window.toggleAccordion = (id) => {\n const content = document.getElementById(`ans-${id}`);\n const icon = document.getElementById(`icon-${id}`);\n const iconBg = document.getElementById(`icon-bg-${id}`);\n const qText = document.getElementById(`q-text-${id}`);\n \n const isOpen = content.style.maxHeight && content.style.maxHeight !== '0px';\n\n if (isOpen) {\n \/\/ Close\n content.style.maxHeight = '0px';\n content.classList.remove('open');\n icon.style.transform = 'rotate(0deg)';\n iconBg.classList.remove('bg-livresq-fucsia\/10', 'text-livresq-fucsia');\n iconBg.classList.add('bg-slate-100', 'text-slate-400');\n qText.classList.remove('text-livresq-fucsia');\n qText.classList.add('text-slate-700');\n } else {\n \/\/ Open\n content.style.maxHeight = content.scrollHeight + \"px\";\n content.classList.add('open');\n icon.style.transform = 'rotate(180deg)';\n iconBg.classList.remove('bg-slate-100', 'text-slate-400');\n iconBg.classList.add('bg-livresq-fucsia\/10', 'text-livresq-fucsia');\n qText.classList.remove('text-slate-700');\n qText.classList.add('text-livresq-fucsia');\n }\n };\n\n \/\/ --- 5. EVENT LISTENERS ---\n\n document.addEventListener('DOMContentLoaded', () => {\n \/\/ Initial Render\n renderFAQ();\n\n \/\/ Search\n const searchInput = document.getElementById('faq-search');\n searchInput.addEventListener('input', (e) => {\n renderFAQ(e.target.value);\n });\n });\n <\/script>\n <\/div>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>LIVRESQ – Frequently Asked Questions Frequently Asked Questions (FAQ) Find answers to the most common questions about the LIVRESQ platform, editor, and library.<\/p>","protected":false},"author":2,"featured_media":403601,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-20268","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>FAQ - LIVRESQ<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/livresq.com\/en\/faq\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"FAQ - LIVRESQ\" \/>\n<meta property=\"og:description\" content=\"LIVRESQ – Frequently Asked Questions Frequently Asked Questions (FAQ) Find answers to the most common questions about the LIVRESQ platform, editor, and library.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/livresq.com\/en\/faq\/\" \/>\n<meta property=\"og:site_name\" content=\"LIVRESQ\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-26T13:38:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/livresq.com\/wp-content\/uploads\/2025\/07\/Untitled-800-x-800-px.png\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/livresq.com\/faq\/\",\"url\":\"https:\/\/livresq.com\/faq\/\",\"name\":\"FAQ - LIVRESQ\",\"isPartOf\":{\"@id\":\"https:\/\/livresq.com\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/livresq.com\/faq\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/livresq.com\/faq\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/07\/Untitled-800-x-800-px.png?fit=800%2C800&ssl=1\",\"datePublished\":\"2020-04-05T10:55:11+00:00\",\"dateModified\":\"2026-01-26T13:38:58+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/livresq.com\/faq\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/livresq.com\/faq\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/livresq.com\/faq\/#primaryimage\",\"url\":\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/07\/Untitled-800-x-800-px.png?fit=800%2C800&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/07\/Untitled-800-x-800-px.png?fit=800%2C800&ssl=1\",\"width\":800,\"height\":800},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/livresq.com\/faq\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Prima pagin\u0103\",\"item\":\"https:\/\/livresq.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"FAQ\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/livresq.com\/en\/#website\",\"url\":\"https:\/\/livresq.com\/en\/\",\"name\":\"LIVRESQ\",\"description\":\"eLearning Authoring Tool\",\"publisher\":{\"@id\":\"https:\/\/livresq.com\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/livresq.com\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/livresq.com\/en\/#organization\",\"name\":\"LIVRESQ - Authoring Tool\",\"url\":\"https:\/\/livresq.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/livresq.com\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2019\/07\/cropped-Logo.png?fit=1054%2C575&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2019\/07\/cropped-Logo.png?fit=1054%2C575&ssl=1\",\"width\":1054,\"height\":575,\"caption\":\"LIVRESQ - Authoring Tool\"},\"image\":{\"@id\":\"https:\/\/livresq.com\/en\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"FAQ - LIVRESQ","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/livresq.com\/en\/faq\/","og_locale":"en_US","og_type":"article","og_title":"FAQ - LIVRESQ","og_description":"LIVRESQ – Frequently Asked Questions Frequently Asked Questions (FAQ) Find answers to the most common questions about the LIVRESQ platform, editor, and library.","og_url":"https:\/\/livresq.com\/en\/faq\/","og_site_name":"LIVRESQ","article_modified_time":"2026-01-26T13:38:58+00:00","og_image":[{"width":800,"height":800,"url":"https:\/\/livresq.com\/wp-content\/uploads\/2025\/07\/Untitled-800-x-800-px.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/livresq.com\/faq\/","url":"https:\/\/livresq.com\/faq\/","name":"FAQ - LIVRESQ","isPartOf":{"@id":"https:\/\/livresq.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/livresq.com\/faq\/#primaryimage"},"image":{"@id":"https:\/\/livresq.com\/faq\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/07\/Untitled-800-x-800-px.png?fit=800%2C800&ssl=1","datePublished":"2020-04-05T10:55:11+00:00","dateModified":"2026-01-26T13:38:58+00:00","breadcrumb":{"@id":"https:\/\/livresq.com\/faq\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/livresq.com\/faq\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/livresq.com\/faq\/#primaryimage","url":"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/07\/Untitled-800-x-800-px.png?fit=800%2C800&ssl=1","contentUrl":"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2025\/07\/Untitled-800-x-800-px.png?fit=800%2C800&ssl=1","width":800,"height":800},{"@type":"BreadcrumbList","@id":"https:\/\/livresq.com\/faq\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Prima pagin\u0103","item":"https:\/\/livresq.com\/"},{"@type":"ListItem","position":2,"name":"FAQ"}]},{"@type":"WebSite","@id":"https:\/\/livresq.com\/en\/#website","url":"https:\/\/livresq.com\/en\/","name":"LIVRESQ","description":"eLearning Authoring Tool","publisher":{"@id":"https:\/\/livresq.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/livresq.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/livresq.com\/en\/#organization","name":"LIVRESQ - Authoring Tool","url":"https:\/\/livresq.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/livresq.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2019\/07\/cropped-Logo.png?fit=1054%2C575&ssl=1","contentUrl":"https:\/\/i0.wp.com\/livresq.com\/wp-content\/uploads\/2019\/07\/cropped-Logo.png?fit=1054%2C575&ssl=1","width":1054,"height":575,"caption":"LIVRESQ - Authoring Tool"},"image":{"@id":"https:\/\/livresq.com\/en\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/livresq.com\/en\/wp-json\/wp\/v2\/pages\/20268","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/livresq.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/livresq.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/livresq.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/livresq.com\/en\/wp-json\/wp\/v2\/comments?post=20268"}],"version-history":[{"count":130,"href":"https:\/\/livresq.com\/en\/wp-json\/wp\/v2\/pages\/20268\/revisions"}],"predecessor-version":[{"id":489593,"href":"https:\/\/livresq.com\/en\/wp-json\/wp\/v2\/pages\/20268\/revisions\/489593"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/livresq.com\/en\/wp-json\/wp\/v2\/media\/403601"}],"wp:attachment":[{"href":"https:\/\/livresq.com\/en\/wp-json\/wp\/v2\/media?parent=20268"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}