From fef07d45a7df0f494e0550daabc064195c60c8ae Mon Sep 17 00:00:00 2001 From: gitea_schiller Date: Sun, 17 Aug 2025 23:05:36 +0000 Subject: [PATCH] Add the project files --- favicon.ico | Bin 0 -> 1857 bytes konexio_exo1.html | 103 ++++++++++++++++++++++++++ readme.md | 18 +++++ script.js | 43 +++++++++++ styles.css | 184 ++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 348 insertions(+) create mode 100644 favicon.ico create mode 100644 konexio_exo1.html create mode 100644 readme.md create mode 100644 script.js create mode 100644 styles.css diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..d881af9d4a23dadacc2621b65dc3f6ba47acf210 GIT binary patch literal 1857 zcmV-H2fp};P)Px#L}ge>W=%~1DgXcg2mk?xX#fNO00031000^Q000001E2u_0{{R30RRC20H6W@ z1ONa40RR91JfH&r1ONa40RR91JOBUy0E^%0TmS$Dt4TybRA>d|TTN&kRTRGW&LlO3 zP`dDsY+M9lF)2uuD%77WDz!}-?XIF!5OHs7ca>sy{o5B2EQ;M#)1n@QiBIWzAkFE8`Vg=A*Vy>rg@&AoHy-gC~=YL$we*tXGA z4|W)(wkf3ttWpD7t0$CIy)el?mIbBNg0d~9`%S~GQA9h+- z?D?&a1>Nc`YwbQL-VV*(O=>UU0o~AApEo7-mEL#juO{`RZfgl)dvWMx8|aU$vb$ix zO<7r)z|%@!*2bRDd!~O}nJSF6l_*%6d}df%{Rsf=Sc#r`@5KYXik?5xH9GTsz4s*B zHAUE7-tuJNxu@_x?oTRg%e7YLjO!iLyKev4sJ(^>dl!aY$K-PkhBh^7ti|o;G1={R z_fCJ?h~9<>`;&tQmDR^#0F!TBWf2ChSgof5t$ues|BmwgIpsME;oYv^s~l&u=Q{ny zs;9NJ!x*wVQP)$KcBKNP?O|tR=2V^S>wAaorTz_p-*W~^57eP}4qC_Y^v505{avG< z7kAX!{%AzEPkMO-+550ZOtCGm!5sp_q}m6e6fZyem75>pmbc1 z&6azx#tpTq?f5`%V7d>Z-G}(wnAaX74(IiBE@6LS=yNE|8^(8yv2W--GruH_ug0~# zIQU!;=x?CAFGv4bXLS1AtoqE!C!C;i$l__4`<_oktJ3R zSz^PfFJVt|S|)5S484-M>%n)nowKn7JWm#414gM0Igwjj_mHsGhhkykc%O@kgsgCv z5k}EVg0=iIw~#PB718EhB62!8(@BliS{7kEE#V+Ha%5ddm~I)IOP-23u8k!nMU-I! zaRRvJ1Z-}^u}qjgD4`MkA>*yu2#ESyEW{f6A7Yl&#vBc|W0=Y4a7z_#@lwKq3$iei zBe@#7Qo%v;E-rFETX23UcoF8sR0TMOZezT}@EfNKp2(F(H}7dJ?UxWUu}hZ86@Pj_ zs-#;+l6QhE8@nEWD@loj>4WM7auUWY?Br^~@P}|$=x`I{ogm7>POc`3^`v>wyV$8E z3p?UkTzJHRt!jF)E45nM8CTiZL&BXwqD3g#!?H`2PV!DI+1MAb-_Ib7h(M?EWi&&? z4z31Ev3pV_!yl5o6J%M~$<<(0GAof_tVfb}f-DO=x#AtRB4Gx$I)R*oF&n#`HO#4y zZo;Z$CwCW8U6EzPOzaXyay3jKL1js3(8DO6ATP8i!YqYbOXO;}yTB6>Ll z;Ic52Bf0WBte7p6z7-P0XBn~->k23gv6f@XDReQ%kT6q&(85c#LNGdt&k9w=6Gd31 zZ?G3}#IhqQ!Nk@Hc=tx)>x$!jL>&5y?zxO25O;t(HPOO1J!wX7jgnK?!#rUg6pupL z7%&)J@DgE6ktOU(Zp%H)3U6ZYr;O+WLoF{9HTn<*%CCb$Dm#F=UGC`2OXSD0+{3)E z+J4NVP#i|yIc$WwH5G+JxttY{B1>SHosU!ktRmbs^4k>NYUW@`rO#h-zh*F6s$2^h zu@Dn%i;+Wesf-*FV-?|0fDAVr=Xsti82{VD$a}J4jjoA>m@>@IGg~iNSM?6ZmFp_y zAtoJV-JOiDlSi&xoG$Opc7Lw;&T<&%^em=jdnhYAPwe5C+`39zB59`cp(n4!4?sBf zVfMa`b=uHG^3#Mo|X`f v725H^#{ + + + + + Quiz Ludique + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
Bienvenue au Quiz Explore Ton Talent !
+
+ +
+ +
+

Quiz de Culture Générale

+ +
+

Question 1 : Quelle est la capitale de la France ?

+ + +

+
+ +
+

Question 2 : Quel est le plus grand océan du monde ?

+ + +

+
+ +
+ Bonnes réponses : 0 sur 0 +
+ +
+ + + +
+ + + +
+
© 2025 Quiz Ludique - Réalisé par la classe Explore ton talent de l'école Konexio !
+
+ + + + \ No newline at end of file diff --git a/readme.md b/readme.md new file mode 100644 index 0000000..9917e92 --- /dev/null +++ b/readme.md @@ -0,0 +1,18 @@ +# Voici ce que l'on va construire + +1. Une page avec un quizz + - HTML + - CSS + - JS + - ajouter des questions + - ajouter un site externe + - modifier les polices de question et des boutons +2. Ajouter une page d'accueil avec une liste de quizz + - donc on fait deux pages, une page pour chaque catégorie de question + - une page d'accueil qui fait la liste des questions + - on fait la navigation entre les pages +3. PHP + - pour le header et le footer, pour éviter de les répéter + +# Google font +https://fonts.google.com/share?selection.family=Atma:wght@300;400;500;600;700 diff --git a/script.js b/script.js new file mode 100644 index 0000000..d482a48 --- /dev/null +++ b/script.js @@ -0,0 +1,43 @@ +let correctCount = 0; +let totalQuestions = 0; + + +function checkAnswer(questionId, answer) { + const result = document.getElementById(questionId + '-result'); + + if (result.dataset.answered === "false") { + totalQuestions++; + if (answer === 'correct') { + correctCount++; + result.textContent = '✅ Bonne réponse !'; + result.style.color = 'green'; + } else { + result.textContent = '❌ Mauvaise réponse !'; + result.style.color = 'red'; + } + + result.style.display = 'block'; + result.dataset.answered = 'true'; + + // Mise à jour du score + updateScore(); + } +} + +function updateScore() { + document.getElementById('correct-count').textContent = correctCount; + document.getElementById('total-questions').textContent = totalQuestions; +} + +function resetQuiz() { + correctCount = 0; + totalQuestions = 0; + + document.querySelectorAll('.result').forEach(result => { + result.textContent = ''; + result.style.display = 'none'; + result.dataset.answered = 'false'; + }); + + updateScore(); +} \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..5d44189 --- /dev/null +++ b/styles.css @@ -0,0 +1,184 @@ +html { + background-color: #FDB32D; +} + +body { + display: flex; + flex-direction: column; + font-family: Arial, sans-serif; + background-color: #f4f4f4; + margin: 0; + padding: 0; +} + +header { + background-color: #FDB32D; + color: black; + text-align: center; + padding: 20px; + +} +header .titre { + font-size: 54px; +} +@media (max-width: 768px) { + header .titre { + font-size: 34px; + } +} + + + +footer { + background-color: #FDB32D; + color: white; + text-align: center; + padding: 10px; +} +footer .message { + padding: 10px; +} + +main { + align-self: center; + display: flex; + max-width: 2000px; + margin-top: 20px; + margin-bottom: 20px; +} +article { + width: 60%; + margin-top: 50px; + margin-bottom: 50px; + margin-left: 30px; + margin-right: 20px; + padding: 20px; + background-color: white; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +aside { + width: 20%; + margin-top: 50px; + margin-bottom: 50px; + margin-left: auto; + margin-right: 20px; + padding: 20px; + background-color: white; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +@media (max-width: 768px) { + main { + flex-direction: column; + align-items: center; + } + + article, aside { + margin-left: 20px; + margin-right: 20px; + } + article { + width: 80%; + } + aside { + width: 50%; + } +} + +h1 { + text-align: center; + color: #333; +} + +.question { + margin: 20px 0; +} + +.question p { + font-weight: bold; +} + +button { + display: inline-block; + padding: 10px 20px; + margin: 10px 0; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; + transition: background-color 0.3s; +} + +button a { + text-decoration: none; + color: white; +} + +button a:hover { + text-decoration: none; + color: white; +} +button a:visited { + text-decoration: none; + color: white; +} + +button:hover { + background-color: #e97e90; +} + +.result { + display: none; + font-weight: bold; +} + +.reset-btn { + margin-top: 20px; + background-color: #ff6666; +} + +#correct-count { + color:#00A851; + font-weight: bold; + +} + +.atma-light { + font-family: "Atma", serif; + font-weight: 300; + font-style: normal; +} + +.atma-regular { + font-family: "Atma", serif; + font-weight: 400; + font-style: normal; +} + +.atma-medium { + font-family: "Atma", serif; + font-weight: 500; + font-style: normal; +} + +.atma-semibold { + font-family: "Atma", serif; + font-weight: 600; + font-style: normal; +} + +.atma-bold { + font-family: "Atma", serif; + font-weight: 700; + font-style: normal; +} + +.bg_rouge { + background-color: #EE2F4E; +} +.bg_vert { + background-color: #00A851; +} \ No newline at end of file