Locked konten dengan jawab soalan.

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.

<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">

</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">


[Write your content here in WYSIWYG editor]


</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>