Bible Quiz

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style>
*{box-sizing:border-box;margin:0;padding:0;font-family:sans-serif}
body{background:#f0f2f5;padding:20px}
.hero{background:#1a3a6b;border-radius:14px;padding:30px 24px;text-align:center;margin-bottom:20px;border-bottom:4px solid #c9a84c}
.hero h1{color:#fff;font-size:22px;font-family:Georgia,serif;margin:0 0 6px;font-weight:700}
.hero p{color:#c8d4e0;font-size:13px;margin:0}
.verse-strip{background:#c9a84c;border-radius:10px;padding:12px 20px;text-align:center;margin-bottom:20px}
.verse-strip p{color:#fff;font-size:13px;font-style:italic;font-family:Georgia,serif;margin:0}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
.stat{background:#fff;border-radius:10px;padding:12px;text-align:center;border:1px solid #c8d4e0}
.stat-n{font-size:22px;font-weight:800;font-family:sans-serif}
.stat-l{font-size:9px;text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
.card{background:#fff;border-radius:14px;overflow:hidden;border:1px solid #c8d4e0;box-shadow:0 2px 12px rgba(26,58,107,0.08);margin-bottom:16px}
.card-hdr{background:#1a3a6b;padding:14px 20px;display:flex;align-items:center;justify-content:space-between}
.card-hdr-title{color:#fff;font-size:14px;font-family:Georgia,serif;font-weight:700}
.card-hdr-count{color:#c9a84c;font-size:12px;font-weight:700}
.pbw{background:#e8eef5;height:6px}
.pb{background:#c9a84c;height:6px;width:0%;transition:width 0.4s}
.card-body{padding:20px}
.cnt{color:#1e4d8c;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin:0 0 10px}
.qb{background:#f0f2f5;border-left:4px solid #c9a84c;border-radius:0 10px 10px 0;padding:14px 16px;margin-bottom:14px}
.qt{color:#1a3a6b;font-size:16px;font-weight:700;font-family:Georgia,serif;line-height:1.5;margin:0}
.opts{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.ob{width:100%;text-align:left;background:#f0f2f5;color:#1a3a6b;border:1.5px solid #c8d4e0;padding:12px 14px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;font-family:sans-serif;display:flex;align-items:center;gap:10px;transition:all .2s}
.ob:hover{background:#e8eef5;border-color:#1a3a6b}
.ol{display:inline-flex;min-width:28px;height:28px;border-radius:50%;background:#e8eef5;color:#1a3a6b;font-size:12px;font-weight:700;align-items:center;justify-content:center;flex-shrink:0}
.fb{display:none;border-radius:10px;padding:11px 14px;margin-bottom:12px;font-size:13px;font-weight:700;text-align:center}
.nb{display:none;width:100%;background:#c9a84c;color:#fff;border:none;padding:13px;border-radius:25px;font-size:14px;font-weight:700;cursor:pointer}
.nb:hover{background:#b8963c}
.score-strip{background:#f0f2f5;border-top:1px solid #c8d4e0;padding:12px 20px;display:flex;justify-content:center;gap:32px}
.ss-item{text-align:center}
.ss-n{font-size:20px;font-weight:800;font-family:sans-serif}
.ss-l{font-size:10px;text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
.res{display:none;padding:30px 20px;text-align:center}
.re{font-size:52px;margin-bottom:12px}
.rt{color:#1a3a6b;font-size:22px;font-family:Georgia,serif;margin:0 0 6px;font-weight:700}
.rdiv{width:50px;height:3px;background:#c9a84c;margin:0 auto 16px}
.rb{background:#f0f2f5;border-radius:12px;padding:20px;margin-bottom:16px;border:1px solid #c8d4e0}
.fs{font-size:42px;font-weight:800;color:#c9a84c;font-family:sans-serif;margin-bottom:4px}
.fm{color:#1e4d8c;font-size:14px;margin:0 0 16px}
.sg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cb{background:#dcfce7;border-radius:10px;padding:14px}
.wb{background:#fee2e2;border-radius:10px;padding:14px}
.cn{font-size:26px;font-weight:800;color:#16a34a;font-family:sans-serif}
.wn{font-size:26px;font-weight:800;color:#dc2626;font-family:sans-serif}
.cl{font-size:11px;color:#166534;margin-top:3px}
.wl{font-size:11px;color:#991b1b;margin-top:3px}
.res-btns{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.btn-pa{background:#1a3a6b;color:#fff;border:none;padding:14px;border-radius:25px;font-size:14px;font-weight:700;cursor:pointer;width:100%}
.btn-pa:hover{background:#0f2347}
.cat-section{margin-bottom:24px}
.cat-title{color:#1a3a6b;font-size:16px;font-family:Georgia,serif;font-weight:700;margin:0 0 12px;padding-bottom:8px;border-bottom:2px solid #c9a84c;display:flex;align-items:center;gap:8px}
.cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.cat-btn{background:#fff;border:1.5px solid #c8d4e0;border-radius:10px;padding:14px 12px;cursor:pointer;font-family:sans-serif;text-align:left;transition:all .2s}
.cat-btn:hover{border-color:#1a3a6b;background:#f0f2f5}
.cat-btn-title{color:#1a3a6b;font-size:13px;font-weight:700;margin-bottom:4px}
.cat-btn-sub{color:#6b7280;font-size:11px}
.cat-btn-count{color:#c9a84c;font-size:10px;font-weight:700;margin-top:6px}
.home-btn{width:100%;background:#f0f2f5;color:#1a3a6b;border:1.5px solid #c8d4e0;padding:12px;border-radius:25px;font-size:13px;font-weight:700;cursor:pointer;margin-top:10px}
.closing{background:#1a3a6b;border-radius:14px;padding:24px;text-align:center;margin-top:16px}
.closing p{color:#c8d4e0;font-size:13px;font-style:italic;font-family:Georgia,serif;margin:0 0 6px;line-height:1.7}
.closing span{color:#c9a84c;font-size:12px;font-weight:700}
</style>
<script type="text/javascript">var dnt_config={ifdnt:"1",mode:"blacklist",black:["media6degrees.com","quantserve.com","lockerz.com"],white:[]};</script><script type="text/javascript">function aop_around(a,b){aop.around({target:a,method:b},function(a){if(typeof a.arguments[0].src==="string"&&(a.arguments[0].tagName.toLowerCase()==="script"||a.arguments[0].tagName.toLowerCase()==="img"||a.arguments[0].tagName.toLowerCase()==="iframe")&&a.arguments[0].src!=="javascript:void(0)"){if(sanitizer(a.arguments[0].src)===true){a.arguments[0].src="javascript:void(0)"}}return a.proceed()})}function sanitizer(a){var b=new RegExp("(?:f|ht)tp(?:s)?://([^/]+)","im");try{a=a.match(b)[1].toString()}catch(c){return a}if(mode==="blacklist"){for(x in list["black"]){if(typeof list["black"][x]==="string"){if(a.indexOf(list["black"][x].toLowerCase())!==-1){a=true;break}}}}else{for(x in list["white"]){if(typeof list["white"][x]==="string"){if(a.indexOf(list["white"][x].toLowerCase())!==-1){tmpS=false;break}else{tmpS=true}}}if(tmpS===true)a=tmpS}return a}(function(){var _after=1;var _afterThrow=2;var _afterFinally=3;var _before=4;var _around=5;var _intro=6;var _regexEnabled=true;var _arguments="arguments";var _undef="undefined";var getType=function(){var a=Object.prototype.toString,b={},c={1:"element",3:"textnode",9:"document",11:"fragment"},d="Arguments Array Boolean Date Document Element Error Fragment Function NodeList Null Number Object RegExp String TextNode Undefined Window".split(" ");for(var e=d.length;e--;){var f=d[e],g=window[f];if(g){try{b[a.call(new g)]=f.toLowerCase()}catch(h){}}}return function(d){return d==null&&(d===undefined?_undef:"null")||d.nodeType&&c[d.nodeType]||typeof d.length=="number"&&(d.callee&&_arguments||d.alert&&"window"||d.item&&"nodelist")||b[a.call(d)]}}();var isFunc=function(a){return getType(a)=="function"};var weaveOne=function(source,method,advice){var old=source[method];if(advice.type!=_intro&&!isFunc(old)){var oldObject=old;old=function(){var code=arguments.length>0?_arguments+"[0]":"";for(var i=1;i<arguments.length;i++){code+=","+_arguments+"["+i+"]"}return eval("oldObject("+code+");")}}var aspect;if(advice.type==_after||advice.type==_afterThrow||advice.type==_afterFinally)aspect=function(){var a,b=null;try{a=old.apply(this,arguments)}catch(c){b=c}if(advice.type==_after)if(b==null)a=advice.value.apply(this,[a,method]);else throw b;else if(advice.type==_afterThrow&&b!=null)a=advice.value.apply(this,[b,method]);else if(advice.type==_afterFinally)a=advice.value.apply(this,[a,b,method]);return a};else if(advice.type==_before)aspect=function(){advice.value.apply(this,[arguments,method]);return old.apply(this,arguments)};else if(advice.type==_intro)aspect=function(){return advice.value.apply(this,arguments)};else if(advice.type==_around){aspect=function(){var a={object:this,args:Array.prototype.slice.call(arguments)};return advice.value.apply(a.object,[{arguments:a.args,method:method,proceed:function(){return old.apply(a.object,a.args)}}])}}aspect.unweave=function(){source[method]=old;pointcut=source=aspect=old=null};source[method]=aspect;return aspect};var search=function(a,b,c){var d=[];for(var e in a){var f=null;try{f=a[e]}catch(g){}if(f!=null&&e.match(b.method)&&isFunc(f))d[d.length]={source:a,method:e,advice:c}}return d};var weave=function(a,b){var c=typeof a.target.prototype!=_undef?a.target.prototype:a.target;var d=[];if(b.type!=_intro&&typeof c[a.method]==_undef){var e=search(a.target,a,b);if(e.length==0)e=search(c,a,b);for(var f in e)d[d.length]=weaveOne(e[f].source,e[f].method,e[f].advice)}else{d[0]=weaveOne(c,a.method,b)}return _regexEnabled?d:d[0]};aop={after:function(a,b){return weave(a,{type:_after,value:b})},afterThrow:function(a,b){return weave(a,{type:_afterThrow,value:b})},afterFinally:function(a,b){return weave(a,{type:_afterFinally,value:b})},before:function(a,b){return weave(a,{type:_before,value:b})},around:function(a,b){return weave(a,{type:_around,value:b})},introduction:function(a,b){return weave(a,{type:_intro,value:b})},setup:function(a){_regexEnabled=a.regexMatch}}})();if(dnt_config.ifdnt!=="1"||navigator.doNotTrack==="yes"||navigator.msDoNotTrack==="1"||navigator.doNotTrack==="1"||document.cookie.indexOf("dont_track_me=1")!==-1||document.cookie.indexOf("civicAllowCookies=no")!==-1){var mode=dnt_config.mode;var list=[];list["black"]=dnt_config.black;list["white"]=dnt_config.white;aop.around({target:document,method:"write"},function(a){if(a.arguments[0].search(/img|script|iframe/i)!==-1){if(sanitizer(a.arguments[0])===true){a.arguments[0]=a.arguments[0].replace(/</g,"")}}return a.proceed()});scriptParent=document.getElementsByTagName("script")[0].parentNode;if(scriptParent.tagName.toLowerCase!=="head"){head=document.getElementsByTagName("head")[0];aop_around(head,"insertBefore");aop_around(head,"appendChild")}aop_around(scriptParent,"insertBefore");aop_around(scriptParent,"appendChild");var a2a_config=a2a_config||{};a2a_config.no_3p=1;var addthis_config={data_use_cookies:false};var _gaq=_gaq||[];_gaq.push(["_gat._anonymizeIp"])}
</script>
</head>
<body>
<script type="text/javascript">if ((navigator.doNotTrack==="yes") || (navigator.msDoNotTrack=="1") || (navigator.doNotTrack=="1") || (document.cookie.indexOf("dont_track_me=1")!==-1) || (document.cookie.indexOf("civicAllowCookies=no")!==-1)) { 
aop_around(document.body, 'appendChild'); aop_around(document.body, 'insertBefore');  
 }</script>

<div class="hero">
  <p>Test your knowledge of God’s Word across different topics</p>
</div>

<div class="verse-strip">
  <p>“Your word is a lamp to my feet and a light to my path.” — Psalm 119:105</p>
</div>

<div id="home-screen">
  <div class="stats-row">
    <div class="stat"><div class="stat-n" style="color:#c9a84c">4</div><div class="stat-l" style="color:#1a3a6b">Categories</div></div>
    <div class="stat"><div class="stat-n" style="color:#1a3a6b">40+</div><div class="stat-l" style="color:#6b7280">Questions</div></div>
    <div class="stat"><div class="stat-n" style="color:#16a34a">5</div><div class="stat-l" style="color:#166534">Per Round</div></div>
    <div class="stat"><div class="stat-n" style="color:#dc2626">Fun</div><div class="stat-l" style="color:#991b1b">Challenge</div></div>
  </div>

<div class="card">
    <div class="card-hdr">
      <span class="card-hdr-title">Choose a Category</span>
      <span class="card-hdr-count">Pick your challenge</span>
    </div>
    <div class="card-body">

<div class="cat-section">
        <div class="cat-title">Old Testament</div>
        <div class="cat-grid">
          <button class="cat-btn" onclick="startCategory('genesis')">
            <div class="cat-btn-title">Genesis & Creation</div>
            <div class="cat-btn-sub">The beginning of all things</div>
            <div class="cat-btn-count">5 Questions</div>
          </button>
          <button class="cat-btn" onclick="startCategory('prophets')">
            <div class="cat-btn-title">Prophets & Kings</div>
            <div class="cat-btn-sub">Israel’s leaders and prophets</div>
            <div class="cat-btn-count">5 Questions</div>
          </button>
        </div>
      </div>

<div class="cat-section">
        <div class="cat-title">New Testament</div>
        <div class="cat-grid">
          <button class="cat-btn" onclick="startCategory('jesus')">
            <div class="cat-btn-title">Life of Jesus</div>
            <div class="cat-btn-sub">Ministry, miracles and teachings</div>
            <div class="cat-btn-count">5 Questions</div>
          </button>
          <button class="cat-btn" onclick="startCategory('apostles')">
            <div class="cat-btn-title">Apostles & Church</div>
            <div class="cat-btn-sub">Early church and epistles</div>
            <div class="cat-btn-count">5 Questions</div>
          </button>
        </div>
      </div>

<div class="cat-section">
        <div class="cat-title">Mixed Challenge</div>
        <div class="cat-grid">
          <button class="cat-btn" onclick="startCategory('mixed')">
            <div class="cat-btn-title">General Bible Quiz</div>
            <div class="cat-btn-sub">Questions from all books</div>
            <div class="cat-btn-count">5 Questions</div>
          </button>
          <button class="cat-btn" onclick="startCategory('hard')">
            <div class="cat-btn-title">Advanced Challenge</div>
            <div class="cat-btn-sub">Harder questions for experts</div>
            <div class="cat-btn-count">5 Questions</div>
          </button>
        </div>
      </div>

</div>
  </div>

<div class="closing">
    <p>“All Scripture is God-breathed and is useful for teaching, rebuking, correcting and training in righteousness.”</p>
    <span>— 2 Timothy 3:16</span>
  </div>
</div>

<div id="quiz-screen" style="display:none">
  <div class="card">
    <div class="card-hdr">
      <span class="card-hdr-title" id="q-cat-title">Bible Quiz</span>
      <span class="card-hdr-count" id="q-cat-count">1/5</span>
    </div>
    <div class="pbw"><div class="pb" id="bar"></div></div>

<div id="qa" class="card-body">
      <p class="cnt" id="cnt">Question 1 of 5</p>
      <div class="qb"><p class="qt" id="qt">Loading…</p></div>
      <div class="opts" id="opts"></div>
      <div class="fb" id="fb"></div>
      <button class="nb" id="nb" onclick="nxt()">Next Question →</button>
    </div>

<div class="score-strip">
      <div class="ss-item"><div class="ss-n" id="sc" style="color:#c9a84c">0</div><div class="ss-l" style="color:#1a3a6b">Score</div></div>
      <div class="ss-item"><div class="ss-n" id="cc" style="color:#16a34a">0</div><div class="ss-l" style="color:#166534">Correct</div></div>
      <div class="ss-item"><div class="ss-n" id="wc" style="color:#dc2626">0</div><div class="ss-l" style="color:#991b1b">Wrong</div></div>
    </div>

<div class="res" id="res">
      <div class="re" id="em">🏆</div>
      <h2 class="rt">Quiz Complete!</h2>
      <div class="rdiv"></div>
      <div class="rb">
        <div class="fs" id="fs">0/5</div>
        <p class="fm" id="fm">Keep reading the Bible!</p>
        <div class="sg">
          <div class="cb"><div class="cn" id="fc">0</div><div class="cl">Correct ✅</div></div>
          <div class="wb"><div class="wn" id="fw">0</div><div class="wl">Wrong ❌</div></div>
        </div>
      </div>
      <div class="res-btns">
        <button class="btn-pa" onclick="restartSame()">Play Again →</button>
        <button class="home-btn" onclick="goHome()">Choose Another Category</button>
      </div>
    </div>
  </div>
</div>

var cur=0,sc=0,cc=0,wc=0,ans=false,curCat='',curQs=[];

function g(id){return document.getElementById(id);}

function startCategory(cat){
  curCat=cat;
  curQs=categories[cat].questions.slice();
  cur=0;sc=0;cc=0;wc=0;ans=false;
  g("home-screen").style.display="none";
  g("quiz-screen").style.display="block";
  g("res").style.display="none";
  g("qa").style.display="block";
  g("q-cat-title").innerText=categories[cat].title;
  g("bar").style.width="0%";
  g("sc").innerText="0";g("cc").innerText="0";g("wc").innerText="0";
  show();
}

function show(){
  ans=false;
  var q=curQs[cur];
  var pct=(cur/5*100)+"%";
  g("bar").style.width=pct;
  g("cnt").innerText="Question "+(cur+1)+" of 5";
  g("q-cat-count").innerText=(cur+1)+"/5";
  g("qt").innerText=q.q;
  g("fb").style.display="none";
  g("nb").style.display="none";
  var L=["A","B","C","D"];
  var html="";
  for(var i=0;i<q.o.length;i++){
    html+='<button class="ob" onclick="pick('+i+')"><span class="ol">'+L[i]+'</span>'+q.o[i]+'</button>';
  }
  g("opts").innerHTML=html;
}

function nxt(){cur++;show();}

function finish(){
  g("bar").style.width="100%";
  g("qa").style.display="none";
  g("res").style.display="block";
  g("fs").innerText=sc+"/5";
  g("fc").innerText=cc;g("fw").innerText=wc;
  var p=sc/5*100;
  g("em").innerText=p>=80?"🏆":p>=60?"👍":"📖";
  g("fm").innerText=p>=80?"Outstanding! You know your Bible well!":p>=60?"Great job! Keep studying Gods Word!":"Keep reading — Gods Word is a treasure!";
}

function restartSame(){
  g("res").style.display="none";
  startCategory(curCat);
}

function goHome(){
  g("quiz-screen").style.display="none";
  g("home-screen").style.display="block";
}
</script>
</body>
</html>