`; resultsDiv.appendChild(teaserDiv); }); // Add Check Answers Button const checkAnswersButton = document.createElement('button'); checkAnswersButton.innerText = "Check Answers"; checkAnswersButton.style.background = '#ff6f61'; checkAnswersButton.style.color = '#fff'; checkAnswersButton.style.border = 'none'; checkAnswersButton.style.padding = '10px 20px'; checkAnswersButton.style.fontSize = '1rem'; checkAnswersButton.style.borderRadius = '8px'; checkAnswersButton.style.cursor = 'pointer'; checkAnswersButton.style.transition = 'background 0.3s ease'; checkAnswersButton.style.marginTop = '20px'; checkAnswersButton.addEventListener('click', () => { let correctAnswers = 0; teasers.forEach((teaser, index) => { const userAnswer = document.querySelector(`.answer-input[data-index="${index}"]`).value.trim().toLowerCase(); const correctAnswer = teaser.answer.toLowerCase(); const teaserDiv = resultsDiv.children[index]; if (userAnswer === correctAnswer) { teaserDiv.style.background = '#d4edda'; // Success color correctAnswers++; } else { teaserDiv.style.background = '#f8d7da'; // Error color } }); // Show Feedback const feedbackDiv = document.createElement('div'); feedbackDiv.style.marginTop = '20px'; feedbackDiv.style.color = '#fff'; feedbackDiv.innerHTML = `
You got ${correctAnswers}/${teasers.length} answers correct!
`; resultsDiv.appendChild(feedbackDiv); // Show PDF Download Button document.getElementById('download-pdf').style.display = 'block'; }); resultsDiv.appendChild(checkAnswersButton); }); // PDF Download Functionality document.getElementById('download-pdf').addEventListener('click', () => { const { jsPDF } = window.jspdf; const doc = new jsPDF(); // Add content to PDF doc.setFontSize(18); doc.text('Brain Teasers', 10, 20); let yOffset = 40; teasers.forEach((teaser, index) => { doc.setFontSize(14); doc.text(`${index + 1}. ${teaser.question}`, 10, yOffset); doc.setFontSize(12); doc.text(` Answer: ${teaser.answer}`, 10, yOffset + 10); yOffset += 20; }); // Save PDF doc.save('brain-teasers.pdf'); });The Interactive Brain Teaser Builder is an engaging tool that allows users to create and solve custom puzzles, riddles, and logic challenges. This tool is perfect for educators, puzzle enthusiasts, and content creators who want to design interactive challenges.
Featuring real-time puzzle creation, a stylish and modern UI, and a PDF export option, this tool ensures a seamless and fun experience. It is fully optimized for integration within WordPress Elementor HTML blocks, ensuring it remains in its container without affecting other page elements.
✨ Key Features
✅ Create & Solve Custom Brain Teasers – Design your own riddles, math puzzles, or word challenges.
✅ Real-time Preview – Instantly see how your puzzle looks.
✅ Attractive & Interactive UI – Fully responsive and visually appealing.
✅ PDF Download Button – Save your puzzle for sharing or printing.
✅ Seamless WordPress Integration – Works perfectly within Elementor.
🛠How to Use
- Enter the puzzle title (e.g., “What has keys but can’t open locks?”).
- Write the puzzle description and the answer.
- Click “Generate Puzzle” to preview it.
- Download as a PDF to share or print.