Quiz ICF — 60 domande (Sotto-com by @tbrock1980 - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
multipleConverte in lista a selezione multipla
<li>Inserisce voci all'interno di una lista
idIdentifica univocamente un elemento HTML
text/plainDefinisce un metodo di non codifica dei valori di un form
maxImposta il valore numerico o temporale massimo per un elemento input

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Dashboard v1(2)

informatica 13/10

Simulatore Circuito RLC AC

Il Mondo della Tecnologia

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Quiz ICF — 60 domande (Sotto-competenze → Core) (Set A)</title>
<style>
  :root{ --bg1:#0f2027; --bg2:#203a43; --bg3:#2c5364;
    --card:#0b1220; --card2:#111827; --text:#e5e7eb; --ok:#16a34a; --bad:#dc2626; --accent:#60a5fa; --accent2:#f59e0b;}
  *{box-sizing:border-box} html,body{height:100%}
  body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:var(--text);
    background: radial-gradient(1200px 600px at 10% -10%, rgba(96,165,250,.15), transparent),
                radial-gradient(1000px 500px at 110% 10%, rgba(245,158,11,.15), transparent),
                linear-gradient(135deg, var(--bg1), var(--bg2) 48%, var(--bg3));min-height:100%;}
  header{position:sticky;top:0;z-index:10;text-align:center;
    background: linear-gradient(180deg, rgba(11,18,32,.9), rgba(11,18,32,.45));backdrop-filter: blur(6px);
    border-bottom:1px solid rgba(255,255,255,.07);}
  .wrap{max-width:1100px;margin:0 auto;padding:18px 20px}
  .title{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
  .title h1{margin:0;font-size:clamp(22px,3.2vw,32px);letter-spacing:.4px}
  .meter{display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:8px;font-size:clamp(14px,2vw,16px)}
  .badge{background:linear-gradient(180deg, #111827, #0b1220);border:1px solid rgba(255,255,255,.08);padding:8px 12px;border-radius:10px; display:flex; gap:8px; align-items:center; box-shadow: 0 2px 10px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.04)}
  .badge b{font-weight:700}
  .progress{height:10px; flex:1; min-width:180px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.12)}
  .progress>span{display:block;height:100%;width:0%; background:linear-gradient(90deg, var(--accent), var(--accent2)); transition:width .35s ease}
  main{min-height:calc(100vh - 160px); display:flex; align-items:center; justify-content:center; padding:24px}
  .stage{width:min(900px, 96vw)}
  .card{width:100%; min-height:60vh;background:linear-gradient(180deg, var(--card), var(--card2));
    border:1px solid rgba(255,255,255,.1);border-radius:20px; padding:28px;display:flex; flex-direction:column; gap:18px; justify-content:space-between;
    box-shadow: 0 20px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);}
  .q-head{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
  .q-index{font-size:14px; color:#cbd5e1; letter-spacing:.4px}
  .question{font-size:clamp(18px,2.2vw,24px);line-height:1.35}
  .opts{display:flex; flex-direction:column; gap:12px; margin-top:6px}
  .btn{text-align:left; border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03); color:var(--text);
    padding:14px 14px; border-radius:12px; cursor:pointer; font-size:clamp(15px,1.8vw,17px);
    transition: transform .05s ease, background .2s ease, border .2s ease, color .2s ease;}
  .btn:hover{transform:translateY(-1px); background:rgba(255,255,255,.06)}
  .btn.correct{font-weight:800; color:#d1fae5; border-color:rgba(22,163,74,.5); background:rgba(22,163,74,.18)}
  .btn.wrong{font-weight:800; color:#fee2e2; border-color:rgba(220,38,38,.55); background:rgba(220,38,38,.18)}
  .btn.disabled{pointer-events:none; opacity:.95}
  .helper{font-size:14px;color:#cbd5e1; margin-left:8px; font-weight:700; align-items:center; gap:6px;}
  .helper .pill{padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);}
  .nav{display:flex; justify-content:flex-end; gap:12px; margin-top:16px;}
  .action{border:0; padding:12px 18px; border-radius:12px;background:linear-gradient(90deg, var(--accent), var(--accent2));
    color:#111827; font-weight:900; cursor:pointer; box-shadow:0 8px 20px rgba(0,0,0,.35);}
  .action[disabled]{opacity:.5; cursor:not-allowed; box-shadow:none}
  footer{position:sticky; bottom:0; z-index:10;background: linear-gradient(0deg, rgba(11,18,32,.9), rgba(11,18,32,.45));backdrop-filter: blur(6px);
    border-top:1px solid rgba(255,255,255,.07);}
  .footbar{display:flex;align-items:center;justify-content:space-between;gap:16px}
  .footbar .left{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
  .pill{font-weight:700; letter-spacing:.3px; background:linear-gradient(180deg, #1f2937, #101827); padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.08)}

  .modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center;
    background: radial-gradient(1000px 500px at 50% -10%, rgba(96,165,250,.2), transparent),
                radial-gradient(800px 400px at 50% 110%, rgba(245,158,11,.2), transparent),
                rgba(0,0,0,.7);}
  .modal.show{display:flex;}
  .modal .panel{max-width:800px; width:92%; text-align:center; padding:34px 24px; border-radius:24px;
    background:linear-gradient(180deg, var(--card), var(--card2));
    border:1px solid rgba(255,255,255,.12);
    box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);}
  .modal .big{font-size:clamp(28px,5vw,48px);font-weight:900;letter-spacing:.5px;margin:0 0 10px}
  .modal .icon{font-size:clamp(60px,10vw,120px); line-height:1; margin: 10px 0 18px}
  .modal .score{font-size:18px; color:#cbd5e1; margin-bottom:18px}
</style>
</head>
<body>
  <header>
    <div class="wrap">
      <div class="title">
        <h1>Quiz Autovalutazione — Competenze core ICF (60 domande)</h1>
      </div>
      <div class="meter">
        <div class="badge">✅ Corrette: <b id="good">0</b></div>
        <div class="badge">❌ Errate: <b id="bad">0</b></div>
        <div class="badge">? Percentuale: <b id="pct">0%</b></div>
        <div class="progress" aria-label="Avanzamento"><span id="prog"></span></div>
      </div>
    </div>
  </header>

  <main>
    <div class="stage">
      <article class="card">
        <div>
          <div class="q-head">
            <div class="q-index" id="qIndex">Domanda 1 di 60</div>
            <div class="pill" id="answered">0 / 60 risposte</div>
          </div>
          <div class="question" id="questionText">...</div>
          <div class="opts" id="options"></div>
        </div>
        <div class="nav">
          <button class="action" id="nextBtn" disabled>AVANTI</button>
        </div>
      </article>
    </div>
  </main>

  <footer>
    <div class="wrap footbar">
      <div class="left">
        <span class="pill">Obiettivo superamento: <b>≥ 80%</b></span>
      </div>
      <button class="action" id="finishBtn" title="Mostra il risultato finale">Termina test</button>
    </div>
  </footer>

  <section class="modal" id="resultModal" role="dialog" aria-modal="true" aria-labelledby="resultTitle">
    <div class="panel">
      <h2 id="resultTitle" class="big"></h2>
      <div id="resultIcon" class="icon">?</div>
      <div id="resultScore" class="score"></div>
      <button class="action" onclick="location.reload()">Ricomincia</button>
    </div>
  </section>

<script>
function LCG(seed){ let s = seed>>>0; return function(){ s = (1664525*s + 1013904223)>>>0; return s/0x100000000; }; }
// Seed casuale ad ogni caricamento (usa crypto se disponibile, altrimenti Date.now())
const seed = (typeof crypto !== 'undefined' && crypto.getRandomValues)
  ? crypto.getRandomValues(new Uint32Array(1))[0]
  : (Date.now() >>> 0);
const rnd = LCG(seed);

const CORE=[
  "Dimostra la pratica etica",
  "Incarna il Coaching mindset",
  "Stabilisce e mantiene gli accordi",
  "Coltiva fiducia e sicurezza",
  "Mantiene la presenza",
  "Ascolta attivamente",
  "Evoca consapevolezza",
  "Facilita la crescita del cliente"
];

const SUB=[
  ["Dimostra integrità personale ed onestà nelle interazioni con clienti, sponsor e parti interessate","Dimostra la pratica etica"],
  ["È sensibile all'identità, all'ambiente, alle esperienze, ai valori e alle credenze dei clienti","Dimostra la pratica etica"],
  ["Utilizza un linguaggio appropriato e rispettoso di clienti, sponsor e parti interessate","Dimostra la pratica etica"],
  ["Rispetta il Codice Etico ICF e sostiene i valori fondamentali ICF","Dimostra la pratica etica"],
  ["Mantiene la riservatezza delle informazioni dei clienti in coerenza con gli accordi con le parti interessate e le leggi pertinenti","Dimostra la pratica etica"],
  ["Mantiene le distinzioni tra coaching, consulenza, psicoterapia e altre professioni di supporto","Dimostra la pratica etica"],
  ["Rinvia i clienti ad altri professionisti del supporto, ove opportuno","Dimostra la pratica etica"],

  ["Riconosce che i clienti sono responsabili delle proprie scelte","Incarna il Coaching mindset"],
  ["Si impegna nell'apprendimento e nello sviluppo continuo come coach","Incarna il Coaching mindset"],
  ["Sviluppa una pratica riflessiva continua per migliorare la propria capacità di essere coach","Incarna il Coaching mindset"],
  ["Resta consapevole e aperto all'influenza del contesto e della cultura su se stesso e sugli altri","Incarna il Coaching mindset"],
  ["Utilizza la consapevolezza di sé e la propria intuizione a beneficio dei clienti","Incarna il Coaching mindset"],
  ["Sviluppa e mantiene la capacità di gestire le proprie emozioni","Incarna il Coaching mindset"],
  ["Si prepara mentalmente ed emotivamente per le sessioni","Incarna il Coaching mindset"],
  ["Cerca aiuto da fonti esterne quando necessario","Incarna il Coaching mindset"],

  ["Spiega cos'è il coaching e cosa non è e descrive il processo al cliente e alle parti interessate","Stabilisce e mantiene gli accordi"],
  ["Raggiunge un accordo su ciò che è e non è appropriato nella relazione e sulle responsabilità di cliente e parti interessate","Stabilisce e mantiene gli accordi"],
  ["Raggiunge un accordo su linee guida e parametri della relazione (logistica, commissioni, programmazione, durata, riservatezza, inclusione di altri)","Stabilisce e mantiene gli accordi"],
  ["Collabora con cliente e parti interessate per stabilire un piano generale e obiettivi di coaching","Stabilisce e mantiene gli accordi"],
  ["Collabora con il cliente per determinare la compatibilità fra cliente e coach","Stabilisce e mantiene gli accordi"],
  ["Collabora con il cliente per identificare o riconfermare ciò che si vuole realizzare nella sessione","Stabilisce e mantiene gli accordi"],
  ["Collabora con il cliente per definire ciò che ritiene necessario considerare o risolvere per raggiungere ciò che desidera nella sessione","Stabilisce e mantiene gli accordi"],
  ["Collabora con il cliente per definire o riconfermare le modalità di misurazione dei risultati","Stabilisce e mantiene gli accordi"],
  ["Collabora con il cliente per gestire tempo e focus della sessione","Stabilisce e mantiene gli accordi"],
  ["Porta avanti il coaching nella direzione del risultato desiderato dal cliente, salvo diversa indicazione","Stabilisce e mantiene gli accordi"],
  ["Collabora con il cliente per terminare la relazione di coaching celebrando l'esperienza","Stabilisce e mantiene gli accordi"],

  ["Cerca di capire il cliente nel suo contesto (identità, ambiente, esperienze, valori, credenze)","Coltiva fiducia e sicurezza"],
  ["Dimostra rispetto per identità, percezioni, stile e linguaggio del cliente e adatta il coaching","Coltiva fiducia e sicurezza"],
  ["Riconosce e rispetta l'unicità dei talenti, intuizioni e lavoro del cliente nel processo di coaching","Coltiva fiducia e sicurezza"],
  ["Mostra supporto, empatia e interesse per il cliente","Coltiva fiducia e sicurezza"],
  ["Riconosce e supporta l'espressione di sentimenti, percezioni, preoccupazioni, convinzioni e impressioni del cliente","Coltiva fiducia e sicurezza"],
  ["Dimostra apertura e trasparenza come modo per mostrare vulnerabilità e creare fiducia","Coltiva fiducia e sicurezza"],

  ["Rimane focalizzato, in osservazione, empatico e in grado di adattarsi al cliente","Mantiene la presenza"],
  ["Dimostra curiosità durante il processo di coaching","Mantiene la presenza"],
  ["Gestisce le proprie emozioni per rimanere presente con il cliente","Mantiene la presenza"],
  ["Dimostra sicurezza nel lavorare con forti emozioni del cliente durante il processo di coaching","Mantiene la presenza"],
  ["È a suo agio nel lavorare nello spazio del “non sapere”","Mantiene la presenza"],
  ["Crea o lascia spazio per silenzio, pause o riflessione","Mantiene la presenza"],

  ["Considera contesto, identità, ambiente, esperienze, valori e convinzioni del cliente per comprendere meglio ciò che comunica","Ascolta attivamente"],
  ["Rispecchia o sintetizza ciò che il cliente ha comunicato per garantire chiarezza e comprensione","Ascolta attivamente"],
  ["Riconosce ed esplora quando c'è di più oltre ciò che il cliente sta comunicando","Ascolta attivamente"],
  ["Osserva, riconosce ed esplora emozioni, cambiamenti di energia, segnali non verbali e altri comportamenti","Ascolta attivamente"],
  ["Integra parole, tono della voce e linguaggio del cliente per cogliere il pieno significato","Ascolta attivamente"],
  ["Nota le dinamiche di comportamenti ed emozioni del cliente nel tempo per riconoscere temi e pattern","Ascolta attivamente"],

  ["Considera l'esperienza del cliente quando decide cosa potrebbe essergli più utile","Evoca consapevolezza"],
  ["Sfida il cliente come modo per evocare consapevolezza o intuizione","Evoca consapevolezza"],
  ["Pone domande sul cliente (modo di pensare, valori, bisogni, desideri, credenze)","Evoca consapevolezza"],
  ["Fa domande che aiutano il cliente a esplorare oltre il suo pensiero attuale","Evoca consapevolezza"],
  ["Invita il cliente a condividere di più sulla propria esperienza nel qui e ora","Evoca consapevolezza"],
  ["Nota cosa sta funzionando per incrementare i progressi del cliente","Evoca consapevolezza"],
  ["Adatta l'approccio di coaching in risposta alle esigenze del cliente","Evoca consapevolezza"],
  ["Aiuta il cliente a identificare i fattori che influenzano i modelli attuali e futuri di comportamento, pensiero o emozioni","Evoca consapevolezza"],
  ["Invita il cliente a generare idee su come può progredire e su ciò che è intenzionato o in grado di fare","Evoca consapevolezza"],
  ["Supporta il cliente a ricontestualizzare le prospettive","Evoca consapevolezza"],
  ["Condivide, senza attaccamento, osservazioni, intuizioni e sensazioni con potenziale di nuovo apprendimento","Evoca consapevolezza"],

  ["Lavora con il cliente per integrare nuove consapevolezze, intuizioni o apprendimenti nella sua visione del mondo e nei comportamenti","Facilita la crescita del cliente"],
  ["Collabora con il cliente per progettare obiettivi, azioni e indicatori di responsabilità che integrano nuovi apprendimenti","Facilita la crescita del cliente"],
  ["Riconosce e supporta l'autonomia del cliente nella progettazione di obiettivi, azioni e metodi di responsabilità","Facilita la crescita del cliente"],
  ["Supporta il cliente nell'identificare risultati o apprendimento potenziali derivanti dalle azioni identificate","Facilita la crescita del cliente"],
  ["Invita il cliente a considerare come progredire, includendo risorse, supporti e potenziali barriere","Facilita la crescita del cliente"],
  ["Collabora con il cliente per sintetizzare l'apprendimento e le intuizioni durante o tra le sessioni","Facilita la crescita del cliente"],
  ["Celebra i progressi e i successi del cliente","Facilita la crescita del cliente"],
  ["Collabora con il cliente per chiudere la sessione","Facilita la crescita del cliente"]
];

function shuffleDet(arr){ return arr.map(v=>[rnd(),v]).sort((a,b)=>a[0]-b[0]).map(x=>x[1]); }

// Domande: mostra la sotto-competenze e 8 opzioni (le 8 core)
const allPairs = shuffleDet(SUB.slice());
const base60 = allPairs.slice(0,60);
const QUESTIONS = base60.map(([sub, core]) => {
  const opts = shuffleDet(CORE.slice());
  const correctIndex = opts.indexOf(core);
  return { core, sub, options: opts, correct: correctIndex };
});

let idx=0, correct=0, wrong=0, answered=0, locked=false;

const qIndex=document.getElementById("qIndex");
const qText=document.getElementById("questionText");
const optsBox=document.getElementById("options");
const nextBtn=document.getElementById("nextBtn");
const goodEl=document.getElementById("good");
const badEl=document.getElementById("bad");
const pctEl=document.getElementById("pct");
const progEl=document.getElementById("prog");
const ansEl=document.getElementById("answered");
const finishBtn=document.getElementById("finishBtn");

function updateHUD(){
  const pct=answered?Math.round((correct/answered)*100):0;
  goodEl.textContent=correct; badEl.textContent=wrong; pctEl.textContent=pct+"%";
  ansEl.textContent=answered+" / "+QUESTIONS.length+" risposte";
  progEl.style.width=Math.round((answered/QUESTIONS.length)*100)+"%";
}

function renderQuestion(){
  locked=false; nextBtn.disabled=true; optsBox.innerHTML="";
  const q=QUESTIONS[idx];
  qIndex.textContent=`Domanda ${idx+1} di ${QUESTIONS.length}`;
  qText.innerHTML=`A quale competenza core appartiene la seguente sotto-competenze?<br><b>“${q.sub}”</b>`;
  q.options.forEach((opt,i)=>{
    const b=document.createElement("button");
    b.className="btn"; b.type="button"; b.dataset.i=i; b.dataset.opt=opt;
    b.innerHTML = `<span class="opt-text">${opt}</span><span class="helper" style="display:none"><span class="pill"></span></span>`;
    b.addEventListener("click",()=>{
      if(locked) return; locked=true;
      const all=optsBox.querySelectorAll(".btn"); all.forEach(x=>x.classList.add("disabled"));
      if(i===q.correct){
        b.classList.add("correct");
        correct++;
      } else {
        b.classList.add("wrong");
        wrong++;
        all.forEach(x=>{ if(Number(x.dataset.i)===q.correct) x.classList.add("correct"); });
        const helper = b.querySelector(".helper");
        const pill = b.querySelector(".helper .pill");
        if (helper && pill){
          pill.textContent = "→ Corretto: " + q.core;
          helper.style.display = "inline-flex";
        }
      }
      answered++; updateHUD(); nextBtn.disabled=false;
      if(idx===QUESTIONS.length-1) nextBtn.textContent="VEDI RISULTATO";
    });
    optsBox.appendChild(b);
  });
}

nextBtn.addEventListener("click", ()=>{
  if(idx < QUESTIONS.length-1){ idx++; nextBtn.textContent="AVANTI"; renderQuestion(); }
  else finish();
});

finishBtn.addEventListener("click", finish);

function finish(){
  const total=QUESTIONS.length; const pct=Math.round((correct/total)*100);
  const modal=document.getElementById("resultModal");
  const title=document.getElementById("resultTitle");
  const icon=document.getElementById("resultIcon");
  const score=document.getElementById("resultScore");
  if(pct >= 80){
    title.textContent = `COMPLIMENTI HAI SUPERATO IL TEST CON IL PUNTEGGIO ${pct}%`;
    icon.textContent = "?";
  }else{
    title.textContent = `RITENTA SARAI PIÙ FORTUNATO, IL TUO PUNTEGGIO È ${pct}%`;
    icon.textContent = "?";
  }
  score.textContent = `Corrette: ${correct} • Errate: ${wrong} • Totale: ${total}`;
  modal.classList.add("show");
}

updateHUD();
renderQuestion();
</script>
</body>
</html>