From d0bf1eaee767e95a2c53e3e215319bf2e2abbdf0 Mon Sep 17 00:00:00 2001 From: Anna Hansen Date: Wed, 11 Sep 2024 22:39:43 +0200 Subject: [PATCH 01/19] intital commit --- code/script.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/code/script.js b/code/script.js index 125d6904..b1cffba8 100644 --- a/code/script.js +++ b/code/script.js @@ -1,5 +1,6 @@ // DOM selectors (variables that point to selected DOM elements) goes here ๐Ÿ‘‡ -const chat = document.getElementById('chat') +const chat = document.getElementById("chat") +const nameInput= document.getElementById("name-input") // Functions goes here ๐Ÿ‘‡ From 8fa1f7c8a52e0d6870cc9a61bc7c1dcc885ca3c2 Mon Sep 17 00:00:00 2001 From: Anna Hansen Date: Fri, 13 Sep 2024 17:32:32 +0200 Subject: [PATCH 02/19] Due to difficulties I commit a large update of everything from updates to DOM selectors, variables and several functions. --- code/assets/bot.png | Bin 8647 -> 27211 bytes code/assets/user.png | Bin 8755 -> 882 bytes code/index.html | 6 +- code/script.js | 194 ++++++++++++++++++++++++++++++++++++------- code/style.css | 13 +-- 5 files changed, 176 insertions(+), 37 deletions(-) diff --git a/code/assets/bot.png b/code/assets/bot.png index 2c894b151d45dee91c34696c9abc1e05b605d6c0..e3e875de3e881fec99f34352a0a77e6f73ef67f3 100644 GIT binary patch literal 27211 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 sgSezG--P{#hK~9FV!Z literal 8647 zcmV;&AvoTNP)14W00009a7bBm001F4 z001F40Y#QEU;qFB0drDELIAGL9O(c600d`2O+f$vv5yPNF?Rtg*Hf45(y|TRgUw}H^7m2DV0jx2l|LZ z-*|vyo@hahBO#EG+DrsURe6Zr2U001*-%PMNMgtF?ObMt^{u`3@pwGfz1G@$t-ZgW zv^{g?9NTBknf1;0zpVdi2&pB5!JwmV_N(idc?cihKXiZiR?OG#m+2(t_L8}>$8i5W zbDMpfG#ZUWNbP6{sVqiVAS$>$DmO)@BjJz?UFWm=N|4S8sU#Gg3ZTR#6BArV<)*OA zaweez;Yrl>vbldwiP0q?QA5#*5aVE0)b$B-+mZTk&RklE=!oKjq7wl|WS*4N#o#t} z2jh}NQW1JlC_+&{(Fu^DaOnw2MW!QUUJ`Y6B^9AA!?Ez7=mdfhnpH`K27*I3Nm;{Kx0)x=8Xeois>;~t8R zLre(u6``xC5^KWH%PABc2T*Kk0h$hU3HycwQDvMohg{oH^gRDLZr8z3XHy8k5gdg z1wz!?VXo!$HcZxprS_>%bjDzs`p{={QbOvpfs@(1UJsF(MJ7V+UFzDIhG}8(oD!Z> zLT-biGlB`Fz9pd~i6JgpXs(BmhY1ygU@av;OS?jHL5VQma~l*Lg9)V|HY-v#nb2%q zt+$)WixwayJWG2*5ui0;$h8ecN3`G|lzL9e45cVEe#iu9`Hr%a(b!r6;W;fer`DoV zy1PO7dgJoV91Zac1Za6***Ty@U60k-_0(2$N_967n2q9PC z8YG#UQejN8_!TKaa3D78?}=RfO)5GRocP(iDsn~rK5x96?!xy^M_sR|*KKi*yaX!i zbkr~IYf?lwMQ2kFvYZc`PcfWUj^|maAe9px6HdJ#>49~A!8_slC5la*D7M;#X@yT! zE!?V<=qSN~&_HlH;uDm-5lXT2U0)zRyYDR`-;+qi@;sHv>6mi3--IzjsT&tXuDwOU zsXN$wTTH&EBWa%JX{iX6a60N2f^ztC;uCZbGeJzoQC!GXi7w{oMaO%>81sW~yhCS0 zW`o&2I}i8{xuO@IXhp{~{6TP5#TRrpWKl3&46X;e+Wmop08hl)NEoH)7{NjQ#!rQc z?uOWcjikHo^67e_t!zanI^H{su_03@2kCBzCH`|gi9}f0ib{063Xbk5zLYlk5#o}i zJIreI0+5pd3GL5yP4gRsOxx$4TQmoj(*bRy0b5bIuhF3$SaS9G0qu_On z*E3$%ZooQw!K}N|DAnnxCl80?rcy=0Ayvh_<2k3?&T%P;(wvUTsJknTQ*cOC$sCV6 zj+I%_Dn)e6$(!!x8YA0J!68)!uWz?it&?S)BwBcQ#{Hk3$K)#u1dPE${y?%$9M`t>ddaYUG7dVtZ}dq(Q!Je0t2|NUEp{MLNFEsrS#^K zIH0inPEp|%98O1U$p)xXa0p4)0UW=Zv(%B-aTAHmz`N*}jbIW zSSg~6?lrtJVbvSr0w#_LnT)$qy7w^4x6^q^T%eDMq2LfQ5tP#1RJ6Q@S>8m)bRBoZ z7UXeIA|!-NN1xy3B){V|%<>XmIqN#sn>a5pk3-13=o2OmyVxA+EzI)ebdWr@4=^#; zn1Vyd{9wJf=~(s_W;quf(*(FGwrpPI76(G|fcy>`Xzf9mwIYsj9$u+$64k1X*pT(( z(B%-44>S($Iqc#fzeF6LpXJo)n4X-D*n%T}DL91WM>h^S>EG#y%P}E`R zg)zX-dN_pLxS}4rGW7W?`mx*4UpKitJGgQ|Truw7YV19nUI#xS%>xgp`yUW8fgLI} zvwVkG;xwt;7I)b1RAqU5Cfh<`1R`6MgDY>E+nbB@=I4eMu8Q{u8B9vBX+*oXp9oXtfGr(*M;@ zl(4)e{R`(PE&|5FPsxxjz2)s#JmgZ(q>@(|i4g z6q$g@La_GH6ZOdfx!DwI?RKn0$C=By`WuOz-v9nk3k^hv#6_0>feWfU$n7AS|%ptpxw`Xe=h9@KV4n-<0h$`DA740Imsjp)?U<)8x9JHIAdul}o$>QhPaag$We zo!iOvzdCU_5l#Zs?&haoWhhlcDknb6`&1eIPO&6cB`dG!AX}RM9P$WD}`CAyu3|3|ac-EItNWF_*gpZzn#DRPtLy(-!KSuH+MQry(w}W{*N9LU_xQNqvQfve#5|@K26$OXnWlOz&Hokvid%jT=*t;F*!s@(V zyol)7g;o&=4qhlMixXSW$F=_bXW|LBFxu39c-|B9e&JlAW6IQP|tcIG}gVqT~7wAcWb6L=#aUL5Q+CayuKz7>OehTE|}^6ANWzG$vQvQn^% zVw2Aae2*2vs`Y>StPtW0l+~9${$&Xo`yJ?WC6s469kb6Wzu@%NgLgTbFa5m`;uGX| z5N-tx)+(<2KqqFpoq575`_L+2@M7p+d`$@PO%%d2#D?At2^qWqm^>y$qm#?8epiCTP5FFv+9zj;j$LRK z_`!K}IixJM^wh~f!+N{C4w%}rGf{NxL#xf86UZ3IMVCX$WTX4#Fi%^xPbg0fv8Fkl z6|uoSA>|dE+(1Z~;7zX=s@vYQK52J#(kG^gj$LSFZ_)gLV|)Ma$3jTiAh*-M5a6*z z_B#kBhFD`o$5^8k$xGn9IXxvfLE2hUOM-5 z>2~Zxtg+_hHqlXW7%Wjo^0IkNLZ;8qiUdk8#Nvish}BVga{uUq(cpCqYsP|o&5P6?6nGcM>$I6%;%6$!Rs@$5DV*hV6~=?jy~Yl>4ffb zxSN~=PLQuryAbQPWb!SdW1Y|0vbJJg33jgwA%?+)a}peuGj>MvI-^d?U7Gf2nKz8>BY#aQ2%p`4GE z;SaV&$Ly1^5S_3?D<+X|2SU?+_+%{?RA3$o5|SUMbIc5TYZu zU*FJ|F77l(9?S;@b_Jf#>9caBX{dMi<-h*HT!J%9`_E3w^5fr_x@beBr37U8Z+@b` z|3$uc{G9N2cBr2f?iWdrqJ#Bq*RQj!FTnoZ;)aDza|v zTGO{5bCHS8{gRgm%H=^?)dFeW?e87B$anvFX!^`E73k`Mbvky*Nf=vkw24cZ2PNySz8T2H0C_2OeRoH)KP2WLI$DCPi@l8a~ja>8U6*e(? zBd}fQ5C&gvr~mfPrS@2^ca+WHbUKok2n0t{bEo5TA!0{%X!JdOPlMkTCptm5dDxZB z4?uMGOI~6Kt%zpe;awVHhM7B|fpHwJ(a-fAIvq{lYTX~Rb2_0<3N)}!N4$(^2zAa5 zgmCM>zbP)kb0r4L2*=Lp#1dW+y%1fx5{Q@&N8yUCAOEBDe&Hs}(zA5}ey)XMXEr*P z;Z-C~hua`DoB#eLC%K($nqcT`{>PV`gq8TYks<8X{r$}8)Cjy|Z=C&{mGHpfM6(Fh z^ITWY*T(VS`IeHmTHY(cGO!P?@^>Rg;&jMO@XoJ=XTe-dCRowsHk9ye{_t-X&S^oI zA+BXT-$u})W7Qzov77%)(TNf*JTH7she@+s58mam_}0JuNRXAPd4YJ~In2t<;OBv_ z+4z@Fm72$CEae`8?jOr_-xv%AINdAXhRq69+JjBv!y{T zJT$_Uc_M;Ouyvz(&qMlDh-^O<8Yp#HJdo$yJak-^|KjTsB+X@!J%=PG2~LBs$mv+w zED`|vogF!kUxe4>=L=np!WHmyZtOiQ;bP}>f;(Qv2SLZjgp46<(Xpcz&4EEz0tgvL z(1~QLb-$m9WI_U@dGI3=ETxK0Brv=pvC%jXu;^G)3(=81fgMIq$P^mt^;+dON;(}v z0;75G0jVheSd%hS17#-Pb~N&}hZH4vB%*ha%V~Xt(Z@dX&ti+I#-@rnS6pD02rjg@R%!rx9LH}M!HIvo-^?W4~~6xf-KOO{S29?@wYKF%gV z5-hC`KORrs(Lo~lmy(x=L4sg&Mcuw*XSxyJ&Di-JKkN^nww1-(Vt=9b|yKN8=Ivvn@;4g)cGHE~j`FOYH z*d>zRXf_&+L~MvL#Cq_vOemAmK!}gmV3b&{ccnMK%!0E-^3q(A=um>we)tPQNYQA) zi7}6pVV6=#@JA*(7I~dG_l%-9qUv)?NLaKU{7l?}18}-$eiHppm=E5Qyu|2q3`-yX zGQ%uV2yi${RdCnM5S&h=$z*^;Ui(iOW)XihmhMn*ZhsfQ!^vn_Ii2(PqnRUwAzlQhD8TSo_wN%55GoX*R`AB+>7{M0PO@;Po&ze{7`92)=mOq906 zHdNstND&AVlCxr*hISkf3v-*@Z!F(&%i~$I9mS*s9OiStEuv%HnOq~$!HXZ`Cd;zv z+oB{g@%(EoL@JT3#R(r9ks55gfAiy6WD9@v|KEH2;@=jI?XMZ?%2h(ckS0>vyTpPd z>qOrE=f-@|i;_3Q!Z){`fBI=mw2y^9#edr+WbWXQ5VAOSO@Ze}9~d`*%dTH1;!zj# zk|vJ1JDt=3-GgVfrqAB?PtNm23(?vsRR+o5%IzK|WD+f_&FInllg2a%=A;cL7t?VjS-Le1dgfF%WvD)#toq0>k z%;S*SVP7gAYhEUa4lGgrGE~JvtZ0vaCB%lMJz`0B+=F99$Ly2HU&X3Wh=oSBXpes- zBrgs^tKt1txBSyn{!;$D4u~kknnvr`D)Ts`e%OarXC{4On&_;F4HXEn^t{_xkAEe^ zh9&Fn@$RHgOcWhsjk=N-C}qSG1$7>WM-P)aqC+dIUFBWVdNY<;t%eA(RwOTI6byV| zJBBvl|v0XBYKl)PZf1xnH!V@gOoU^B1X z)`uh0oX*q|lXZw?KZk=5QY0vo+X>Fp&2yqpW#@L<);m=RA-=IsAkVdZYTmYCyS-RC zPORo8P(msJTuuR@mHw~h`6A_Zx?-D9USe*CkYKTI=1q)F%w!S!VYe*;Juh@SgoKH` z%Q-dg7tTy1XE;eHuU{6~cuxo+0Rh3;c~C4s-uK9)4W6USZ9SYMl<9T|36CB23FLVN z2h8nsfO0z>N!?C<=ynJR2YZ(Tj?8KZ9A+WgVgBK+*g&^KNI2NLoV7&+2jp4(b0>_( z!b%n)VPL=I0W6$ySy*(e%jbY@hmdkXUyi-YIX7>a{FeV(@)y)g0PEZiSidB)@xBm3JmRJi z(8}ci7jk>KUAFqieuIz=q z+d7+Gf;XPK9uuddrm>uY^ zh|Rnmu&ENtH|E|YPY9XD&I2xv2nI)7iH&&;oKvm@2RL&& zz)Tl}+v$i6{VkDezvUJQLh^!Y6?$^)lgHL2@==^7P|Wl&`(%?Y?{SL+A-Qo=tpfH% zq7j^DZJm_R0kZ8p9h8v8!Mbr%ty*(YA|J(Rc$MKSsf_RnVHUzILda}%Sarxn6&O*= zahJKA3@`O*^NrfuGW_6n-NQ0EA@hKBvfJ5uIpsrefETBe;bdPHU>Ti|*|;l@J5L@D z<6Cq(;v&of+!RX4WU!5B+1bQ~BfeY?@EW%`3$p;KS?u2-%U`SnUD;3{Wt&{Iv*3y6eT(xaTR9uH&jLIcWfLa1PS9khg=CxqOQk$yBttR zS;#z*XT=4ulJX4k)Y^ZJLbi_htcX)!)gEWm031IL10~!}C6x z04GsMc$ML7Z&t>}WmVPUx#*;3xUEzrk~RSr){|0b*PVG{NL0Cbg4kcetrDb8;PviK zaP)dCQgA@wt-emn=m4d3H~UNo2^+l5-EM>~ERQoxDf5QUsJjm}H6Bp>sp>L^@`lb+4DIhqzo$f(Arv&G?ltkG(DW8%wk!6qG z>~=3552+UJ1t*bo-IYeEP6sHr1E+(IWjDbp9S^Ar?ghu&xQaz6eP)FE0h|+8jf46h zq~jqKz`fvrXUi5G5X7Jw)0pJ0qNUrz53{O8;smeTJ%?Ni&Z#0B0H;xUcr}a)wUAB! zqPT=3F-T0H56As{a0t$G5(q(w4p73grf!}Vm#}l0#DLpQL@CaH0d8@6pQGx-N3#U5>>d;h>NGJ?L`tW=0|fjjC9b zAVmk589Z=29dQW%91EY6$Ih}`-kx0OT z1A-PE;7xb{^E{*s{8XqwB7qAI2wrr6SK-0&HtUy}=OO+<{$|IWJ`%g$GUt;T9VSiEH%Wt$n^us!b#!!2wZ;4)7{GVDoA! zK6E|A79CD`9Ws|lWP$^t6CGfL=LK=yK$ro+K|fD#T?omAzv@&*kd1%y5X6ShMKQ{b zS<7d|2Ri<~H$8Ep5#^7Fl!b2gJCMG9{0Yt(iBxbvlul!VAcgGk{1C524 z1h?k{JdGkovhp{6fBvgd!{GH<`k7QkP7sea!Y>L?KEe^2jIPw&-3&v~ z8KIO4*EF;MU01i)DL~Uet3qp6NJ0Y=NyVlsWE+ak1WHXbPa?|!VYUx$>wJPmmJG%P zq47JzW>FAIq3`B&tb?|ELeZH*P$AbiAUwSdb6ar{8Wx$>a!77wlr>3nH;It3P;};? z)ZU&&Kr*`DQ%-2z+~15-h#)Y{rS!O62uyo9G$%8TuB2kq6*3iy&H@CN@0kaP4#cNt z1PNj^=!KCVLLLU<(rBatqw_LLF$l~sU7^@41VtwYQHswv23x5RX<^z*Z}He*VD7^u z4b0c}r@JP&lkMJ@#?6l*C=d~Szomr5TyY7@I1)+4W=+UKP;@M)jQEg6=&I`s#U?)# z9S0ck!N4&8(+WvhbcJD*6DT?kQR1_rZdN7KY8S~vS12}4q3C#EsMP+1l)1HnPs_PtuCOjxQ5uii}O^3LiFt;5c84wi+%y~)kGl`I(q3A@&kO-}) z>!{SL6FQMJH}f)XDKhav(Ww9?9Lt0#3&&y?A~={t(wxkBbIWk40#I}+jB!LAa~&PJ z-;r=gBo!2h$@%PKI+*H0(Wxn>T83-?&@HYz<)$cQkBQ6{s!Qg|NJegdIdor(427kh Z{2mOC)WT1aSs(xa002ovPDHLkV1gf=N5lXC diff --git a/code/assets/user.png b/code/assets/user.png index 6d95f08fc9d4ed2e0cfff1badad509dbaa4ff71a..ba9e9498ba7db63e87e346bc3f95b757b65f9a23 100644 GIT binary patch literal 882 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 UuY1?u)_4%;Xc(x!R&$8^AHjrXEdT%j diff --git a/code/index.html b/code/index.html index 316eb187..e3b518a6 100644 --- a/code/index.html +++ b/code/index.html @@ -8,11 +8,12 @@ - Chatbot + The World Wide Quiz Bot -

Welcome to my chatbot!

+

Welcome to the Music Quiz Bot!

+

Test your knowledge about music

@@ -24,6 +25,7 @@

Welcome to my chatbot!

+
diff --git a/code/script.js b/code/script.js index b1cffba8..dbdf4e8f 100644 --- a/code/script.js +++ b/code/script.js @@ -1,13 +1,35 @@ // DOM selectors (variables that point to selected DOM elements) goes here ๐Ÿ‘‡ -const chat = document.getElementById("chat") -const nameInput= document.getElementById("name-input") +const chat = document.getElementById("chat"); +const inputWrapper = document.getElementById("input-wrapper"); +const form = document.getElementById("name-form"); +const nameInput = document.getElementById("name-input"); -// Functions goes here ๐Ÿ‘‡ +let currentQuestionNumber = 1; // Start with Question 1 + +// Question data +const Question1 = { + question: "Who released a single in 1999 called Genie In A Bottle?", + options: ["Britney Spears", "Christina Aguilera", "Robyn", "Corona"], + correctAnswer: "Christina Aguilera" +}; + +const Question2 = { + question: "Who wrote the song I will always love you?", + options: ["Whitney Houston", "Celine Dion", "Dolly Parton", "Mariah Carey"], + correctAnswer: "Dolly Parton" +}; + +const Question3 = { + question: "Which artist has not competed in the Eurovision Song Contest?", + options: ["Celine Dion", "Olivia Newton John", "Bonnie Tyler", "Vanessa Paradis"], + correctAnswer: "Vanessa Paradis" +}; + +// Array of questions +const questions = [Question1, Question2, Question3]; // A function that will add a chat bubble in the correct place based on who the sender is const showMessage = (message, sender) => { - // The if statement checks if the sender is the user and if that's the case it inserts - // an HTML section inside the chat with the posted message from the user if (sender === 'user') { chat.innerHTML += `
@@ -16,9 +38,7 @@ const showMessage = (message, sender) => { User
- ` - // The else if statement checks if the sender is the bot and if that's the case it inserts - // an HTML section inside the chat with the posted message from the bot + `; } else if (sender === 'bot') { chat.innerHTML += `
@@ -27,28 +47,144 @@ const showMessage = (message, sender) => {

${message}

- ` + `; } - - // This little thing makes the chat scroll to the last message when there are too many to - // be shown in the chat box - chat.scrollTop = chat.scrollHeight -} + chat.scrollTop = chat.scrollHeight; +}; // A function to start the conversation const greetUser = () => { - // Here we call the function showMessage, that we declared earlier with the argument: - // "Hello there, what's your name?" for message, and the argument "bot" for sender - showMessage("Hello there, what's your name?", 'bot') - // Just to check it out, change 'bot' to 'user' here ๐Ÿ‘† and see what happens -} - -// Eventlisteners goes here ๐Ÿ‘‡ - -// Here we invoke the first function to get the chatbot to ask the first question when -// the website is loaded. Normally we invoke functions like this: greeting() -// To add a little delay to it, we can wrap it in a setTimeout (a built in JavaScript function): -// and pass along two arguments: -// 1.) the function we want to delay, and 2.) the delay in milliseconds -// This means the greeting function will be called one second after the website is loaded. -setTimeout(greetUser, 1000) + showMessage("Hello there, what's your name?", 'bot'); + + // Show the name input field + inputWrapper.innerHTML = ` + + + `; + + document.getElementById('name-submit').addEventListener('click', () => { + const userName = document.getElementById('name-input').value; + if (userName) { + showMessage(userName, 'user'); + setTimeout(() => { + showMessage(`Nice to meet you, ${userName}! Are you ready for a quiz?`, 'bot'); + setTimeout(showYesNoButtons, 1000); + }, 700); + } + }); +}; + +// Show Yes/No buttons for quiz confirmation +const showYesNoButtons = () => { + inputWrapper.innerHTML = ` + + + `; + + document.getElementById('yes').addEventListener('click', () => { + showMessage("Yes", "user"); + inputWrapper.innerHTML = ''; // Remove Yes/No buttons + setTimeout(() => askQuestion(), 1000); // Start the quiz + }); + + document.getElementById('no').addEventListener('click', () => { + showMessage("No", "user"); + setTimeout(() => { + showMessage("Ok, see you another time!", 'bot'); + inputWrapper.innerHTML = ''; // Clear buttons + }, 700); + }); +}; + +// Ask the current question and show answer options +const askQuestion = () => { + const currentQuestion = questions[currentQuestionNumber - 1]; + + if (currentQuestion) { + showMessage(currentQuestion.question, 'bot'); + + // Show options as buttons. Each button has a unique id (option-0, option-1, option-2, option-3, for example for question nr 1-option 0 is Britney Spears, option1 is Christina Aguilera etc. ${currentQuestion.options[0]}, ${currentQuestion.options[1]}, etc., are placeholders that get replaced with the actual options for the current question. + + inputWrapper.innerHTML = ` + + + + + `; + + // Add event listeners to the buttons + currentQuestion.options.forEach((option, index) => { + document.getElementById(`option-${index}`).addEventListener('click', () => { + showMessage(option, 'user'); + checkAnswer(option); // Check the selected answer + }); + }); + } else { + // If there are no more questions, end the quiz + showMessage("Quiz finished! Thanks for playing.", 'bot'); + inputWrapper.innerHTML = ''; // Clear buttons after the quiz ends + } +}; + +// Check the user's answer and move to the next question +const checkAnswer = (selectedOption) => { + const currentQuestion = questions[currentQuestionNumber - 1]; + + if (selectedOption === currentQuestion.correctAnswer) { + showMessage("Correct!", 'bot'); + } else { + showMessage(`Wrong! The correct answer is ${currentQuestion.correctAnswer}.`, 'bot'); + } + + // After answering, move to the next question if there are more questions + setTimeout(() => { + inputWrapper.innerHTML = ''; // Clear buttons after selecting an answer + currentQuestionNumber++; // Increment the question number + + if (currentQuestionNumber <= questions.length) { + askQuestion(); // Ask the next question + } else { + showMessage("Quiz finished! Thanks for playing.", 'bot'); + inputWrapper.innerHTML = ''; // Clear buttons after the quiz ends + } + }, 700); // Timeout +}; + +// Start the conversation +setTimeout(greetUser, 1000); + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/code/style.css b/code/style.css index a275402f..ddac370f 100644 --- a/code/style.css +++ b/code/style.css @@ -6,7 +6,7 @@ body { margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; - background: #0026ff; + background: purple; } h1 { @@ -38,7 +38,7 @@ input { border: none; border-radius: 4px 0 0 4px; background: #e5e9ff; - color: #0026ff; + color: #747dae; padding: 16px; font-size: 16px; font-family: 'Montserrat'; @@ -60,6 +60,7 @@ main { box-sizing: border-box; display: flex; flex-direction: column; + overflow-x: hidden; } .chat { @@ -91,12 +92,12 @@ main { } .bubble { - background: #e5e9ff; + background: #ffe5fb; font-weight: 600; font-size: 16px; line-height: 26px; padding: 16px 24px; - color: #0026ff; + color: #9e11a5; max-width: 40%; } @@ -125,12 +126,12 @@ label { font-size: 16px; font-family: 'Montserrat'; font-weight: 500; - color: #0026ff; + color: #dadef5; margin-right: 20px; } button { - background-color: #0026ff; + background-color: purple; color: white; border: none; border-radius: 4px; From afed0820a80d83f10650e2bc6a16f2067bb5d2f2 Mon Sep 17 00:00:00 2001 From: Anna Hansen Date: Sat, 14 Sep 2024 18:54:33 +0200 Subject: [PATCH 03/19] Added media queries, changed colours and added a div for the option-buttons. --- code/assets/bot.png | Bin 27211 -> 2137 bytes code/index.html | 6 ++--- code/script.js | 16 +++++++++--- code/style.css | 59 ++++++++++++++++++++++++++++++++++---------- 4 files changed, 61 insertions(+), 20 deletions(-) diff --git a/code/assets/bot.png b/code/assets/bot.png index e3e875de3e881fec99f34352a0a77e6f73ef67f3..0cbfe2eb56ded18895dce5b27847404eed19afa7 100644 GIT binary patch literal 2137 zcmZWrc{mhm7e@@)#uQlxL-u8|B$GQDTb8k#tCGl)xf;o5GMMbL6iFAQj5TQx6UDVl z1~qOoS^CW2mVIO$+Zb}Wqo?ot=bq;|?|GizbKdj*&Uw#!p7*Y+v#pr0oG=d$kC?rk zwL8~dJyan8cb&?QH07G3VRo0WJUk-D50#haDM5yZM@Yop+5#0tSSG|e{>lXRxv&RA z_6;yzt&KRM(EE&GLxxa*)X5)U}0_ZhIn_4aYA({$)Ni6Xj28I#iY%< zN!kK5xgHLc)@tajtqrX~sWOoNt#xX=Wn5c4+uYoD3dkpI$}C!h7tiGE9i#5Vu5QGJ zayGQ@rTj~5!a$zy-^ljpc6R31Y)g6I%+3a=s%@Wm2*(;lY6ne@35;(bKz%_WGZ}&= zmYSwkMGfhXSM-ALi2egAVCtPo*tHD zzYO#lSxY)rMy`2bxeUR9FN=v}`DR3gf$e5r-qBo3T!8rLsrcz}L>VG>LMY(f=yY;% z;z--4_5?CwD?2wW>Ljq-{yd-{Ghr*c4X`%vVxf&zv$hvU0ktp^T9~)!_dW=R61?3< zoAO!!sd=tFVb8oG6t@xepEErLzbHW2EVeqZSn_rh`gKNHQe&DxbGk;jMa$dw6CnDq z4gFE5;U7(mD^nGX{l#VatNg9kUTyNwIY1?0i^BLT<#wd>{Iyq`B@nEX3Ra3U ztatI2p=JvLn*3Z)40%EMQ7u17XH#VVn#O$ap%+HLpCO!0xkMtggG*j?4JM~9g^<^0 zmGfTvz-Gax+_ocFq;>I@{xMiRsc^3}UgVLY@k`42mlQy8i-6K^f}OY4KP2M3zZWWu zex)v~drnnVaTaQD03=W@yj}v<{}%Hot}D-3hAONvqC<$e$T)A6a@>vK9CS@^d#Bat zBK{N0@x&BE_XhPQ}SJgiThr|aoy=V$m&ui`)|@dn%`xj^OCSI;BXkL1+_5T1f}DIe`2}MA-M7%InZ5_ ze(o%Ef#Bc*heu$iP72uoYlKLRA6LU%t&?^qeFcjlH$PN7T9J!7tb2o z(uJX!yD+oN&!BC_r8!zHb}Qx!Q(5;DJhQ-8L)9lnvOJv4{A)$KW5*dDZ{`b(i;68T zj1{jSkeEtwOJj2Lit6OaK=RGsxkDlTOY9$6OOcCjm7sJPnH#GD@;XpDCww^8gd%l( z^AsdY9g=0v=aaK1(s9w2(Q}qHv|G0nN9(0*FL1u=;k@?(z)$Yk`@=Yb~8~!_bJK1Y4 z)>R~6i*|amK8>WQ9;gC$Ouuj(L{d+3=}i8PA+C~A+-fFCk1_d``MG!5r$T*@h&J{W z*3*f2)@k|3D>bF7*Tu#uI-fV$BL+wVgX7D7<84I=oLD})*>(=UkREQB>d=suGXU5Rxz_Jp?_!%g(!8k&aljh4Uk8312$VgsMEFox z<0jfj6$rk3G9y>wS%f}vc%xt6>z&x%H~+gv_Z}16CN@0K{26%?+FxaR&}XPhAN;z{ zS)=)f%v5%WM#n;Bx)@n@+N~;@t>ER%nX732_A`Y$;Yj01**M+~Wcu<`t4{E;_e*K*4NYnKB>F-#L1o(Lb>UIq^9Pm l(d6bk^mP9vk_Q|mWyR4OPf#Tj+`j^ky^XVVt>x9Ee*hAG4U7N) literal 27211 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 sgSezG--P{#hK~9FV!Z diff --git a/code/index.html b/code/index.html index e3b518a6..0f0e666a 100644 --- a/code/index.html +++ b/code/index.html @@ -8,17 +8,17 @@ - The World Wide Quiz Bot + Tune Trivia -

Welcome to the Music Quiz Bot!

+

Tune Trivia

Test your knowledge about music

- + +
`; // Add event listeners to the buttons @@ -147,11 +155,11 @@ const checkAnswer = (selectedOption) => { showMessage("Quiz finished! Thanks for playing.", 'bot'); inputWrapper.innerHTML = ''; // Clear buttons after the quiz ends } - }, 700); // Timeout + }, 900); // Timeout }; // Start the conversation -setTimeout(greetUser, 1000); +setTimeout(greetUser, 900); diff --git a/code/style.css b/code/style.css index ddac370f..3c86f3ae 100644 --- a/code/style.css +++ b/code/style.css @@ -6,15 +6,18 @@ body { margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; - background: purple; + background: rgb(105, 3, 105); } h1 { font-weight: bold; - font-size: 28px; + font-size: 35px; line-height: 34px; color: #fff; text-align: center; + padding-top: 20px; + margin: 0; + font-family: cursive; } h2 { @@ -33,12 +36,13 @@ p { margin: 0; } -input { +input, +#name-input { box-sizing: border-box; border: none; border-radius: 4px 0 0 4px; - background: #e5e9ff; - color: #747dae; + background: #e6d7ec; + color: rgb(105, 3, 105); padding: 16px; font-size: 16px; font-family: 'Montserrat'; @@ -48,6 +52,8 @@ input { width: 100%; } + + main { margin: 0 auto; width: 100%; @@ -92,12 +98,12 @@ main { } .bubble { - background: #ffe5fb; + background: #e6d7ec; font-weight: 600; font-size: 16px; line-height: 26px; padding: 16px 24px; - color: #9e11a5; + color: rgb(105, 3, 105); max-width: 40%; } @@ -114,25 +120,26 @@ main { .input-wrapper { display: flex; justify-content: center; -} + background: #e6d7ec; + overflow-x: hidden; +} -.input-wrapper form { + .input-wrapper form { width: 100%; display: flex; align-items: center; -} +} label { font-size: 16px; font-family: 'Montserrat'; font-weight: 500; - color: #dadef5; + color: #e6d7ec; margin-right: 20px; } button { - background-color: purple; - color: white; + background-color: rgb(105, 3, 105); border: none; border-radius: 4px; padding: 16px 20px; @@ -143,9 +150,35 @@ button { font-weight: 500; cursor: pointer; transition: all 0.3s ease; + color: white; } button:hover { opacity: 0.9; transition: all 0.2s ease; +} + +.option-buttons { + display: flex; + flex-flow: row wrap; + justify-content: space-evenly; + width: 100%; + gap: 10px; + +} + +/* Media query for screens smaller than 600px */ +@media (max-width: 768px) { + .option-buttons { + flex-direction: column; /* Stack buttons vertically */ + margin: 15px; + padding: 10px; /* Adjust padding for smaller screens */ +} +} + + +@media (max-width: 768px) { + p { + font-size: 16px; +} } \ No newline at end of file From fc6c40f805c61e27571fc976efae30d3e13ebf27 Mon Sep 17 00:00:00 2001 From: Anna Hansen Date: Sun, 15 Sep 2024 16:26:55 +0200 Subject: [PATCH 04/19] added more questions, added score function and fixed styling and colours --- code/assets/note.png | Bin 0 -> 527 bytes code/index.html | 8 ++--- code/script.js | 72 ++++++++++++++++++++++++++++++++--------- code/style.css | 75 ++++++++++++++++++++++++++++++------------- 4 files changed, 112 insertions(+), 43 deletions(-) create mode 100644 code/assets/note.png diff --git a/code/assets/note.png b/code/assets/note.png new file mode 100644 index 0000000000000000000000000000000000000000..d7587475ed2ee5042158bc45ef20ca94b6215b2f GIT binary patch literal 527 zcmV+q0`UEbP)%g&OINU=O1uh@7H<1U!TwW z(-%#hv)F>~4Ews!qtol%l`jQM~P=*fC3;kc$Ze zm%9<^w%MFIp@5Nf*+fD?BiRHZ%}8HbM+Ty0q$h2(27vAV#c1K+=#5|l9*)w8<+Xhd zC-7`?k(;H?-=fI^*o_N#fLHkR&;2>4k<<`k4KCr=N`;p)k`zLml1Qj2gm{wZ<9k&h z#MeY4AF2vr{EAHBc~v3A%S0nLs|q1*B+4ABDumdTFkbh%iK#1u%Ub*Ky65=|*ji5r zr~mXk-pzh@2Hthu#pn3X - Tune Trivia + Music Maven -

Tune Trivia

+

Music Maven

Test your knowledge about music

- - +
diff --git a/code/script.js b/code/script.js index 6ffde42a..00f6f3a3 100644 --- a/code/script.js +++ b/code/script.js @@ -5,28 +5,63 @@ const form = document.getElementById("name-form"); const nameInput = document.getElementById("name-input"); let currentQuestionNumber = 1; // Start with Question 1 +let score= 0; // Question data const Question1 = { question: "Who released a single in 1999 called Genie In a Bottle?", options: ["Britney Spears", "Christina Aguilera", "Robyn", "Corona"], correctAnswer: "Christina Aguilera" -}; +} const Question2 = { - question: "Who wrote the song I will always love you?", + question: "Which song contains the lyrics 'Itยดs like ten thousand spoons when all you need is a knife'?", + options: ["Torn", "Ironic", "Killing me softly", "You learn"], + correctAnswer: "Ironic" +} + +const Question3 = { + question: "Who wrote the song 'I will always love you'?", options: ["Whitney Houston", "Celine Dion", "Dolly Parton", "Mariah Carey"], correctAnswer: "Dolly Parton" -}; +} -const Question3 = { +const Question4= { question: "Which artist has not competed in the Eurovision Song Contest?", - options: ["Celine Dion", "Olivia Newton John", "Bonnie Tyler", "Vanessa Paradis"], + options: ["Celine Dion", "Julio Iglesias", "Bonnie Tyler", "Vanessa Paradis"], correctAnswer: "Vanessa Paradis" -}; +} + +const Question5= { + question: "Who is the composer of 'Moonlight Sonata'?", + options: ["Bach", "Beethoven", "Mozart", "Hendel"], + correctAnswer: "Beethoven" +} + +const Question6= { + question: "What band was Kurt Cobain the lead singer of?", + options: ["Pearl Jam", "Nirvana", "Soundgarden", "Hole"], + correctAnswer: "Nirvana" +} + +const Question7= { + question: "Which artist had a 2019 hit with the song 'Bad Guy'?", + options: ["Billie Eilish", "Ariana Grande", "Selena Gomez", "Lizzo"], + correctAnswer: "Billie Eilish" +} + +const Question8= { + question: "Who won the first season of American Idol?", + options: ["Jennifer Hudson", "Adam Lambert", "Kelly Clarkson", "Carrie Underwood"], + correctAnswer: "Kelly Clarkson" +} + + + + // Array of questions -const questions = [Question1, Question2, Question3]; +const questions = [Question1, Question2, Question3, Question4, Question5, Question6, Question7, Question8]; // A function that will add a chat bubble in the correct place based on who the sender is const showMessage = (message, sender) => { @@ -58,7 +93,7 @@ const greetUser = () => { // Show the name input field inputWrapper.innerHTML = ` - + `; @@ -74,9 +109,6 @@ const greetUser = () => { }); }; -// Scroll down the chat window after buttons have loaded -chat.scrollTop = chat.scrollHeight; - // Show Yes/No buttons for quiz confirmation const showYesNoButtons = () => { inputWrapper.innerHTML = ` @@ -120,6 +152,11 @@ const askQuestion = () => { `; + +// Scroll down the chat window after buttons have loaded +chat.scrollTop = chat.scrollHeight; + + // Add event listeners to the buttons currentQuestion.options.forEach((option, index) => { document.getElementById(`option-${index}`).addEventListener('click', () => { @@ -140,6 +177,7 @@ const checkAnswer = (selectedOption) => { if (selectedOption === currentQuestion.correctAnswer) { showMessage("Correct!", 'bot'); + score++; // Increment the score for a correct answer } else { showMessage(`Wrong! The correct answer is ${currentQuestion.correctAnswer}.`, 'bot'); } @@ -152,12 +190,18 @@ const checkAnswer = (selectedOption) => { if (currentQuestionNumber <= questions.length) { askQuestion(); // Ask the next question } else { - showMessage("Quiz finished! Thanks for playing.", 'bot'); - inputWrapper.innerHTML = ''; // Clear buttons after the quiz ends + showFinalScore(); // Show the final score at the end + } }, 900); // Timeout }; +// Function to display the final score +const showFinalScore = () => { + showMessage(`Quiz finished! You got ${score} out of ${questions.length} correct. Thanks for playing!`, 'bot'); + inputWrapper.innerHTML = ''; // Clear buttons after the quiz ends +}; + // Start the conversation setTimeout(greetUser, 900); @@ -191,8 +235,6 @@ setTimeout(greetUser, 900); - - diff --git a/code/style.css b/code/style.css index 3c86f3ae..ba119997 100644 --- a/code/style.css +++ b/code/style.css @@ -6,7 +6,7 @@ body { margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; - background: rgb(105, 3, 105); + background: rgb(70, 82, 138); } h1 { @@ -15,14 +15,14 @@ h1 { line-height: 34px; color: #fff; text-align: center; - padding-top: 20px; + padding-top: 25px; margin: 0; font-family: cursive; } h2 { - font-weight: bold; - font-size: 24px; + font-weight: 400; + font-size: 20px; line-height: 34px; color: #fff; text-align: center; @@ -41,8 +41,8 @@ input, box-sizing: border-box; border: none; border-radius: 4px 0 0 4px; - background: #e6d7ec; - color: rgb(105, 3, 105); + background: #fff; + color: rgb(70, 82, 138); padding: 16px; font-size: 16px; font-family: 'Montserrat'; @@ -98,12 +98,12 @@ main { } .bubble { - background: #e6d7ec; + background: rgb(209, 215, 245); font-weight: 600; font-size: 16px; line-height: 26px; padding: 16px 24px; - color: rgb(105, 3, 105); + color: rgb(70, 82, 138); max-width: 40%; } @@ -115,13 +115,16 @@ main { .user-bubble { border-radius: 26px 0 26px 26px; margin-right: 8px; + background: rgb(70, 82, 138); + color: #fff; } .input-wrapper { display: flex; justify-content: center; - background: #e6d7ec; + background: #fff; overflow-x: hidden; + padding: 15px; } .input-wrapper form { @@ -134,15 +137,15 @@ label { font-size: 16px; font-family: 'Montserrat'; font-weight: 500; - color: #e6d7ec; + color: rgb(129, 133, 153); margin-right: 20px; } button { - background-color: rgb(105, 3, 105); + background-color: rgb(70, 82, 138); border: none; border-radius: 4px; - padding: 16px 20px; + padding: 10px 10px; margin-right: 4px; font-size: 16px; line-height: 26px; @@ -154,31 +157,57 @@ button { } button:hover { - opacity: 0.9; - transition: all 0.2s ease; + animation: bubble 0.4s ease-out; +} + +@keyframes bubble { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.2); + } + 100% { + transform: scale(1); + } } .option-buttons { - display: flex; - flex-flow: row wrap; - justify-content: space-evenly; + display: grid; + grid-template-columns: repeat(4, 1fr); + justify-content: space-between; width: 100%; - gap: 10px; + gap: 5px; } -/* Media query for screens smaller than 600px */ +/* Media query for screens smaller than 768px */ @media (max-width: 768px) { .option-buttons { - flex-direction: column; /* Stack buttons vertically */ + /* flex-direction: column; */ margin: 15px; - padding: 10px; /* Adjust padding for smaller screens */ + /* padding: 10px; */ + grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { p { - font-size: 16px; + font-size: 14px; +} } -} \ No newline at end of file + +@media (max-width: 768px) { + #name-input, + .input-wrapper #name-input { + font-size: 14px; + } +} + +@media (max-width: 300px) { + .option-buttons { + grid-template-columns: 1fr; + } +} + From 9b7fd82e0c68f91e9d42c8800761d6a5c1da372a Mon Sep 17 00:00:00 2001 From: Anna Hansen Date: Sun, 15 Sep 2024 17:04:48 +0200 Subject: [PATCH 05/19] updated readme --- README.md | 13 +++++++------ code/script.js | 5 +---- code/style.css | 3 ++- 3 files changed, 10 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 60f55e53..798d6730 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,14 @@ # Project Name -Replace this readme with your own information about your project. - -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +The second project of the Javascript sprint was to create a chat bot using functions, DOM selectors and conditionals. ## The problem -Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next? +I had a hard time getting started with this. I understand the overall logic but found it difficult to put everything in place. The most difficult part was to put together the ask question function and getting it to check correct answer. I needed a lot of help from chat gpt for that, also with the final score function. I also found it hard with the order of things and getting each step to work. -## View it live +I also watched the videos about DOMs and functions again to try to understand the whole concept and putting it together but I must say that I still am somewhat confused and need to read more about this. -Have you deployed your project somewhere? Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about. +If I had more time I would add a function to restart the quiz. I would also add some sounds since it is a music quiz, that could be fun. + +## View it live +https://musicmaven.netlify.app/ diff --git a/code/script.js b/code/script.js index 00f6f3a3..b5ba9afe 100644 --- a/code/script.js +++ b/code/script.js @@ -15,7 +15,7 @@ const Question1 = { } const Question2 = { - question: "Which song contains the lyrics 'Itยดs like ten thousand spoons when all you need is a knife'?", + question: "Which song has the lyrics: 'Itยดs like ten thousand spoons when all you need is a knife'?", options: ["Torn", "Ironic", "Killing me softly", "You learn"], correctAnswer: "Ironic" } @@ -57,9 +57,6 @@ const Question8= { } - - - // Array of questions const questions = [Question1, Question2, Question3, Question4, Question5, Question6, Question7, Question8]; diff --git a/code/style.css b/code/style.css index ba119997..61925213 100644 --- a/code/style.css +++ b/code/style.css @@ -145,7 +145,7 @@ button { background-color: rgb(70, 82, 138); border: none; border-radius: 4px; - padding: 10px 10px; + padding: 15px 15px; margin-right: 4px; font-size: 16px; line-height: 26px; @@ -195,6 +195,7 @@ button:hover { @media (max-width: 768px) { p { font-size: 14px; + align-items: center; } } From ab28d8cb9110e373a21ebe90be3191cd7fb4eade Mon Sep 17 00:00:00 2001 From: Anna Hansen Date: Sun, 15 Sep 2024 17:10:40 +0200 Subject: [PATCH 06/19] updated CSS padding buttons --- code/script.js | 116 ++++++++++++++++++++++++------------------------- code/style.css | 2 - 2 files changed, 58 insertions(+), 60 deletions(-) diff --git a/code/script.js b/code/script.js index b5ba9afe..10bba7ac 100644 --- a/code/script.js +++ b/code/script.js @@ -1,11 +1,11 @@ // DOM selectors (variables that point to selected DOM elements) goes here ๐Ÿ‘‡ -const chat = document.getElementById("chat"); -const inputWrapper = document.getElementById("input-wrapper"); -const form = document.getElementById("name-form"); -const nameInput = document.getElementById("name-input"); +const chat = document.getElementById("chat") +const inputWrapper = document.getElementById("input-wrapper") +const form = document.getElementById("name-form") +const nameInput = document.getElementById("name-input") -let currentQuestionNumber = 1; // Start with Question 1 -let score= 0; +let currentQuestionNumber = 1 // Start with Question 1 +let score= 0 // Question data const Question1 = { @@ -58,7 +58,7 @@ const Question8= { // Array of questions -const questions = [Question1, Question2, Question3, Question4, Question5, Question6, Question7, Question8]; +const questions = [Question1, Question2, Question3, Question4, Question5, Question6, Question7, Question8] // A function that will add a chat bubble in the correct place based on who the sender is const showMessage = (message, sender) => { @@ -70,7 +70,7 @@ const showMessage = (message, sender) => { User - `; + ` } else if (sender === 'bot') { chat.innerHTML += `
@@ -79,64 +79,64 @@ const showMessage = (message, sender) => {

${message}

- `; + ` } - chat.scrollTop = chat.scrollHeight; -}; + chat.scrollTop = chat.scrollHeight +} // A function to start the conversation const greetUser = () => { - showMessage("Hello there, what's your name?", 'bot'); + showMessage("Hello there, what's your name?", 'bot') // Show the name input field inputWrapper.innerHTML = ` - `; + ` document.getElementById('name-submit').addEventListener('click', () => { - const userName = document.getElementById('name-input').value; + const userName = document.getElementById('name-input').value if (userName) { - showMessage(userName, 'user'); + showMessage(userName, 'user') setTimeout(() => { - showMessage(`Nice to meet you, ${userName}! Are you ready for a quiz?`, 'bot'); - setTimeout(showYesNoButtons, 900); - }, 700); + showMessage(`Nice to meet you, ${userName}! Are you ready for a quiz?`, 'bot') + setTimeout(showYesNoButtons, 900) + }, 700) } - }); -}; + }) +} // Show Yes/No buttons for quiz confirmation const showYesNoButtons = () => { inputWrapper.innerHTML = ` - `; + ` - document.getElementById('yes').addEventListener('click', () => { - showMessage("Yes", "user"); - inputWrapper.innerHTML = ''; // Remove Yes/No buttons - setTimeout(() => askQuestion(), 1000); // Start the quiz - }); + document.getElementById("yes").addEventListener('click', () => { + showMessage("Yes", "user") + inputWrapper.innerHTML = '' // Remove Yes/No buttons + setTimeout(() => askQuestion(), 1000) // Start the quiz + }) document.getElementById('no').addEventListener('click', () => { - showMessage("No", "user"); + showMessage("No", "user") setTimeout(() => { - showMessage("Ok, see you another time!", 'bot'); - inputWrapper.innerHTML = ''; // Clear buttons - }, 700); - }); -}; + showMessage("Ok, see you another time!", 'bot') + inputWrapper.innerHTML = '' // Clear buttons + }, 700) + }) +} // Scroll down the chat window after buttons have loaded -chat.scrollTop = chat.scrollHeight; +chat.scrollTop = chat.scrollHeight // Ask the current question and show answer options const askQuestion = () => { - const currentQuestion = questions[currentQuestionNumber - 1]; + const currentQuestion = questions[currentQuestionNumber - 1] if (currentQuestion) { - showMessage(currentQuestion.question, 'bot'); + showMessage(currentQuestion.question, 'bot') // Show options as buttons. Each button has a unique id (option-0, option-1, option-2, option-3, for example for question nr 1-option 0 is Britney Spears, option1 is Christina Aguilera etc. ${currentQuestion.options[0]}, ${currentQuestion.options[1]}, etc., are placeholders that get replaced with the actual options for the current question. @@ -147,60 +147,60 @@ const askQuestion = () => { - `; + ` // Scroll down the chat window after buttons have loaded -chat.scrollTop = chat.scrollHeight; +chat.scrollTop = chat.scrollHeight // Add event listeners to the buttons currentQuestion.options.forEach((option, index) => { document.getElementById(`option-${index}`).addEventListener('click', () => { - showMessage(option, 'user'); - checkAnswer(option); // Check the selected answer - }); - }); + showMessage(option, 'user') + checkAnswer(option) // Check the selected answer + }) + }) } else { // If there are no more questions, end the quiz - showMessage("Quiz finished! Thanks for playing.", 'bot'); - inputWrapper.innerHTML = ''; // Clear buttons after the quiz ends + showMessage("Quiz finished! Thanks for playing.", 'bot') + inputWrapper.innerHTML = '' // Clear buttons after the quiz ends } -}; +} // Check the user's answer and move to the next question const checkAnswer = (selectedOption) => { - const currentQuestion = questions[currentQuestionNumber - 1]; + const currentQuestion = questions[currentQuestionNumber - 1] if (selectedOption === currentQuestion.correctAnswer) { - showMessage("Correct!", 'bot'); - score++; // Increment the score for a correct answer + showMessage("Correct!", 'bot') + score++ // Increment the score for a correct answer } else { - showMessage(`Wrong! The correct answer is ${currentQuestion.correctAnswer}.`, 'bot'); + showMessage(`Wrong! The correct answer is ${currentQuestion.correctAnswer}.`, 'bot') } // After answering, move to the next question if there are more questions setTimeout(() => { - inputWrapper.innerHTML = ''; // Clear buttons after selecting an answer - currentQuestionNumber++; // Increment the question number + inputWrapper.innerHTML = '' // Clear buttons after selecting an answer + currentQuestionNumber++ // Increment the question number if (currentQuestionNumber <= questions.length) { - askQuestion(); // Ask the next question + askQuestion() // Ask the next question } else { - showFinalScore(); // Show the final score at the end + showFinalScore() // Show the final score at the end } - }, 900); // Timeout -}; + }, 900) // Timeout +} // Function to display the final score const showFinalScore = () => { - showMessage(`Quiz finished! You got ${score} out of ${questions.length} correct. Thanks for playing!`, 'bot'); - inputWrapper.innerHTML = ''; // Clear buttons after the quiz ends -}; + showMessage(`Quiz finished! You got ${score} out of ${questions.length} correct. Thanks for playing!`, 'bot') + inputWrapper.innerHTML = '' // Clear buttons after the quiz ends +} // Start the conversation -setTimeout(greetUser, 900); +setTimeout(greetUser, 900) diff --git a/code/style.css b/code/style.css index 61925213..190cd11c 100644 --- a/code/style.css +++ b/code/style.css @@ -184,9 +184,7 @@ button:hover { /* Media query for screens smaller than 768px */ @media (max-width: 768px) { .option-buttons { - /* flex-direction: column; */ margin: 15px; - /* padding: 10px; */ grid-template-columns: repeat(2, 1fr); } } From 140c1f5e8641497c2e651862dfc5f00f2c36d860 Mon Sep 17 00:00:00 2001 From: Anna Hansen Date: Sun, 15 Sep 2024 19:36:05 +0200 Subject: [PATCH 07/19] changed font and tried to remove horizontal scroll --- code/index.html | 3 +++ code/script.js | 3 +++ code/style.css | 5 +++-- 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/code/index.html b/code/index.html index 7650031d..be1d5caf 100644 --- a/code/index.html +++ b/code/index.html @@ -8,6 +8,9 @@ + + + Music Maven diff --git a/code/script.js b/code/script.js index 10bba7ac..2b1a55d7 100644 --- a/code/script.js +++ b/code/script.js @@ -93,6 +93,7 @@ const greetUser = () => { ` + document.getElementById('name-submit').addEventListener('click', () => { const userName = document.getElementById('name-input').value @@ -106,6 +107,8 @@ const greetUser = () => { }) } +chat.scrollTop = chat.scrollHeight + // Show Yes/No buttons for quiz confirmation const showYesNoButtons = () => { inputWrapper.innerHTML = ` diff --git a/code/style.css b/code/style.css index 190cd11c..7149b0e3 100644 --- a/code/style.css +++ b/code/style.css @@ -10,14 +10,14 @@ body { } h1 { - font-weight: bold; + font-weight: bolder; font-size: 35px; line-height: 34px; color: #fff; text-align: center; padding-top: 25px; margin: 0; - font-family: cursive; + font-family: 'Poppins' } h2 { @@ -131,6 +131,7 @@ main { width: 100%; display: flex; align-items: center; + overflow-x: hidden; } label { From 94151b2fb87f6bd990237cbac29d66342a45733f Mon Sep 17 00:00:00 2001 From: Anna Hansen Date: Sun, 15 Sep 2024 19:42:54 +0200 Subject: [PATCH 08/19] increased the size of the bot and user img --- code/style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/style.css b/code/style.css index 7149b0e3..341c2456 100644 --- a/code/style.css +++ b/code/style.css @@ -93,8 +93,8 @@ main { .bot-msg img, .user-msg img { - width: 60px; - height: 60px; + width: 75px; + height: 75px; } .bubble { From 270a963fc669d4f68fc16b8a39a3576ac6a02ad5 Mon Sep 17 00:00:00 2001 From: Anna Hansen Date: Sun, 15 Sep 2024 19:54:05 +0200 Subject: [PATCH 09/19] changed bubble padding --- code/style.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/code/style.css b/code/style.css index 341c2456..cda32fe3 100644 --- a/code/style.css +++ b/code/style.css @@ -7,6 +7,7 @@ body { padding: 0; font-family: 'Montserrat', sans-serif; background: rgb(70, 82, 138); + overflow-x: hidden; } h1 { @@ -102,7 +103,7 @@ main { font-weight: 600; font-size: 16px; line-height: 26px; - padding: 16px 24px; + padding: 15px; color: rgb(70, 82, 138); max-width: 40%; } From 94515bc62256b67a77d8955b4ef1a3c9b38b1507 Mon Sep 17 00:00:00 2001 From: Anna Hansen Date: Sun, 15 Sep 2024 20:05:13 +0200 Subject: [PATCH 10/19] small fixes --- code/index.html | 2 ++ code/style.css | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/code/index.html b/code/index.html index be1d5caf..05c5a9e7 100644 --- a/code/index.html +++ b/code/index.html @@ -15,8 +15,10 @@ +

Music Maven

Test your knowledge about music

+
diff --git a/code/style.css b/code/style.css index cda32fe3..3025b8cc 100644 --- a/code/style.css +++ b/code/style.css @@ -67,7 +67,7 @@ main { box-sizing: border-box; display: flex; flex-direction: column; - overflow-x: hidden; + overflow: hidden; } .chat { From 849e272800987f965e07e3fb5aa8a887a09fa527 Mon Sep 17 00:00:00 2001 From: Anna Hansen Date: Sun, 15 Sep 2024 22:08:50 +0200 Subject: [PATCH 11/19] small fixes in CSS --- code/style.css | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/code/style.css b/code/style.css index 3025b8cc..11f6e063 100644 --- a/code/style.css +++ b/code/style.css @@ -58,8 +58,8 @@ input, main { margin: 0 auto; width: 100%; - max-width: 700px; - height: 600px; + max-width: 600px; + height: 500px; border-radius: 30px; background: #fff; padding: 20px 24px; @@ -103,7 +103,7 @@ main { font-weight: 600; font-size: 16px; line-height: 26px; - padding: 15px; + padding: 20px; color: rgb(70, 82, 138); max-width: 40%; } @@ -133,6 +133,8 @@ main { display: flex; align-items: center; overflow-x: hidden; + max-width: 600px; + height: 500px; } label { From 1d832d73a5817aabdadf77ea3c8d26d544ba934c Mon Sep 17 00:00:00 2001 From: Anna Hansen Date: Sun, 15 Sep 2024 22:15:14 +0200 Subject: [PATCH 12/19] fix --- code/style.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/code/style.css b/code/style.css index 11f6e063..db8e4914 100644 --- a/code/style.css +++ b/code/style.css @@ -7,7 +7,7 @@ body { padding: 0; font-family: 'Montserrat', sans-serif; background: rgb(70, 82, 138); - overflow-x: hidden; + overflow: hidden; } h1 { @@ -67,7 +67,6 @@ main { box-sizing: border-box; display: flex; flex-direction: column; - overflow: hidden; } .chat { From 927f50534dc9be81ed6e6c00689453daf0f8cfff Mon Sep 17 00:00:00 2001 From: Anna Hansen Date: Sun, 15 Sep 2024 23:42:11 +0200 Subject: [PATCH 13/19] fixes to CSS max-widthand overflow --- code/script.js | 9 ++++++--- code/style.css | 32 ++++++++++++++++++++------------ 2 files changed, 26 insertions(+), 15 deletions(-) diff --git a/code/script.js b/code/script.js index 2b1a55d7..85e3568c 100644 --- a/code/script.js +++ b/code/script.js @@ -150,9 +150,7 @@ const askQuestion = () => {
- ` - - + ` // Scroll down the chat window after buttons have loaded chat.scrollTop = chat.scrollHeight @@ -173,6 +171,7 @@ chat.scrollTop = chat.scrollHeight // Check the user's answer and move to the next question const checkAnswer = (selectedOption) => { + setTimeout(() => { const currentQuestion = questions[currentQuestionNumber - 1] if (selectedOption === currentQuestion.correctAnswer) { @@ -181,6 +180,8 @@ const checkAnswer = (selectedOption) => { } else { showMessage(`Wrong! The correct answer is ${currentQuestion.correctAnswer}.`, 'bot') } +}, 900) + // After answering, move to the next question if there are more questions setTimeout(() => { @@ -198,8 +199,10 @@ const checkAnswer = (selectedOption) => { // Function to display the final score const showFinalScore = () => { + setTimeout(() => { showMessage(`Quiz finished! You got ${score} out of ${questions.length} correct. Thanks for playing!`, 'bot') inputWrapper.innerHTML = '' // Clear buttons after the quiz ends +}, 900) // Timeout } // Start the conversation diff --git a/code/style.css b/code/style.css index db8e4914..350cb043 100644 --- a/code/style.css +++ b/code/style.css @@ -7,7 +7,7 @@ body { padding: 0; font-family: 'Montserrat', sans-serif; background: rgb(70, 82, 138); - overflow: hidden; + overflow-x: hidden; } h1 { @@ -50,16 +50,16 @@ input, font-weight: 600; line-height: 26px; flex: 1; - width: 100%; + max-width: 100%; } main { margin: 0 auto; - width: 100%; - max-width: 600px; - height: 500px; + /* width: 100%; */ + max-width: 700px; + height: 600px; border-radius: 30px; background: #fff; padding: 20px 24px; @@ -67,15 +67,17 @@ main { box-sizing: border-box; display: flex; flex-direction: column; + overflow-x: hidden; } .chat { flex: 1; display: flex; justify-content: flex-start; - overflow: scroll; + /* overflow: scroll; */ flex-direction: column; padding-bottom: 16px; + overflow-x: hidden; } .bot-msg { @@ -128,12 +130,10 @@ main { } .input-wrapper form { - width: 100%; + max-width: 100%; display: flex; align-items: center; overflow-x: hidden; - max-width: 600px; - height: 500px; } label { @@ -148,7 +148,7 @@ button { background-color: rgb(70, 82, 138); border: none; border-radius: 4px; - padding: 15px 15px; + padding: 20px 20px; margin-right: 4px; font-size: 16px; line-height: 26px; @@ -184,6 +184,14 @@ button:hover { } +/* Media query for screens smaller than 1200px */ +@media (max-width: 1200px) { + .option-buttons { + margin: 15px; + grid-template-columns: repeat(4, 1fr); +} +} + /* Media query for screens smaller than 768px */ @media (max-width: 768px) { .option-buttons { @@ -192,7 +200,6 @@ button:hover { } } - @media (max-width: 768px) { p { font-size: 14px; @@ -207,7 +214,8 @@ button:hover { } } -@media (max-width: 300px) { + +@media (max-width: 480px) { .option-buttons { grid-template-columns: 1fr; } From 462c40793d684c155ed4864681631b6f6b06461c Mon Sep 17 00:00:00 2001 From: Anna Hansen Date: Mon, 16 Sep 2024 00:02:48 +0200 Subject: [PATCH 14/19] fix --- code/script.js | 2 +- code/style.css | 5 ++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/code/script.js b/code/script.js index 85e3568c..75e7e441 100644 --- a/code/script.js +++ b/code/script.js @@ -152,7 +152,7 @@ const askQuestion = () => { ` // Scroll down the chat window after buttons have loaded -chat.scrollTop = chat.scrollHeight + chat.scrollTop = chat.scrollHeight // Add event listeners to the buttons diff --git a/code/style.css b/code/style.css index 350cb043..023d4788 100644 --- a/code/style.css +++ b/code/style.css @@ -74,7 +74,6 @@ main { flex: 1; display: flex; justify-content: flex-start; - /* overflow: scroll; */ flex-direction: column; padding-bottom: 16px; overflow-x: hidden; @@ -126,7 +125,7 @@ main { justify-content: center; background: #fff; overflow-x: hidden; - padding: 15px; + padding: 10px; } .input-wrapper form { @@ -179,7 +178,7 @@ button:hover { display: grid; grid-template-columns: repeat(4, 1fr); justify-content: space-between; - width: 100%; + max-width: 100%; gap: 5px; } From d5d491eade081d8d6e4637fcbd636c01732a2874 Mon Sep 17 00:00:00 2001 From: Anna Hansen Date: Mon, 16 Sep 2024 00:34:22 +0200 Subject: [PATCH 15/19] removed extras --- code/script.js | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/code/script.js b/code/script.js index 75e7e441..5f22f506 100644 --- a/code/script.js +++ b/code/script.js @@ -81,8 +81,11 @@ const showMessage = (message, sender) => { ` } - chat.scrollTop = chat.scrollHeight -} + // Scroll only after new content has been added + setTimeout(() => { + chat.scrollTop = chat.scrollHeight; + }, 100); +}; // A function to start the conversation const greetUser = () => { @@ -93,7 +96,6 @@ const greetUser = () => { ` - document.getElementById('name-submit').addEventListener('click', () => { const userName = document.getElementById('name-input').value @@ -107,7 +109,6 @@ const greetUser = () => { }) } -chat.scrollTop = chat.scrollHeight // Show Yes/No buttons for quiz confirmation const showYesNoButtons = () => { @@ -131,8 +132,7 @@ const showYesNoButtons = () => { }) } -// Scroll down the chat window after buttons have loaded -chat.scrollTop = chat.scrollHeight + // Ask the current question and show answer options const askQuestion = () => { @@ -151,8 +151,8 @@ const askQuestion = () => { ` -// Scroll down the chat window after buttons have loaded - chat.scrollTop = chat.scrollHeight +// // Scroll down the chat window after buttons have loaded +// chat.scrollTop = chat.scrollHeight // Add event listeners to the buttons @@ -180,6 +180,10 @@ const checkAnswer = (selectedOption) => { } else { showMessage(`Wrong! The correct answer is ${currentQuestion.correctAnswer}.`, 'bot') } + +// // Ensure scrolling is handled after showing feedback +// chat.scrollTop = chat.scrollHeight; + }, 900) From 875af7390d6b7977a1da7df68c2c2785a93da3c3 Mon Sep 17 00:00:00 2001 From: Anna Hansen Date: Mon, 16 Sep 2024 10:19:26 +0200 Subject: [PATCH 16/19] try to fix responsiveness again --- code/script.js | 7 ------- code/style.css | 14 ++++++++------ 2 files changed, 8 insertions(+), 13 deletions(-) diff --git a/code/script.js b/code/script.js index 5f22f506..1c0ebc47 100644 --- a/code/script.js +++ b/code/script.js @@ -151,9 +151,6 @@ const askQuestion = () => { ` -// // Scroll down the chat window after buttons have loaded -// chat.scrollTop = chat.scrollHeight - // Add event listeners to the buttons currentQuestion.options.forEach((option, index) => { @@ -180,10 +177,6 @@ const checkAnswer = (selectedOption) => { } else { showMessage(`Wrong! The correct answer is ${currentQuestion.correctAnswer}.`, 'bot') } - -// // Ensure scrolling is handled after showing feedback -// chat.scrollTop = chat.scrollHeight; - }, 900) diff --git a/code/style.css b/code/style.css index 023d4788..431ecb9f 100644 --- a/code/style.css +++ b/code/style.css @@ -7,6 +7,7 @@ body { padding: 0; font-family: 'Montserrat', sans-serif; background: rgb(70, 82, 138); + max-height: 100%; overflow-x: hidden; } @@ -57,7 +58,7 @@ input, main { margin: 0 auto; - /* width: 100%; */ + width: 100%; max-width: 700px; height: 600px; border-radius: 30px; @@ -76,7 +77,11 @@ main { justify-content: flex-start; flex-direction: column; padding-bottom: 16px; - overflow-x: hidden; + overflow: scroll; +} + +#chat { + overflow-y: auto; } .bot-msg { @@ -103,7 +108,7 @@ main { font-weight: 600; font-size: 16px; line-height: 26px; - padding: 20px; + padding: 16px 24px; color: rgb(70, 82, 138); max-width: 40%; } @@ -124,15 +129,12 @@ main { display: flex; justify-content: center; background: #fff; - overflow-x: hidden; - padding: 10px; } .input-wrapper form { max-width: 100%; display: flex; align-items: center; - overflow-x: hidden; } label { From 598cf950ba9edb91314518a455dda9dbf7d06891 Mon Sep 17 00:00:00 2001 From: Anna Hansen Date: Mon, 16 Sep 2024 11:59:06 +0200 Subject: [PATCH 17/19] added flex-grow to the chat section --- code/style.css | 35 ++++++++++++++++++++++++----------- 1 file changed, 24 insertions(+), 11 deletions(-) diff --git a/code/style.css b/code/style.css index 431ecb9f..37c3be5b 100644 --- a/code/style.css +++ b/code/style.css @@ -7,7 +7,6 @@ body { padding: 0; font-family: 'Montserrat', sans-serif; background: rgb(70, 82, 138); - max-height: 100%; overflow-x: hidden; } @@ -58,7 +57,7 @@ input, main { margin: 0 auto; - width: 100%; + /* width: 100%; */ max-width: 700px; height: 600px; border-radius: 30px; @@ -72,15 +71,10 @@ main { } .chat { - flex: 1; - display: flex; + flex-grow: 1; justify-content: flex-start; flex-direction: column; padding-bottom: 16px; - overflow: scroll; -} - -#chat { overflow-y: auto; } @@ -108,7 +102,7 @@ main { font-weight: 600; font-size: 16px; line-height: 26px; - padding: 16px 24px; + padding: 20px; color: rgb(70, 82, 138); max-width: 40%; } @@ -127,23 +121,27 @@ main { .input-wrapper { display: flex; + max-width: 100%; justify-content: center; background: #fff; + overflow-x: hidden; + padding: 10px; } .input-wrapper form { max-width: 100%; display: flex; align-items: center; + overflow-x: hidden; } -label { +/* label { font-size: 16px; font-family: 'Montserrat'; font-weight: 500; color: rgb(129, 133, 153); margin-right: 20px; -} +} */ button { background-color: rgb(70, 82, 138); @@ -222,3 +220,18 @@ button:hover { } } +/* Media query for mobile (screens less than 768px) */ +@media (max-width: 768px) { + main { + height: auto; /* Let height adjust dynamically */ + } + + .chat { + flex: 4; /* Chat section takes more space on mobile */ + } + + .input-wrapper { + flex: 1; /* Buttons take up less space */ + } +} + From 04baca4fa1706b0d31d579ba602b98eed4de0c82 Mon Sep 17 00:00:00 2001 From: Anna Hansen Date: Mon, 16 Sep 2024 12:04:02 +0200 Subject: [PATCH 18/19] fix --- code/style.css | 1 - 1 file changed, 1 deletion(-) diff --git a/code/style.css b/code/style.css index 37c3be5b..eb27793f 100644 --- a/code/style.css +++ b/code/style.css @@ -124,7 +124,6 @@ main { max-width: 100%; justify-content: center; background: #fff; - overflow-x: hidden; padding: 10px; } From a734b5fde685407da0757b58a62cfb447e914f62 Mon Sep 17 00:00:00 2001 From: Anna Hansen Date: Thu, 26 Sep 2024 11:07:31 +0200 Subject: [PATCH 19/19] fixed bug in JS code, answers revealed when double clicking on buttons --- .vscode/settings.json | 3 + code/index.html | 2 +- code/script.js | 301 ++++++++++++++++++++++++++++++++++++++---- code/style.css | 10 -- 4 files changed, 276 insertions(+), 40 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..f673a71b --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5502 +} \ No newline at end of file diff --git a/code/index.html b/code/index.html index 05c5a9e7..b44ee077 100644 --- a/code/index.html +++ b/code/index.html @@ -23,7 +23,7 @@

Test your knowledge about music

- +
diff --git a/code/script.js b/code/script.js index 1c0ebc47..8573a53c 100644 --- a/code/script.js +++ b/code/script.js @@ -5,7 +5,7 @@ const form = document.getElementById("name-form") const nameInput = document.getElementById("name-input") let currentQuestionNumber = 1 // Start with Question 1 -let score= 0 +let score = 0 // Question data const Question1 = { @@ -56,7 +56,6 @@ const Question8= { correctAnswer: "Kelly Clarkson" } - // Array of questions const questions = [Question1, Question2, Question3, Question4, Question5, Question6, Question7, Question8] @@ -109,7 +108,6 @@ const greetUser = () => { }) } - // Show Yes/No buttons for quiz confirmation const showYesNoButtons = () => { inputWrapper.innerHTML = ` @@ -132,8 +130,6 @@ const showYesNoButtons = () => { }) } - - // Ask the current question and show answer options const askQuestion = () => { const currentQuestion = questions[currentQuestionNumber - 1] @@ -141,24 +137,28 @@ const askQuestion = () => { if (currentQuestion) { showMessage(currentQuestion.question, 'bot') - // Show options as buttons. Each button has a unique id (option-0, option-1, option-2, option-3, for example for question nr 1-option 0 is Britney Spears, option1 is Christina Aguilera etc. ${currentQuestion.options[0]}, ${currentQuestion.options[1]}, etc., are placeholders that get replaced with the actual options for the current question. - + // Show options as buttons inputWrapper.innerHTML = `
- - - - + + + +
` // Add event listeners to the buttons currentQuestion.options.forEach((option, index) => { - document.getElementById(`option-${index}`).addEventListener('click', () => { - showMessage(option, 'user') - checkAnswer(option) // Check the selected answer - }) - }) + const optionButton = document.getElementById(`option-${index}`); + + optionButton.addEventListener('click', () => { + // Disable buttons after one is clicked + disableButtons(); + + showMessage(option, 'user'); + checkAnswer(option); // Check the selected answer + }); + }); } else { // If there are no more questions, end the quiz showMessage("Quiz finished! Thanks for playing.", 'bot') @@ -166,19 +166,26 @@ const askQuestion = () => { } } +// Function to disable all answer buttons after one is clicked +const disableButtons = () => { + const buttons = document.querySelectorAll(".option-buttons button"); + buttons.forEach(button => { + button.disabled = true; // Disable the button + }); +} + // Check the user's answer and move to the next question const checkAnswer = (selectedOption) => { setTimeout(() => { - const currentQuestion = questions[currentQuestionNumber - 1] - - if (selectedOption === currentQuestion.correctAnswer) { - showMessage("Correct!", 'bot') - score++ // Increment the score for a correct answer - } else { - showMessage(`Wrong! The correct answer is ${currentQuestion.correctAnswer}.`, 'bot') - } -}, 900) + const currentQuestion = questions[currentQuestionNumber - 1] + if (selectedOption === currentQuestion.correctAnswer) { + showMessage("Correct!", 'bot') + score++ // Increment the score for a correct answer + } else { + showMessage(`Wrong! The correct answer is ${currentQuestion.correctAnswer}.`, 'bot') + } + }, 900) // After answering, move to the next question if there are more questions setTimeout(() => { @@ -189,7 +196,6 @@ const checkAnswer = (selectedOption) => { askQuestion() // Ask the next question } else { showFinalScore() // Show the final score at the end - } }, 900) // Timeout } @@ -197,9 +203,9 @@ const checkAnswer = (selectedOption) => { // Function to display the final score const showFinalScore = () => { setTimeout(() => { - showMessage(`Quiz finished! You got ${score} out of ${questions.length} correct. Thanks for playing!`, 'bot') - inputWrapper.innerHTML = '' // Clear buttons after the quiz ends -}, 900) // Timeout + showMessage(`Quiz finished! You got ${score} out of ${questions.length} correct. Thanks for playing!`, 'bot') + inputWrapper.innerHTML = '' // Clear buttons after the quiz ends + }, 900) // Timeout } // Start the conversation @@ -224,6 +230,243 @@ setTimeout(greetUser, 900) + + + + + + + + + + + + + + +// // DOM selectors (variables that point to selected DOM elements) goes here ๐Ÿ‘‡ +// const chat = document.getElementById("chat") +// const inputWrapper = document.getElementById("input-wrapper") +// const form = document.getElementById("name-form") +// const nameInput = document.getElementById("name-input") + +// let currentQuestionNumber = 1 // Start with Question 1 +// let score= 0 + +// // Question data +// const Question1 = { +// question: "Who released a single in 1999 called Genie In a Bottle?", +// options: ["Britney Spears", "Christina Aguilera", "Robyn", "Corona"], +// correctAnswer: "Christina Aguilera" +// } + +// const Question2 = { +// question: "Which song has the lyrics: 'Itยดs like ten thousand spoons when all you need is a knife'?", +// options: ["Torn", "Ironic", "Killing me softly", "You learn"], +// correctAnswer: "Ironic" +// } + +// const Question3 = { +// question: "Who wrote the song 'I will always love you'?", +// options: ["Whitney Houston", "Celine Dion", "Dolly Parton", "Mariah Carey"], +// correctAnswer: "Dolly Parton" +// } + +// const Question4= { +// question: "Which artist has not competed in the Eurovision Song Contest?", +// options: ["Celine Dion", "Julio Iglesias", "Bonnie Tyler", "Vanessa Paradis"], +// correctAnswer: "Vanessa Paradis" +// } + +// const Question5= { +// question: "Who is the composer of 'Moonlight Sonata'?", +// options: ["Bach", "Beethoven", "Mozart", "Hendel"], +// correctAnswer: "Beethoven" +// } + +// const Question6= { +// question: "What band was Kurt Cobain the lead singer of?", +// options: ["Pearl Jam", "Nirvana", "Soundgarden", "Hole"], +// correctAnswer: "Nirvana" +// } + +// const Question7= { +// question: "Which artist had a 2019 hit with the song 'Bad Guy'?", +// options: ["Billie Eilish", "Ariana Grande", "Selena Gomez", "Lizzo"], +// correctAnswer: "Billie Eilish" +// } + +// const Question8= { +// question: "Who won the first season of American Idol?", +// options: ["Jennifer Hudson", "Adam Lambert", "Kelly Clarkson", "Carrie Underwood"], +// correctAnswer: "Kelly Clarkson" +// } + + +// // Array of questions +// const questions = [Question1, Question2, Question3, Question4, Question5, Question6, Question7, Question8] + +// // A function that will add a chat bubble in the correct place based on who the sender is +// const showMessage = (message, sender) => { +// if (sender === 'user') { +// chat.innerHTML += ` +//
+//
+//

${message}

+//
+// User +//
+// ` +// } else if (sender === 'bot') { +// chat.innerHTML += ` +//
+// Bot +//
+//

${message}

+//
+//
+// ` +// } +// // Scroll only after new content has been added +// setTimeout(() => { +// chat.scrollTop = chat.scrollHeight; +// }, 100); +// }; + +// // A function to start the conversation +// const greetUser = () => { +// showMessage("Hello there, what's your name?", 'bot') + +// // Show the name input field +// inputWrapper.innerHTML = ` +// +// +// ` + +// document.getElementById('name-submit').addEventListener('click', () => { +// const userName = document.getElementById('name-input').value +// if (userName) { +// showMessage(userName, 'user') +// setTimeout(() => { +// showMessage(`Nice to meet you, ${userName}! Are you ready for a quiz?`, 'bot') +// setTimeout(showYesNoButtons, 900) +// }, 700) +// } +// }) +// } + +// // Show Yes/No buttons for quiz confirmation +// const showYesNoButtons = () => { +// inputWrapper.innerHTML = ` +// +// +// ` + +// document.getElementById("yes").addEventListener('click', () => { +// showMessage("Yes", "user") +// inputWrapper.innerHTML = '' // Remove Yes/No buttons +// setTimeout(() => askQuestion(), 1000) // Start the quiz +// }) + +// document.getElementById('no').addEventListener('click', () => { +// showMessage("No", "user") +// setTimeout(() => { +// showMessage("Ok, see you another time!", 'bot') +// inputWrapper.innerHTML = '' // Clear buttons +// }, 700) +// }) +// } + +// // Ask the current question and show answer options +// const askQuestion = () => { +// const currentQuestion = questions[currentQuestionNumber - 1] + +// if (currentQuestion) { +// showMessage(currentQuestion.question, 'bot') + +// // Show options as buttons. Each button has a unique id (option-0, option-1, option-2, option-3, for example for question nr 1-option 0 is Britney Spears, option1 is Christina Aguilera etc. ${currentQuestion.options[0]}, ${currentQuestion.options[1]}, etc., are placeholders that get replaced with the actual options for the current question. + +// inputWrapper.innerHTML = ` +//
+// +// +// +// +//
+// ` + +// // Add event listeners to the buttons +// currentQuestion.options.forEach((option, index) => { +// document.getElementById(`option-${index}`).addEventListener('click', () => { +// showMessage(option, 'user') +// checkAnswer(option) // Check the selected answer +// }) +// }) +// } else { +// // If there are no more questions, end the quiz +// showMessage("Quiz finished! Thanks for playing.", 'bot') +// inputWrapper.innerHTML = '' // Clear buttons after the quiz ends +// } +// } + +// // Check the user's answer and move to the next question +// const checkAnswer = (selectedOption) => { +// setTimeout(() => { +// const currentQuestion = questions[currentQuestionNumber - 1] + +// if (selectedOption === currentQuestion.correctAnswer) { +// showMessage("Correct!", 'bot') +// score++ // Increment the score for a correct answer +// } else { +// showMessage(`Wrong! The correct answer is ${currentQuestion.correctAnswer}.`, 'bot') +// } +// }, 900) + + +// // After answering, move to the next question if there are more questions +// setTimeout(() => { +// inputWrapper.innerHTML = '' // Clear buttons after selecting an answer +// currentQuestionNumber++ // Increment the question number + +// if (currentQuestionNumber <= questions.length) { +// askQuestion() // Ask the next question +// } else { +// showFinalScore() // Show the final score at the end + +// } +// }, 900) // Timeout +// } + +// // Function to display the final score +// const showFinalScore = () => { +// setTimeout(() => { +// showMessage(`Quiz finished! You got ${score} out of ${questions.length} correct. Thanks for playing!`, 'bot') +// inputWrapper.innerHTML = '' // Clear buttons after the quiz ends +// }, 900) // Timeout +// } + +// // Start the conversation +// setTimeout(greetUser, 900) + + + + + + + + + + + + + + + + + + + + diff --git a/code/style.css b/code/style.css index eb27793f..a970d28b 100644 --- a/code/style.css +++ b/code/style.css @@ -57,7 +57,6 @@ input, main { margin: 0 auto; - /* width: 100%; */ max-width: 700px; height: 600px; border-radius: 30px; @@ -134,14 +133,6 @@ main { overflow-x: hidden; } -/* label { - font-size: 16px; - font-family: 'Montserrat'; - font-weight: 500; - color: rgb(129, 133, 153); - margin-right: 20px; -} */ - button { background-color: rgb(70, 82, 138); border: none; @@ -219,7 +210,6 @@ button:hover { } } -/* Media query for mobile (screens less than 768px) */ @media (max-width: 768px) { main { height: auto; /* Let height adjust dynamically */