-
Notifications
You must be signed in to change notification settings - Fork 163
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
33 changed files
with
1,619 additions
and
15 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| # **Angry Bird game** | ||
|
|
||
| --- | ||
|
|
||
| <br> | ||
|
|
||
| ## **Description 📃** | ||
|
|
||
| In Angry Birds, players control a group of colorful birds with different abilities who are seeking revenge on a group of green pigs that have stolen their eggs. The objective of the game is to launch the birds from a slingshot and strategically destroy various structures and obstacles in order to eliminate the pigs and retrieve the stolen eggs. | ||
|
|
||
| ## **How to play? 🕹️** | ||
| - Use the mouse to launch the birds from a slingshot | ||
|
|
||
| ## **Screenshot | ||
|  | ||
|
|
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Quiz</title> | ||
| <link rel="stylesheet" href="style.css"> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" /> | ||
| </head> | ||
| <body> | ||
|
|
||
| <!-- Start Quiz Button --> | ||
| <div class="start_btn"><button>Start Quiz</button></div> | ||
|
|
||
| <!-- Quiz Box --> | ||
| <div class="quiz_box"> | ||
| <header> | ||
| <div class="title">Awesome Quiz Application</div> | ||
| <div class="timer"> | ||
| <div class="time_text">Time Left</div> | ||
| <div class="time_sec">15</div> | ||
| </div> | ||
| <div class="time_line"></div> | ||
| </header> | ||
|
|
||
| <section> | ||
| <div class="que_text"> | ||
| <span>What does HTML stand for?</span> | ||
| </div> | ||
| <div class="option_list"> | ||
| <!-- <div class="option"> | ||
| <span>Hyper Text Preprocessor</span> | ||
| <div class="icon tick"><i class="fas fa-check"></i></div> | ||
| </div> | ||
| <div class="option"> | ||
| <span>Hyper Text Markup Language</span> | ||
| <div class="icon cross"><i class="fas fa-times"></i></div> | ||
| </div> | ||
| <div class="option"> | ||
| <span>Hyper Text Multiple Language</span> | ||
| <div class="icon cross"><i class="fas fa-times"></i></div> | ||
| </div> | ||
| <div class="option"> | ||
| <span>Hyper Tool Multi Language</span> | ||
| <div class="icon cross"><i class="fas fa-times"></i></div> | ||
| </div> --> | ||
| </div> | ||
| </section> | ||
|
|
||
| <!-- Quiz Box Footer --> | ||
| <footer> | ||
| <div class="total_que"> | ||
| <!-- <span><p>2</p>of<p>5</p>Questions</span> --> | ||
| </div> | ||
| <button class="next_btn">Next Que</button> | ||
| </footer> | ||
| </div> | ||
|
|
||
| <!-- Result Box --> | ||
| <div class="result_box"> | ||
| <div class="icon"> | ||
| <i class="fas fa-crown"></i> | ||
| </div> | ||
| <div class="complete_text">You've completed the Quiz!</div> | ||
| <div class="score_text"> | ||
| <!-- <span>and Sorry, You got only <p>2</p> out of <p>5</p></span> --> | ||
| </div> | ||
| <div class="buttons"> | ||
| <button class="restart">Replay Quiz</button> | ||
| <button class="quit">Quit Quiz</button> | ||
| </div> | ||
| </div> | ||
|
|
||
| <script src="./js/questions.js"></script> | ||
| <script src="./js/script.js"></script> | ||
| </body> | ||
| </html> |
59 changes: 59 additions & 0 deletions
59
SinglePlayer - Games/General Knowledge Quiz/js/questions.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| //creating an array and passing the number, questions, and answers | ||
|
|
||
| let questions = [ | ||
| { | ||
| numb: 1, | ||
| question: "What does HTML stand for?", | ||
| answer: "Hyper Text Markup Language", | ||
| options: [ | ||
| "Hyper Text Preprocessor", | ||
| "Hyper Text Markup Language", | ||
| "Hyper Text Multiple Language", | ||
| "Hyper Tool Multi Language" | ||
| ] | ||
| }, | ||
| { | ||
| numb: 2, | ||
| question: "What does CSS stand for?", | ||
| answer: "Cascading Style Sheet", | ||
| options: [ | ||
| "Commomn Style Sheet", | ||
| "Colorful Style Sheet", | ||
| "Computer Style Sheet", | ||
| "Cascading Style Sheet" | ||
| ] | ||
| }, | ||
| { | ||
| numb: 3, | ||
| question: "What does PHP stand for?", | ||
| answer: "Hypertext Preprocessor", | ||
| options: [ | ||
| "Hypertext Preprocessor", | ||
| "Hypertext Programming", | ||
| "Hypertext Preprogramming", | ||
| "Hometext Preprocessor" | ||
| ] | ||
| }, | ||
| { | ||
| numb: 4, | ||
| question: "What does SQL stand for?", | ||
| answer: "Structured Query Language", | ||
| options: [ | ||
| "Stylish Question Language", | ||
| "Stylesheet Query Language", | ||
| "Statement Question Language", | ||
| "Structured Query Language" | ||
| ] | ||
| }, | ||
| { | ||
| numb: 5, | ||
| question: "What does XML stand for?", | ||
| answer: "eXtensible Markup Language", | ||
| options: [ | ||
| "eXtensible Markup Language", | ||
| "eXecutable Multiple Language", | ||
| "eXtra Multi-Program Language", | ||
| "eXamine Multiple Language" | ||
| ] | ||
| }, | ||
| ]; |
206 changes: 206 additions & 0 deletions
206
SinglePlayer - Games/General Knowledge Quiz/js/script.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,206 @@ | ||
| //getting all required elements | ||
| const start_btn = document.querySelector(".start_btn button"); | ||
| const quiz_box = document.querySelector(".quiz_box"); | ||
| const timeCount = quiz_box.querySelector(".timer .time_sec"); | ||
| const timeLine = quiz_box.querySelector("header .time_line"); | ||
| const timeOff = quiz_box.querySelector("header .time_text"); | ||
|
|
||
| const option_list = document.querySelector(".option_list"); | ||
|
|
||
|
|
||
|
|
||
| //If Start Quiz button clicked | ||
| start_btn.onclick = () => { | ||
| quiz_box.classList.add("activeQuiz"); //show the quiz now | ||
| showQuestions(0); | ||
| queCounter(1); | ||
| startTimer(15); | ||
| startTimerLine(0); | ||
| } | ||
|
|
||
| let que_count = 0; | ||
| let que_numb = 1; | ||
| let counter; | ||
| let counterLine; | ||
| let timeValue = 15; | ||
| let widthValue = 0; | ||
| let userScore = 0; | ||
|
|
||
|
|
||
| const next_btn = quiz_box.querySelector(".next_btn"); | ||
| const result_box = document.querySelector(".result_box"); | ||
| const restart_quiz = result_box.querySelector(".buttons .restart"); | ||
| const quit_quiz = result_box.querySelector(".buttons .quit"); | ||
|
|
||
| restart_quiz.onclick = () => { | ||
| quiz_box.classList.add("activeQuiz"); //show the quiz now | ||
| result_box.classList.remove("activeResult"); | ||
| let que_count = 0; | ||
| let que_numb = 1; | ||
| let timeValue = 15; | ||
| let widthValue = 0; | ||
| let userScore = 0; | ||
| showQuestions(que_count); | ||
| queCounter(que_numb); | ||
| clearInterval(counter); | ||
| startTimer(timeValue); | ||
| clearInterval(counterLine); | ||
| startTimerLine(widthValue); | ||
| next_btn.style.display = "none"; | ||
| timeOff.textContent = "Time Left"; | ||
| } | ||
|
|
||
|
|
||
|
|
||
| quit_quiz.onclick = () => { | ||
| window.location.reload(); | ||
| } | ||
|
|
||
| //If Next button clicked | ||
| next_btn.onclick = () => { | ||
| if(que_count < questions.length - 1){ | ||
| que_count++; | ||
| que_numb++; | ||
| showQuestions(que_count); | ||
| queCounter(que_numb); | ||
| clearInterval(counter); | ||
| startTimer(timeValue); | ||
| clearInterval(counterLine); | ||
| startTimerLine(widthValue); | ||
| next_btn.style.display = "none"; | ||
| timeOff.textContent = "Time Left"; | ||
| } | ||
| else{ | ||
| clearInterval(counter); | ||
| clearInterval(counterLine); | ||
| console.log("Questions completed"); | ||
| showResultBox(); | ||
| } | ||
| } | ||
|
|
||
| //getting questions and options from array | ||
| function showQuestions(index) { | ||
| const que_text = document.querySelector(".que_text"); | ||
| let que_tag = '<span>' + questions[index].numb + ". " + questions[index].question + '</span>'; | ||
| let option_tag = '<div class="option">' + questions[index].options[0] + '</span></div>' | ||
| + '<div class="option">' + questions[index].options[1] + '</span></div>' | ||
| + '<div class="option">' + questions[index].options[2] + '</span></div>' | ||
| + '<div class="option">' + questions[index].options[3] + '</span></div>'; | ||
| que_text.innerHTML = que_tag; | ||
| option_list.innerHTML = option_tag; | ||
|
|
||
| const option = option_list.querySelectorAll(".option"); | ||
| for (let i = 0; i < option.length; i++) { | ||
| option[i].setAttribute("onclick", "optionSelected(this)"); | ||
| } | ||
| } | ||
|
|
||
| let tickIcon = '<div class="icon tick"><i class="fas fa-check"></i></div>'; | ||
| let crossIcon = '<div class="icon cross"><i class="fas fa-times"></i></div>'; | ||
|
|
||
|
|
||
| function optionSelected(answer){ | ||
| clearInterval(counter); | ||
| clearInterval(counterLine); | ||
| let userAns = answer.textContent; | ||
| let correctAns = questions[que_count].answer; | ||
| let allOptions = option_list.children.length; | ||
| if(userAns == correctAns){ | ||
| userScore += 1; | ||
| console.log(userScore); | ||
| answer.classList.add("correct"); | ||
| console.log("Answer is Correct"); | ||
| answer.insertAdjacentHTML("beforeend", tickIcon); | ||
| } | ||
| else{ | ||
| answer.classList.add("incorrect"); | ||
| console.log("Answer is Wrong"); | ||
| answer.insertAdjacentHTML("beforeend", crossIcon); | ||
|
|
||
|
|
||
| //if answers is incorrect then autometically selected the correct ans | ||
| for (let i = 0; i < allOptions; i++) { | ||
| if (option_list.children[i].textContent == correctAns){ | ||
| option_list.children[i].setAttribute("class", "option correct"); | ||
| option_list.children[i].insertAdjacentHTML("beforeend", tickIcon); | ||
|
|
||
| } | ||
| } | ||
| } | ||
|
|
||
| //once user selected disabled all options | ||
| for (let i = 0; i < allOptions; i++){ | ||
| option_list.children[i].classList.add("disabled"); | ||
| } | ||
| next_btn.style.display = "block"; | ||
| } | ||
|
|
||
| function showResultBox(){ | ||
| quiz_box.classList.remove("activeQuiz"); //hide the quiz now | ||
| result_box.classList.add("activeResult"); //show the result now | ||
| const scoreText = result_box.querySelector(".score_text"); | ||
| if (userScore > 3){ | ||
| let scoreTag = '<span>and congrats! You got <p>'+ userScore +'</p> out of <p>'+ questions.length +'</p></span>'; | ||
| scoreText.innerHTML = scoreTag; | ||
| } | ||
| else if (userScore > 1){ | ||
| let scoreTag = '<span>and nice, You got <p>'+ userScore +'</p> out of <p>'+ questions.length +'</p></span>'; | ||
| scoreText.innerHTML = scoreTag; | ||
| } | ||
| else{ | ||
| let scoreTag = '<span>and sorry, You got only <p>'+ userScore +'</p> out of <p>'+ questions.length +'</p></span>'; | ||
| scoreText.innerHTML = scoreTag; | ||
| } | ||
| } | ||
|
|
||
| function startTimer(time){ | ||
| counter = setInterval(timer, 1000); | ||
| function timer(){ | ||
| timeCount.textContent = time; | ||
| time--; | ||
| if(time < 9){ | ||
| let addZero =timeCount.textContent; | ||
| timeCount.textContent = "0" + addZero; | ||
| } | ||
| if(time < 0){ | ||
| clearInterval(counter); | ||
| timeCount.textContent = "00"; | ||
| timeOff.textContent = "Time Off"; | ||
|
|
||
| let correctAns = questions[que_count].answer; | ||
| let allOptions = option_list.children.length; | ||
|
|
||
| for (let i = 0; i < allOptions; i++) { | ||
| if (option_list.children[i].textContent == correctAns){ | ||
| option_list.children[i].setAttribute("class", "option correct"); | ||
| option_list.children[i].insertAdjacentHTML("beforeend", tickIcon); | ||
|
|
||
| } | ||
| } | ||
| for (let i = 0; i < allOptions; i++){ | ||
| option_list.children[i].classList.add("disabled"); | ||
| } | ||
| next_btn.style.display = "block"; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| function startTimerLine(time){ | ||
| counterLine = setInterval(timer, 29); | ||
| function timer(){ | ||
| time += 1; | ||
| timeLine.style.width = time +"px"; | ||
| if(time > 549){ | ||
| clearInterval(counterLine); | ||
| } | ||
| } | ||
| } | ||
|
|
||
|
|
||
|
|
||
|
|
||
| function queCounter(index) { | ||
| const bottom_ques_counter = quiz_box.querySelector(".total_que"); | ||
| let totalQuesCountTag = '<span><p>'+ index +'</p>of<p>'+ questions.length +'</p>Questions</span>'; | ||
| bottom_ques_counter.innerHTML = totalQuesCountTag; | ||
| } |
Oops, something went wrong.