Every week, we’re asking you one simple question that we’re dying to know the answer to! We’ve already asked whether or not you get pocket money, and whether you play sports or not. This week, we want to know if you think you can sing!
';
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 think you can sing?
- Yes, I can sing!
- No, I can't sing!
- I'm not sure…
- Only in the shower!
' + 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' ? '' : '') + '
Remember to tell us more in the comments below!
Perhaps you love belting out a bit of Ariana in your bedroom, or singing along to Justin in the bathroom? Whatever it is, we want to know more about what you love to sing to. By the way, if you liked that there are loads more quizzes on the Fun Kids website… You can tell us what you think of movies, test your terrific Tudor knowledge, let us know how you rate famous authors and loads more! There’s even music quizzes where you could be paired with a New Hope Club boy or become a Little Mix girl!Click here to play more quizzes!