FAQ - Johto
Perguntas Frequentes
Pergunta: ${item.question}
Resposta: ${item.answer}
`;
ul.appendChild(li);
});
container.appendChild(ul);
container.querySelectorAll(".faq-question").forEach(el => {
el.onclick = function () {
const ansId = this.getAttribute("data-answer");
const ans = document.getElementById(ansId);
if (ans.classList.contains("active")) {
ans.classList.remove("active");
} else {
container.querySelectorAll(".faq-answer.active").forEach(a => a.classList.remove("active"));
ans.classList.add("active");
}
};
});
}
function getRandomQuestions(faqArr, count = 8) {
const arr = [...faqArr];
for (let i = arr.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[arr[i], arr[j]] = [arr[j], arr[i]];
}
return arr.slice(0, count);
}
document.addEventListener("DOMContentLoaded", () => {
const widget = document.getElementById("faq-widget");
if (!widget) {
console.error("Erro: Elemento faq-widget não encontrado.");
return;
}
// Obtém os parâmetros dos atributos data-*
let title = widget.getAttribute("data-title") || "Perguntas Frequentes";
let placeholder = widget.getAttribute("data-placeholder") || "Pesquisar por palavra, grupo, etc.";
// Log para depuração
console.log("Title obtido:", title);
console.log("Placeholder obtido:", placeholder);
// Atualiza os elementos no DOM
const titleElement = widget.querySelector(".faq-title");
const searchInput = widget.querySelector("#faq-search");
if (titleElement) {
titleElement.textContent = title;
} else {
console.error("Erro: Elemento .faq-title não encontrado.");
}
if (searchInput) {
searchInput.setAttribute("placeholder", placeholder);
} else {
console.error("Erro: Elemento #faq-search não encontrado.");
}
const tagSelect = widget.querySelector("#faq-tag-select");
if (!tagSelect) {
console.error("Erro: Elemento #faq-tag-select não encontrado.");
return;
}
renderTagSelect(tagSelect);
function updateFAQ() {
const selected = tagSelect.value;
if (!selected) {
renderFAQ({ filter: searchInput.value, tag: "", useRandom: !searchInput.value });
} else if (selected === "__all__") {
renderFAQ({ filter: searchInput.value, tag: "__all__", useRandom: false });
} else {
renderFAQ({ filter: searchInput.value, tag: selected, useRandom: false });
}
}
searchInput.addEventListener("input", updateFAQ);
tagSelect.addEventListener("change", updateFAQ);
// Renderiza inicialmente com a ordem padrão
renderFAQ({ useRandom: true });
});