${question.text}
`;
// Add options
question.options.forEach(option => {
html += `
`;
});
html += `
${option.text}
${recommended.icon}
Aanbevolen actie: ${recommended.title}
${recommended.description}
Waarom ${recommended.title}?
Voordelen:
-
${recommended.pros.map(pro => `
- ${pro} `).join(”)}
Nadelen:
-
${recommended.cons.map(con => `
- ${con} `).join(”)}
Alle engagement opties:
`;
// Add all engagement types with their scores
for (const [type, details] of Object.entries(engagementTypes)) {
const percentage = Math.round((scores[type] / (questions.length * 5)) * 100);
const isRecommended = type === recommendedType;
html += `
`;
}
html += `
${details.icon}
${isRecommended ? ‘Aanbevolen‘ : ”}
${details.title}
${details.description}
LinkedIn Engagement Keuzewijzer
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
background-color: #f0f4f8;
}
.progress-bar {
transition: width 0.5s ease;
}
.option-card {
transition: all 0.3s ease;
}
.option-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.fade-in {
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
LinkedIn Engagement Keuzewijzer
Ontdek welke engagement actie je het beste kunt doen op LinkedIn
Wat is je doel met deze engagement actie?
De auteur ondersteunen
Mijn eigen zichtbaarheid vergroten
De boodschap verspreiden
Mijn netwerk uitbreiden
← Terug
Opnieuw beginnen
// Define the questions and possible answers
const questions = [
{
id: 1,
text: "Wat is je doel met deze engagement actie?",
options: [
{ id: "goal-support", text: "De auteur ondersteunen", score: { like: 3, comment: 5, repostWithText: 4, repostWithoutText: 4, ownPost: 1 } },
{ id: "goal-visibility", text: "Mijn eigen zichtbaarheid vergroten", score: { like: 1, comment: 4, repostWithText: 3, repostWithoutText: 2, ownPost: 5 } },
{ id: "goal-spread", text: "De boodschap verspreiden", score: { like: 1, comment: 2, repostWithText: 4, repostWithoutText: 5, ownPost: 3 } },
{ id: "goal-network", text: "Mijn netwerk uitbreiden", score: { like: 2, comment: 5, repostWithText: 3, repostWithoutText: 2, ownPost: 4 } }
]
},
{
id: 2,
text: "Hoeveel tijd heb je beschikbaar om te besteden aan LinkedIn engagement?",
options: [
{ id: "time-minimal", text: "Minimaal (enkele seconden)", score: { like: 5, comment: 0, repostWithText: 0, repostWithoutText: 3, ownPost: 0 } },
{ id: "time-little", text: "Een beetje (minder dan een minuut)", score: { like: 3, comment: 4, repostWithText: 2, repostWithoutText: 5, ownPost: 0 } },
{ id: "time-moderate", text: "Redelijk wat (enkele minuten)", score: { like: 1, comment: 5, repostWithText: 4, repostWithoutText: 3, ownPost: 2 } },
{ id: "time-plenty", text: "Veel (10+ minuten)", score: { like: 0, comment: 3, repostWithText: 4, repostWithoutText: 1, ownPost: 5 } }
]
},
{
id: 3,
text: "Hoe betrokken ben je bij het onderwerp van het bericht?",
options: [
{ id: "involvement-low", text: "Nauwelijks (ik vind het gewoon interessant)", score: { like: 5, comment: 1, repostWithText: 1, repostWithoutText: 3, ownPost: 0 } },
{ id: "involvement-medium", text: "Gemiddeld (ik heb er enige kennis van)", score: { like: 3, comment: 4, repostWithText: 3, repostWithoutText: 4, ownPost: 2 } },
{ id: "involvement-high", text: "Zeer betrokken (ik ben expert/heb sterke mening)", score: { like: 1, comment: 5, repostWithText: 4, repostWithoutText: 2, ownPost: 5 } }
]
},
{
id: 4,
text: "Heb je eigen inzichten of kennis die je wilt toevoegen aan het onderwerp?",
options: [
{ id: "insights-yes", text: "Ja, ik heb waardevolle inzichten om te delen", score: { like: 0, comment: 4, repostWithText: 4, repostWithoutText: 1, ownPost: 5 } },
{ id: "insights-somewhat", text: "Een beetje, ik kan er iets aan toevoegen", score: { like: 1, comment: 5, repostWithText: 4, repostWithoutText: 2, ownPost: 3 } },
{ id: "insights-no", text: "Nee, ik heb geen specifieke toevoegingen", score: { like: 5, comment: 2, repostWithText: 1, repostWithoutText: 4, ownPost: 0 } }
]
},
{
id: 5,
text: "Hoe belangrijk vind je het om een persoonlijke relatie op te bouwen met de auteur?",
options: [
{ id: "relationship-very", text: "Zeer belangrijk", score: { like: 1, comment: 5, repostWithText: 3, repostWithoutText: 2, ownPost: 2 } },
{ id: "relationship-somewhat", text: "Enigszins belangrijk", score: { like: 3, comment: 4, repostWithText: 3, repostWithoutText: 2, ownPost: 3 } },
{ id: "relationship-not", text: "Niet belangrijk", score: { like: 4, comment: 1, repostWithText: 3, repostWithoutText: 5, ownPost: 4 } }
]
}
];
// Define the engagement types with descriptions
const engagementTypes = {
like: {
title: "Liken",
icon: "👍",
description: "Een like is een snelle en eenvoudige manier om waardering te tonen, maar heeft beperkte effectiviteit voor zichtbaarheid.",
pros: ["Snel en eenvoudig", "Toont waardering", "Verhoogt zichtbaarheid van het bericht enigszins"],
cons: ["Beperkte zichtbaarheid voor jezelf", "Minimale interactie", "Weinig persoonlijke inbreng"]
},
comment: {
title: "Reageren",
icon: "💬",
description: "Reageren is zeer effectief voor zichtbaarheid en het opbouwen van relaties. Het toont betrokkenheid en expertise.",
pros: ["Zeer effectief voor zichtbaarheid", "Bouwt relaties op", "Toont je expertise en inzichten"],
cons: ["Kost meer tijd", "Vereist inhoudelijke inbreng", "Moet relevant en waardevol zijn"]
},
repostWithText: {
title: "Reposten met eigen tekst",
icon: "🔄✏️",
description: "Reposten met eigen tekst laat je eigen inzichten zien, maar kan als duplicate content worden gezien en krijgt daardoor minder bereik.",
pros: ["Toont je eigen inzichten", "Verspreidt de boodschap", "Combineert andermans content met jouw mening"],
cons: ["Kan als duplicate content worden gezien", "Krijgt minder bereik", "Verdeelt aandacht tussen jou en originele auteur"]
},
repostWithoutText: {
title: "Reposten zonder eigen tekst",
icon: "🔄",
description: "Reposten zonder eigen tekst helpt het bericht verspreiden zonder direct op jezelf af te stralen.",
pros: ["Verspreidt de boodschap effectief", "Ondersteunt de originele auteur", "Weinig tijdsinvestering nodig"],
cons: ["Straalt niet direct op jezelf af", "Geen persoonlijke inbreng", "Minder effectief voor relatieopbouw"]
},
ownPost: {
title: "Zelf een bericht plaatsen",
icon: "📝",
description: "Zelf een bericht plaatsen is het meest effectief als je tijd hebt en betrokken bent bij het onderwerp.",
pros: ["Maximale zichtbaarheid voor jezelf", "Volledige controle over de boodschap", "Toont expertise en autoriteit"],
cons: ["Kost veel tijd", "Vereist grondige kennis", "Moet origineel en waardevol zijn"]
}
};
// Initialize variables
let currentQuestionIndex = 0;
let scores = {
like: 0,
comment: 0,
repostWithText: 0,
repostWithoutText: 0,
ownPost: 0
};
// DOM elements
const contentArea = document.getElementById('content-area');
const resultArea = document.getElementById('result-area');
const progressBar = document.getElementById('progress-bar');
const backBtn = document.getElementById('back-btn');
const restartBtn = document.getElementById('restart-btn');
// Initialize the quiz
function initQuiz() {
showQuestion(0);
updateProgressBar();
// Event listeners
backBtn.addEventListener('click', goBack);
restartBtn.addEventListener('click', restart);
}
// Show a question
function showQuestion(index) {
const question = questions[index];
// Update back button visibility
backBtn.classList.toggle('hidden', index === 0);
// Create question HTML
let html = `
<div class="fade-in">
<h2 class="text-xl font-semibold mb-6">${question.text}</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
`;
// Add options
question.options.forEach(option => {
html += `
<div class="option-card bg-blue-50 border border-blue-100 rounded-lg p-4 cursor-pointer hover:bg-blue-100"
data-option-id="${option.id}" onclick="selectOption('${option.id}')">
<p class="font-medium text-gray-800">${option.text}</p>
</div>
`;
});
html += `</div></div>`;
// Update content area
contentArea.innerHTML = html;
}
// Handle option selection
function selectOption(optionId) {
const question = questions[currentQuestionIndex];
const selectedOption = question.options.find(option => option.id === optionId);
// Update scores
for (const [key, value] of Object.entries(selectedOption.score)) {
scores[key] += value;
}
// Move to next question or show results
currentQuestionIndex++;
if (currentQuestionIndex < questions.length) {
showQuestion(currentQuestionIndex);
} else {
showResults();
}
updateProgressBar();
}
// Show results
function showResults() {
// Hide content area and show result area
contentArea.classList.add('hidden');
resultArea.classList.remove('hidden');
// Hide back button and show restart button
backBtn.classList.add('hidden');
restartBtn.classList.remove('hidden');
// Find the engagement type with the highest score
let maxScore = -1;
let recommendedType = '';
for (const [type, score] of Object.entries(scores)) {
if (score > maxScore) {
maxScore = score;
recommendedType = type;
}
}
const recommended = engagementTypes[recommendedType];
// Create results HTML
let html = `
<div class="fade-in">
<div class="text-center mb-8">
<div class="text-5xl mb-4">${recommended.icon}</div>
<h2 class="text-2xl font-bold text-[#0077B5] mb-2">Aanbevolen actie: ${recommended.title}</h2>
<p class="text-gray-600">${recommended.description}</p>
</div>
<div class="bg-blue-50 border border-blue-100 rounded-lg p-6 mb-8">
<h3 class="font-semibold text-lg mb-3">Waarom ${recommended.title}?</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h4 class="font-medium text-green-700 mb-2">Voordelen:</h4>
<ul class="list-disc pl-5 space-y-1">
${recommended.pros.map(pro => `<li>${pro}</li>`).join('')}
</ul>
</div>
<div>
<h4 class="font-medium text-red-700 mb-2">Nadelen:</h4>
<ul class="list-disc pl-5 space-y-1">
${recommended.cons.map(con => `<li>${con}</li>`).join('')}
</ul>
</div>
</div>
</div>
<h3 class="font-semibold text-lg mb-4">Alle engagement opties:</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
`;
// Add all engagement types with their scores
for (const [type, details] of Object.entries(engagementTypes)) {
const percentage = Math.round((scores[type] / (questions.length * 5)) * 100);
const isRecommended = type === recommendedType;
html += `
<div class="border ${isRecommended ? 'border-[#0077B5] bg-blue-50' : 'border-gray-200'} rounded-lg p-4">
<div class="flex justify-between items-center mb-2">
<div class="flex items-center">
<span class="text-2xl mr-2">${details.icon}</span>
<h4 class="font-medium">${details.title}</h4>
</div>
${isRecommended ? '<span class="text-xs font-medium text-white bg-[#0077B5] px-2 py-1 rounded-full">Aanbevolen</span>' : ''}
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5 mb-2">
<div class="bg-[#0077B5] h-2.5 rounded-full" style="width: ${percentage}%"></div>
</div>
<p class="text-sm text-gray-600">${details.description}</p>
</div>
`;
}
html += `</div></div>`;
// Update result area
resultArea.innerHTML = html;
}
// Update progress bar
function updateProgressBar() {
const progress = ((currentQuestionIndex) / questions.length) * 100;
progressBar.style.width = `${progress}%`;
}
// Go back to previous question
function goBack() {
if (currentQuestionIndex > 0) {
currentQuestionIndex--;
// Reset scores for the current question
const previousQuestion = questions[currentQuestionIndex];
previousQuestion.options.forEach(option => {
for (const [key, value] of Object.entries(option.score)) {
scores[key] -= value; // This is simplified and assumes we know which option was selected
}
});
showQuestion(currentQuestionIndex);
updateProgressBar();
}
}
// Restart the quiz
function restart() {
currentQuestionIndex = 0;
scores = {
like: 0,
comment: 0,
repostWithText: 0,
repostWithoutText: 0,
ownPost: 0
};
contentArea.classList.remove('hidden');
resultArea.classList.add('hidden');
restartBtn.classList.add('hidden');
showQuestion(0);
updateProgressBar();
}
// Make selectOption available globally
window.selectOption = selectOption;
// Initialize the quiz when the page loads
document.addEventListener('DOMContentLoaded', initQuiz);
(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'933d554ec4b09fb4',t:'MTc0NTI0MzI0Ni4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();