Every week on the Fun Kids website, we’re asking you an important question! We’ve already asked whether you’ve been to any concerts, and whether or not you get pocket money. Now, we want to know whether you play any sports! It could be as part of an after-school club, you might play football with your local team at the weekends, or you might just love a kick-about in the park with your mates. Remember, once you’ve voted, don’t forget to tell us more about what you do in the comments below!
';
var stage = root.querySelector('.fkq-stage'), fill = root.querySelector('.fkq-fill'), count = root.querySelector('.fkq-count');
var cards = [];
function rightCount() { var n = 0; picked.forEach(function (v, i) { if (v !== null && qs[i].answers[v] && qs[i].answers[v].correct) { n++; } }); return n; }
function progress() {
var done = picked.filter(function (v) { return v !== null; }).length;
fill.style.width = (total ? done / total * 100 : 0) + '%';
var at = Math.min(current + 1, total);
count.textContent = engine === 'trivia' ? at + ' of ' + total + ' · ' + rightCount() + ' right' : at + ' of ' + total;
}
function layout(q) {
if (q.answers.some(function (a) { return a.image; })) { return 'img'; }
if (q.answers.length === 2) { return 'two'; }
if (q.answers.length === 4 && q.answers.every(function (a) { return (a.text || '').length <= 24; })) { return 'two'; }
return 'list';
}
var lastLabel = engine === 'personality' ? 'See who you are' : 'See my result';
qs.forEach(function (q, i) {
// Keep the original answer position (j) for poll totals; shuffle the display order if asked.
q.answers.forEach(function (a, k) { if (a.j == null) { a.j = k; } });
if (data.settings && data.settings.shuffle && engine === 'trivia') { q.answers = shuffle(q.answers.slice()); }
var card = doc.createElement('section'); card.className = 'fkq-q'; card.hidden = i !== 0;
var h = '' + (engine === 'reveal' ? 'Riddle' : 'Question') + ' ' + (i + 1) + ' of ' + total + '' +
'Do you play any sports?
- Yes, I play sports regularly
- Sometimes, I play sports now and then
- No, I don't play sports
- I'm not sure / I do other activities
' + esc(q.text) + '
' + (q.image ? '' + img(q.image, '') + '
' : '');
if (engine === 'reveal') {
h += '' + esc(q.reveal) + '
';
} else {
h += '' + q.answers.map(function (a, k) {
if (engine === 'poll') { return ''; }
return '';
}).join('') + '
';
}
h += '';
card.innerHTML = h; stage.appendChild(card); cards.push(card);
card.querySelector('.fkq-back').addEventListener('click', function () { show(i - 1, false); });
card.querySelector('.fkq-next').addEventListener('click', function () { advance(i, false); });
if (engine === 'reveal') {
var rb = card.querySelector('.fkq-reveal'), ra = card.querySelector('.fkq-revealed');
rb.addEventListener('click', function () { ra.hidden = false; rb.hidden = true; picked[i] = 0; summary[i] = '' + esc(q.text) + ' ' + esc(q.reveal) + ''; answered(i); });
return;
}
Array.prototype.forEach.call(card.querySelectorAll('.fkq-a'), function (btn) {
btn.addEventListener('click', function () { choose(i, +btn.getAttribute('data-k')); });
});
});
function choose(i, k) {
if (picked[i] !== null) { return; }
var q = qs[i], card = cards[i], a = q.answers[k];
picked[i] = k;
if (!started) { started = true; track('quiz_start', { quiz_type: engine, quiz_preset: data.preset }, preview); }
var btns = Array.prototype.slice.call(card.querySelectorAll('.fkq-a')), fb = card.querySelector('.fkq-fb');
btns.forEach(function (b) { b.disabled = true; });
if (engine === 'trivia') {
var ci = -1; q.answers.forEach(function (x, n) { if (x.correct) { ci = n; } });
var ok = !!a.correct, rightTxt = ci >= 0 ? (q.answers[ci].text || 'the picture with the tick') : '';
btns.forEach(function (b, n) {
var mk = b.querySelector('.fkq-mk');
if (n === ci) { b.classList.add('is-right'); mk.textContent = '✓'; }
else if (n === k) { b.classList.add('is-wrong'); mk.textContent = '✗'; }
else { b.classList.add('is-dim'); }
});
var fact = facts && q.fact ? '
Did you know? ' + esc(q.fact) + '
' : '';
fb.innerHTML = '' + (ok ? pick(['Correct!', 'Yes! Well done!', 'Spot on!']) : 'Not quite!') + '' + (ok ? '' : ' The answer is ' + esc(rightTxt) + '.') + '
' + fact;
summary[i] = '' + (ok ? '✓ You got it right' : '✗ The answer was ' + esc(rightTxt) + '') + '' + (facts && q.fact ? 'Did you know? ' + esc(q.fact) + '' : '');
track('quiz_answer', { quiz_type: engine, question: i + 1, correct: ok }, preview);
} else if (engine === 'personality') {
btns.forEach(function (b, n) { if (n === k) { b.classList.add('is-picked'); b.querySelector('.fkq-mk').textContent = '✓'; } else { b.classList.add('is-dim'); } });
} else if (engine === 'poll') {
var votes = q.answers.map(function (x) { return x.votes || 0; });
votes[k] += 1;
paintPoll(i, k, votes);
var key = 'fkq-' + data.uid + '-' + i;
if (!preview && S.vote && !store(true, key)) {
store(false, key, '1');
try {
fetch(S.vote, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ post: data.post, uid: data.uid, q: i, a: a.j }), credentials: 'omit' })
.then(function (r) { return r.ok ? r.json() : null; })
.then(function (r) { if (r && r.votes) { paintPoll(i, k, q.answers.map(function (x) { return +r.votes[x.j] || 0; })); } })
.catch(function () { /* the local estimate stays on screen */ });
} catch (e) { /* old browser: no fetch */ }
}
}
answered(i);
}
function paintPoll(i, k, votes) {
var card = cards[i], q = qs[i], sum = votes.reduce(function (s, v) { return s + v; }, 0) || 1;
Array.prototype.forEach.call(card.querySelectorAll('.fkq-a'), function (b, n) {
var p = Math.round(votes[n] / sum * 100);
b.querySelector('.fkq-pct').textContent = p + '%';
if (n === k) { b.classList.add('is-picked'); }
var bar = b.querySelector('.fkq-barfill');
win.requestAnimationFrame(function () { bar.style.width = p + '%'; });
});
var mine = Math.round(votes[k] / sum * 100);
card.querySelector('.fkq-fb').innerHTML = 'You picked ' + esc(q.answers[k].text) + ', along with ' + mine + '% of Fun Kids fans.
';
summary[i] = 'You and ' + mine + '% of Fun Kids fans picked ' + esc(q.answers[k].text) + '';
}
function answered(i) {
progress();
var nb = cards[i].querySelector('.fkq-next');
if (engine === 'personality') { win.setTimeout(function () { advance(i, false); }, reduced ? 250 : 650); return; }
if (flow === 'carry') { win.setTimeout(function () { advance(i, true); }, reduced ? 700 : 1300); return; }
nb.hidden = false; nb.focus({ preventScroll: true });
}
function advance(i, carry) {
if (i + 1 < total) {
var n = i + 1, cr = cards[n].querySelector('.fkq-carry');
if (carry && summary[i] && picked[n] === null) { cr.innerHTML = 'Question ' + (i + 1) + '' + summary[i]; cr.hidden = false; }
show(n, true);
} else { result(carry ? summary[i] : ''); }
}
function show(n, forward) {
current = n; progress();
cards.forEach(function (c, k) { c.hidden = k !== n; });
res.hidden = true;
var c = cards[n];
if (picked[n] !== null) { c.querySelector('.fkq-next').hidden = false; }
c.classList.remove('fkq-in', 'fkq-in-back'); void c.offsetWidth; c.classList.add(forward ? 'fkq-in' : 'fkq-in-back');
c.querySelector('.fkq-text').focus({ preventScroll: true });
keepInView();
}
function keepInView() {
var top = root.getBoundingClientRect().top;
if (top < 0 || top > win.innerHeight * 0.6) { root.scrollIntoView({ behavior: reduced ? 'auto' : 'smooth', block: 'start' }); }
}
var res = doc.createElement('div'); res.className = 'fkq-res'; res.hidden = true; stage.appendChild(res);
function result(carryHTML) {
var eyebrow, big, msg, color = '', image = null, first = !res.getAttribute('data-done');
res.setAttribute('data-done', '1'); // "See my answers" and back must not count a second completion
if (engine === 'trivia') {
var right = rightCount(), pct = total ? Math.round(right / total * 100) : 0, band = S.bands[0];
S.bands.forEach(function (b) { if (pct >= b.min) { band = b; } });
eyebrow = 'Your score'; big = right + ' / ' + total; msg = band.text;
if (first) track('quiz_complete', { quiz_type: engine, quiz_preset: data.preset, score_percent: pct }, preview);
} else if (engine === 'personality') {
var tally = {}, best = data.outcomes[0];
data.outcomes.forEach(function (o) { tally[o.id] = 0; });
picked.forEach(function (v, i) { var oc = v !== null && qs[i].answers[v] && qs[i].answers[v].outcome; if (oc && oc in tally) { tally[oc]++; } });
data.outcomes.forEach(function (o) { if (tally[o.id] > tally[best.id]) { best = o; } });
eyebrow = 'You are…'; big = best.name; msg = best.desc; color = best.color; image = best.image;
if (first) track('quiz_complete', { quiz_type: engine, quiz_preset: data.preset, outcome: best.name }, preview);
} else if (engine === 'poll') {
eyebrow = 'Thanks for voting!'; big = 'All done'; msg = 'Your votes are counted along with everyone else’s. There are no right or wrong answers!';
if (first) track('quiz_complete', { quiz_type: engine, quiz_preset: data.preset }, preview);
} else {
eyebrow = 'That’s all of them!'; big = 'Well done'; msg = 'How many did you get before you peeked? Try them on your family!';
if (first) track('quiz_complete', { quiz_type: engine, quiz_preset: data.preset }, preview);
}
var more = (data.more || []).length ? '' + esc(S.moreHeading) + '
' + data.more.map(function (m) {
return '' + (m.thumb ? '%20+%20')
' : '?') + '' + esc(m.title) + '';
}).join('') + '
Question ' + total + '' + carryHTML + '
' : '') +
'' + (image ? img(image, 'fkq-result-img') : '') +
'
' + more;
cards.forEach(function (c) { c.hidden = true; });
res.hidden = false; fill.style.width = '100%';
count.textContent = engine === 'trivia' ? 'Finished · ' + rightCount() + ' right' : 'Finished';
res.classList.remove('fkq-in'); void res.offsetWidth; res.classList.add('fkq-in');
res.querySelector('.fkq-big').focus({ preventScroll: true });
res.querySelector('.fkq-again').addEventListener('click', function () { mount(host, JSON.parse(host.getAttribute('data-fkq') || 'null') || data, opts); });
var rv = res.querySelector('.fkq-review'); if (rv) { rv.addEventListener('click', function () { show(0, false); }); }
if (engine === 'trivia' && total && rightCount() === total) { confetti(res.querySelector('.fkq-result'), reduced, win); }
keepInView();
}
progress();
return root;
}
function confetti(host, reduced, win) {
if (reduced || !host) { return; }
var c = host.ownerDocument.createElement('canvas'); c.className = 'fkq-confetti'; host.appendChild(c);
var ctx = c.getContext('2d'); if (!ctx) { return; }
var W = c.width = host.clientWidth, H = c.height = host.clientHeight, cols = ['#ffd326', '#ffffff', '#84d336', '#de0000', '#ff9ad5'], ps = [];
for (var i = 0; i < 90; i++) { ps.push({ x: Math.random() * W, y: -10 - Math.random() * H * 0.5, vx: (Math.random() - 0.5) * 2, vy: 2 + Math.random() * 3, s: 4 + Math.random() * 5, c: cols[i % cols.length], r: Math.random() * 6 }); }
var t = 0;
(function f() {
ctx.clearRect(0, 0, W, H);
ps.forEach(function (p) { p.x += p.vx; p.y += p.vy; p.r += 0.1; ctx.save(); ctx.translate(p.x, p.y); ctx.rotate(p.r); ctx.fillStyle = p.c; ctx.fillRect(-p.s / 2, -p.s / 2, p.s, p.s * 0.6); ctx.restore(); });
if (++t < 160) { win.requestAnimationFrame(f); } else { c.remove(); }
})();
}
function boot() {
Array.prototype.forEach.call(document.querySelectorAll('.fkq-quiz[data-fkq]'), function (el) {
if (el.getAttribute('data-fkq-ready')) { return; }
try { mount(el, JSON.parse(el.getAttribute('data-fkq'))); el.setAttribute('data-fkq-ready', '1'); }
catch (e) { /* leave the plain list showing */ if (w.console) { w.console.error('Fun Kids Quiz:', e); } }
});
}
w.FKQuiz = { mount: mount };
// Printed inline right after the quiz (see FKQ_Render::inline_js), so start now: the quiz's HTML is already there,
// and waiting for DOMContentLoaded would mean waiting for every deferred script on the page. Any quiz further
// down the page is picked up when the page finishes.
boot();
if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', boot); }
})(window);
' + esc(eyebrow) + '
' + esc(big) + '
' + esc(msg) + '
' + '' + (engine === 'trivia' ? '' : '') + '
What sports do you do? Let us know in the comment below!
By the way, if you’re part of a club of any kind – it could be badminton, netball, football, or even a computer club – we want to know! Every week in The Club on Fun Kids, Bex gives a huge shout-out to a wicked club. If you get in touch, it could be yours!Click here to tell us about your club!And whilst you’re at it, did you know the Fun Kids website has loads more games and polls, quizzes to play and riddles to answer? Just head over to the quiz section and you can let us know what you think of top Musically stars, and try your hand at Add a comment