Widget:QuizSearch

De Wiki Gla
Revisão de 17h36min de 3 de abril de 2026 por Guto (discussão | contribs) (Criou página com '<style> →‎{literal}: #fq-widget * { box-sizing: border-box; margin: 0; padding: 0; } #fq-widget { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, san...')
(dif) ← Edição anterior | Revisão atual (dif) | Versão posterior → (dif)
Ir para navegação Ir para pesquisar

<style> /* {literal} */

  1. fq-widget * { box-sizing: border-box; margin: 0; padding: 0; }
  1. fq-widget {
 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 background: #ffffff;
 color: #202122;
 max-width: 780px;
 margin: 1rem 0;
 font-size: 0.9375rem;
 line-height: 1.6;

}

.fq-header { margin-bottom: 1.25rem; } .fq-title { font-size: 1.25rem; font-weight: 600; color: #202122; margin-bottom: 0.2rem; } .fq-sub { font-size: 0.875rem; color: #54595d; }

.fq-weekly {

 display: flex; align-items: center; gap: 0.5rem;
 margin-bottom: 1.25rem; cursor: pointer; user-select: none; width: fit-content;

} .fq-checkbox {

 display: flex; align-items: center; justify-content: center;
 width: 1.125rem; height: 1.125rem; border-radius: 3px;
 border: 1px solid #a2a9b1; flex-shrink: 0;
 background: #f8f9fa; transition: all 0.15s;

} .fq-checkbox.on { background: #36c; border-color: #36c; } .fq-checkbox svg { display: none; } .fq-checkbox.on svg { display: block; } .fq-weekly-label { font-size: 0.875rem; color: #54595d; transition: color 0.15s; } .fq-weekly-label.on { color: #36c; font-weight: 500; } .fq-weekly:hover .fq-checkbox:not(.on) { border-color: #36c; } .fq-weekly:hover .fq-weekly-label:not(.on) { color: #36c; }

.fq-search-wrap { position: relative; margin-bottom: 0.75rem; } .fq-search-icon {

 position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
 color: #72777d; pointer-events: none; line-height: 0;

}

  1. fq-input {
 width: 100%; background: #fff; border: 1px solid #a2a9b1;
 border-radius: 2px; padding: 0.45rem 2.5rem;
 font-size: 0.9375rem; color: #202122; outline: none;
 transition: border-color 0.15s, box-shadow 0.15s;

}

  1. fq-input::placeholder { color: #72777d; }
  2. fq-input:focus { border-color: #36c; box-shadow: 0 0 0 2px rgba(51,102,204,0.15); }
  3. fq-clear {
 position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);
 background: none; border: none; color: #72777d; cursor: pointer;
 line-height: 0; padding: 0; transition: color 0.15s;

}

  1. fq-clear:hover { color: #202122; }
  2. fq-clear.hidden { display: none; }
  1. fq-stats { font-size: 0.8125rem; color: #54595d; margin-bottom: 0.75rem; }
  2. fq-stats .vd { color: #14866d; font-weight: 500; }
  3. fq-stats .fa { color: #c0392b; font-weight: 500; }
  4. fq-stats .sep { color: #a2a9b1; margin: 0 0.3rem; }
  5. fq-stats.hidden { display: none; }

.fq-msg { font-size: 0.875rem; color: #72777d; text-align: center; padding: 3rem 0; } .fq-msg.hidden { display: none; }

  1. fq-results { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
  2. fq-results.hidden { display: none; }

.fq-item {

 display: flex; align-items: flex-start; gap: 0.625rem;
 border: 1px solid; border-radius: 2px;
 padding: 0.625rem 0.875rem; font-size: 0.9rem; line-height: 1.55;

} .fq-item.vd { background: #f0fdf4; border-color: #14866d; color: #14433a; } .fq-item.fa { background: #fff0f0; border-color: #c0392b; color: #5a1010; }

.fq-badge {

 flex-shrink: 0; margin-top: 0.1rem;
 width: 1.125rem; height: 1.125rem; border-radius: 50%;
 display: flex; align-items: center; justify-content: center;
 font-weight: 700; font-size: 0.7rem; color: #fff;

} .fq-badge.vd { background: #14866d; } .fq-badge.fa { background: #c0392b; }

mark { background: #fef08a; color: #713f12; border-radius: 1px; padding: 0 1px; } /* {/literal} */ </style>

Foxy Quiz

Pesquise uma afirmacao para ver se ela e verdadeira ou falsa.

   
     <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"
          fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
       <polyline points="20 6 9 17 4 12"/>
     </svg>
   
   Ja recebi a recompensa do Foxy Quiz nesta semana!
   
     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"
          viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
       <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
     </svg>
   
   <input id="fq-input" type="text" placeholder="Digite palavras-chave para pesquisar..." />
   <button id="fq-clear" class="hidden" aria-label="Limpar">
     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"
          viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
       <path d="M18 6 6 18M6 6l12 12"/>
     </svg>
   </button>
Digite ao menos 2 caracteres para pesquisar.

<script> /* {literal} */

var QUIZ_DATA = [

 /* VERDADEIRO */
 { correto: true, texto: "[GLA] A habilidade Liberation, do Marshall D. Teach, tem dois segundos de tempo de recarga e 18 de poder." },
 { correto: true, texto: "[GLA] A habilidade Preparation aumenta a velocidade do Luffy por 4 segundos e concede bonus de forca no proximo ataque." },
 { correto: true, texto: "[GLA] Baratie e recomendado para jogadores do level 42 a 52 no minimapa do jogo." },
 { correto: true, texto: "[GLA] A habilidade Usopp Fear concede velocidade e defesa para ele." },
 { correto: true, texto: "[GLA] A rotacao semanal muda toda sexta-feira." },
 { correto: true, texto: "[GLA] Baratie e o primeiro local em que voce pode construir um navio nivel 3." },
 { correto: true, texto: "[GLA] Bartholomew Kuma le sua biblia durante a animacao do seu emote." },
 /* FALSO */
 /* { correto: false, texto: "Exemplo de afirmacao falsa." } */

];

var FQ_KEY = 'foxy-quiz-weekly';

function norm(s) {

 return s.normalize('NFD').replace(/[\u0300-\u036f]/g, ).toLowerCase();

}

function weekKey() {

 var now  = new Date();
 var diff = (now.getDay() - 5 + 7) % 7;
 var fri  = new Date(now);
 fri.setDate(now.getDate() - diff);
 return fri.toISOString().slice(0, 10);

}

function esc(s) {

 return s.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');

}

function highlight(texto, tokens) {

 var n = norm(texto);
 var ranges = [], i, t, idx, pos;
 for (i = 0; i < tokens.length; i++) {
   t = tokens[i]; idx = 0;
   while ((pos = n.indexOf(t, idx)) !== -1) {
     ranges.push([pos, pos + t.length]);
     idx = pos + 1;
   }
 }
 if (!ranges.length) return esc(texto);
 ranges.sort(function(a, b) { return a[0] - b[0]; });
 var merged = [], r, last;
 for (i = 0; i < ranges.length; i++) {
   r = ranges[i]; last = merged[merged.length - 1];
   if (last && r[0] <= last[1]) { if (r[1] > last[1]) last[1] = r[1]; }
   else { merged.push([r[0], r[1]]); }
 }
 var out = , cur = 0, seg;
 for (i = 0; i < merged.length; i++) {
   seg = merged[i];
   out += esc(texto.slice(cur, seg[0]));
   out += '' + esc(texto.slice(seg[0], seg[1])) + '';
   cur  = seg[1];
 }
 return out + esc(texto.slice(cur));

}

var elWeekly = document.getElementById('fq-weekly'); var elChk = document.getElementById('fq-chk'); var elLbl = document.getElementById('fq-lbl'); var elInput = document.getElementById('fq-input'); var elClear = document.getElementById('fq-clear'); var elStats = document.getElementById('fq-stats'); var elTip = document.getElementById('fq-tip'); var elNores = document.getElementById('fq-nores'); var elResults = document.getElementById('fq-results');

var IDX = []; for (var ii = 0; ii < QUIZ_DATA.length; ii++) {

 IDX.push({ e: QUIZ_DATA[ii], n: norm(QUIZ_DATA[ii].texto) });

}

elWeekly.addEventListener('click', function() {

 var on = elChk.classList.contains('on');
 if (on) {
   elChk.classList.remove('on');
   elLbl.classList.remove('on');
   elLbl.textContent = 'Ja recebi a recompensa do Foxy Quiz nesta semana!';
   try { localStorage.removeItem(FQ_KEY); } catch(e) {}
 } else {
   var d = new Date();
   var ds = d.toLocaleDateString('pt-BR') + ' (' + d.toLocaleDateString('pt-BR', { weekday: 'long' }) + ')';
   elChk.classList.add('on');
   elLbl.classList.add('on');
   elLbl.textContent = 'Foxy Quiz concluido em ' + ds;
   try { localStorage.setItem(FQ_KEY, JSON.stringify({ weekKey: weekKey(), date: ds })); } catch(e) {}
 }

});

elClear.addEventListener('click', function() {

 elInput.value = ;
 elInput.dispatchEvent(new Event('input'));
 elInput.focus();

});

elInput.addEventListener('input', function() {

 var raw = elInput.value;
 var trimmed = raw.trim();
 if (raw.length > 0) {
   elClear.classList.remove('hidden');
 } else {
   elClear.classList.add('hidden');
 }
 if (trimmed.length < 2) {
   elStats.classList.add('hidden');
   elTip.classList.remove('hidden');
   elNores.classList.add('hidden');
   elResults.classList.add('hidden');
   elResults.innerHTML = ;
   return;
 }
 var parts = trimmed.split(/\s+/);
 var tokens = [];
 for (var i = 0; i < parts.length; i++) {
   if (parts[i]) tokens.push(norm(parts[i]));
 }
 var hits = [], item, j, ok;
 for (var k = 0; k < IDX.length; k++) {
   item = IDX[k]; ok = true;
   for (j = 0; j < tokens.length; j++) {
     if (item.n.indexOf(tokens[j]) === -1) { ok = false; break; }
   }
   if (ok) hits.push(item.e);
 }
 elTip.classList.add('hidden');
 if (hits.length === 0) {
   elStats.classList.add('hidden');
   elResults.classList.add('hidden');
   elResults.innerHTML = ;
   elNores.classList.remove('hidden');
   return;
 }
 var tc = 0, fc = 0;
 for (var x = 0; x < hits.length; x++) {
   if (hits[x].correto) tc++; else fc++;
 }
 elStats.innerHTML =
   hits.length + ' resultado(s)' +
   ' · ' +
   '' + tc + ' verdadeiro(s)' +
   ' · ' +
   '' + fc + ' falso(s)';
 elStats.classList.remove('hidden');
 var html = , h, cls, sym;
 for (var y = 0; y < hits.length; y++) {
   h   = hits[y];
   cls = h.correto ? 'vd' : 'fa';
   sym = h.correto ? '✓' : '✗';

html += '

  • ' + '' + sym + '' + '' + highlight(h.texto, tokens) + '' + '
  • '; } elResults.innerHTML = html; elResults.classList.remove('hidden'); elNores.classList.add('hidden'); }); (function() { try { var raw = localStorage.getItem(FQ_KEY); if (!raw) return; var obj = JSON.parse(raw); if (obj.weekKey !== weekKey()) return; elChk.classList.add('on'); elLbl.classList.add('on'); elLbl.textContent = 'Foxy Quiz concluido em ' + obj.date; } catch(e) {} })(); /* {/literal} */ </script>