Locked konten dengan jawab soalan.
Januari 23, 2025
• Adzril MediaOne
ni penemuan idea terbaru. boleh locked content dengan reader perlu menjawab soalan. soalan pulak boleh buat banyak2 . kalau reader salah, dia takleh simply nak cuba jawab lagi sebab dia kena tunggu 30 minit untuk jawab balik soalan. tapi kalini soalan yang lain pulak.
ini codenya.
<!-- Start Content Lock -->
<style>.content-lock {margin: 20px 0;}.question-section {background: #f5f5f5;padding: 20px;border-radius: 5px;margin-bottom: 20px;}.radio-option {display: block;margin: 10px 0;padding: 10px;border: 1px solid #ddd;border-radius: 3px;cursor: pointer;}.radio-option:hover {background: #eee;}.submit-button {padding: 8px 15px;background: #2196F3;color: #fff;border: none;border-radius: 3px;cursor: pointer;width: 100%;margin-top: 15px;}.submit-button:hover {background: #1976D2;}.locked-content {display: none;}.timeout-message {display: none;color: red;text-align: center;padding: 20px;}</style><div class="content-lock"><div id="question-section" class="question-section"><!-- Questions will be dynamically inserted here --></div><div id="timeout-message" class="timeout-message"><p>Wrong answer. Please wait 30 minutes before trying again.</p><p>Time remaining: <span id="timer">30:00</span></p></div><div id="locked-content" class="locked-content"><!-- End Content Lock Header -->[Write your content here in WYSIWYG editor]<!-- Start Content Lock Footer --></div></div><script>(function(){const questions = [{id: 1,question: "What is the capital of Malaysia?",options: [{ value: "kl", text: "Kuala Lumpur" },{ value: "jb", text: "Johor Bahru" },{ value: "penang", text: "Penang" }],correct: "kl"},{id: 2,question: "What year did Malaysia gain independence?",options: [{ value: "1957", text: "1957" },{ value: "1963", text: "1963" },{ value: "1965", text: "1965" }],correct: "1957"},{id: 3,question: "Which state is known as 'Land Below The Wind'?",options: [{ value: "sabah", text: "Sabah" },{ value: "sarawak", text: "Sarawak" },{ value: "pahang", text: "Pahang" }],correct: "sabah"}];const postId = window.location.pathname;let timeoutEndTime = localStorage.getItem('timeoutEndTime_' + postId);let currentQuestionIndex = parseInt(localStorage.getItem('currentQuestionIndex_' + postId) || '0');let timerInterval;function displayQuestion(index) {const question = questions[index];const html = `<div id="question${question.id}"><h3>To access the content, please answer this question:</h3><p>${question.question}</p>${question.options.map(option => `<label class="radio-option"><input type="radio" name="q${question.id}" value="${option.value}"> ${option.text}</label>`).join('')}<button onclick="checkAnswer()" class="submit-button">Submit Answer</button></div>`;document.getElementById('question-section').innerHTML = html;}if (timeoutEndTime && new Date().getTime() < timeoutEndTime) {showTimeout();startTimer(Math.floor((timeoutEndTime - new Date().getTime()) / 1000));} else {displayQuestion(currentQuestionIndex);}window.checkAnswer = function() {const currentQuestion = questions[currentQuestionIndex];const selectedAnswer = document.querySelector(`input[name="q${currentQuestion.id}"]:checked`);if (!selectedAnswer) return;if (selectedAnswer.value === currentQuestion.correct) {document.getElementById('question-section').style.display = 'none';document.getElementById('locked-content').style.display = 'block';} else {const timeoutDuration = 30 * 60 * 1000;const endTime = new Date().getTime() + timeoutDuration;localStorage.setItem('timeoutEndTime_' + postId, endTime);currentQuestionIndex = (currentQuestionIndex + 1) % questions.length;localStorage.setItem('currentQuestionIndex_' + postId, currentQuestionIndex);showTimeout();startTimer(1800);}}function showTimeout() {document.getElementById('question-section').style.display = 'none';document.getElementById('timeout-message').style.display = 'block';}function startTimer(duration) {let timer = duration;updateTimerDisplay(timer);clearInterval(timerInterval);timerInterval = setInterval(() => {timer--;updateTimerDisplay(timer);if (timer <= 0) {clearInterval(timerInterval);localStorage.removeItem('timeoutEndTime_' + postId);location.reload();}}, 1000);}function updateTimerDisplay(seconds) {const minutes = Math.floor(seconds / 60);const remainingSeconds = seconds % 60;document.getElementById('timer').textContent =`${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;}const securityEvents = ['contextmenu', 'selectstart', 'copy'];securityEvents.forEach(event => document.addEventListener(event, e => e.preventDefault()));document.addEventListener('keydown', e => {const blocked = {ctrlU: e.ctrlKey && e.keyCode === 85,ctrlC: e.ctrlKey && e.keyCode === 67,ctrlA: e.ctrlKey && e.keyCode === 65,f12: e.keyCode === 123};if(Object.values(blocked).some(Boolean)) {e.preventDefault();return false;}});})();</script><!-- End Content Lock -->
.png)
.png)
