From d9371cbfeabb854c5bd8693d37c1829db64d22ad Mon Sep 17 00:00:00 2001 From: Alberto Date: Thu, 1 Feb 2024 16:59:13 -0300 Subject: [PATCH] first commit --- README.md | 0 index.html | 58 +++ src/scripts/components/Loading.js | 60 +++ src/scripts/createQuiz.js | 375 ++++++++++++++ src/scripts/main.js | 357 +++++++++++++ src/scripts/modules/main/events.js | 7 + src/styles/reset.css | 49 ++ src/styles/style.css | 795 +++++++++++++++++++++++++++++ 8 files changed, 1701 insertions(+) create mode 100644 README.md create mode 100644 index.html create mode 100644 src/scripts/components/Loading.js create mode 100644 src/scripts/createQuiz.js create mode 100644 src/scripts/main.js create mode 100644 src/scripts/modules/main/events.js create mode 100644 src/styles/reset.css create mode 100644 src/styles/style.css diff --git a/README.md b/README.md new file mode 100644 index 0000000..e69de29 diff --git a/index.html b/index.html new file mode 100644 index 0000000..74d9967 --- /dev/null +++ b/index.html @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + GlobalQuiz + + +
+

GlobalQuiz

+
+
+
+ +
+

You haven't created any quizzes yet :(

+ +
+
+

All quizzes

+
+
+
+ + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/scripts/components/Loading.js b/src/scripts/components/Loading.js new file mode 100644 index 0000000..83aa52f --- /dev/null +++ b/src/scripts/components/Loading.js @@ -0,0 +1,60 @@ +export const Loading = () => { + return ` +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Carregando +
+ `; +} \ No newline at end of file diff --git a/src/scripts/createQuiz.js b/src/scripts/createQuiz.js new file mode 100644 index 0000000..84f161b --- /dev/null +++ b/src/scripts/createQuiz.js @@ -0,0 +1,375 @@ +let basicCreationData; +let quizData; + +const createInputNode = (...args) => { + const [placeholder, id, name, type, minlength, maxlength, min, max, pattern, required] = args; + + const input = document.createElement("input"); + input.setAttribute("placeholder", placeholder); + input.setAttribute("name", name); + + if (id !== undefined) input.setAttribute("id", id); + if (type !== undefined) input.setAttribute("type", type); + if (minlength !== undefined) input.setAttribute("minlength", minlength); + if (maxlength !== undefined) input.setAttribute("maxlength", maxlength); + if (min !== undefined) input.setAttribute("min", min); + if (max !== undefined) input.setAttribute("max", max); + if (pattern !== undefined) input.setAttribute("pattern", pattern); + if (required) input.setAttribute("required", ""); + + return input; +} + +const createInputHTML = (...args) => { + return createInputNode(...args).outerHTML; +} + +const showCreationScreen = () => { + const mainScreen = document.querySelector(".main-page-body"); + const creationScreen = document.querySelector(".basic-info-screen"); + + creationScreen.classList.remove("hidden"); + mainScreen.classList.add("hidden"); + + const instructionParagraph = document.createElement("p"); + instructionParagraph.classList.add("instruction"); + instructionParagraph.textContent = "Start from the beginning"; + + const creationContent = document.createElement("div"); + creationContent.classList.add("creation-content"); + + const form = document.createElement("form"); + form.onsubmit = function () { + checkCreation(); + return false; + }; + form.setAttribute("accept-charset", "utf-8"); + form.setAttribute("name", "basic-info"); + + const dataQuiz = document.createElement("div"); + dataQuiz.classList.add("data-quiz"); + + const titleInput = createInputNode("Title of your quiz", "creation-title", "quiz_title", "text", 20, 65, undefined, undefined, undefined, true); + titleInput.addEventListener("input", () => { + const inputValue = titleInput.value; + + if (inputValue.length < 20 || inputValue.length > 65) { + titleInput.classList.add("input-error"); + + document.querySelector(".button-proceed").disabled = true; + document.querySelector(".button-proceed").style.cursor = "not-allowed"; + + } else { + titleInput.classList.remove("input-error"); + + document.querySelector(".button-proceed").disabled = false; + document.querySelector(".button-proceed").style.cursor = "pointer"; + } + }); + + const imageInput = createInputNode("URL of your quiz image", "creation-img", "image_quiz", "url", undefined, undefined, undefined, undefined, undefined, true); + const questionsInput = createInputNode("Number of quiz questions", "creation-question-quantity", "quiz_questions", "number", undefined, undefined, 3, undefined, undefined, true); + const levelsInput = createInputNode("Number of quiz levels", "creation-level-quantity", "quiz_levels", "number", undefined, undefined, 2, undefined, undefined, true); + + const submitButton = document.createElement("button"); + submitButton.setAttribute("type", "submit"); + submitButton.classList.add("button-proceed"); + + const buttonText = document.createElement("p"); + buttonText.textContent = "Prosseguir para criar perguntas"; + + submitButton.appendChild(buttonText); + + dataQuiz.appendChild(titleInput); + dataQuiz.appendChild(imageInput); + dataQuiz.appendChild(questionsInput); + dataQuiz.appendChild(levelsInput); + + form.appendChild(dataQuiz); + form.appendChild(submitButton); + + creationContent.appendChild(instructionParagraph); + creationContent.appendChild(form); + + creationScreen.appendChild(creationContent); +} + +const checkCreation = () => { + const creationQuizTitle = document.querySelector("#creation-title").value; + const creationQuizImg = document.querySelector("#creation-img").value; + const creationQuizQuestionQuantity = document.querySelector("#creation-question-quantity").value; + const creationQuizLevelQuantity = document.querySelector("#creation-level-quantity").value; + + quizData = { + title: creationQuizTitle, + image: creationQuizImg, + questions: [], + levels: [], + }; + + basicCreationData = { + title: creationQuizTitle, + image: creationQuizImg, + questionQuantity: creationQuizQuestionQuantity, + levels: creationQuizLevelQuantity, + }; + + showQuestionCreationScreen(creationQuizQuestionQuantity); +} + +const showQuestionCreationScreen = (questionQuantity) => { + const questionsScreen = document.querySelector(".questions-screen"); + const infoScreen = document.querySelector(".basic-info-screen"); + + questionsScreen.classList.remove("hidden"); + infoScreen.classList.add("hidden"); + + let questionContainer = ""; + + for (let i = 0; i < parseInt(questionQuantity); i++) { + const questionId = `question_${i + 1}`; + + questionContainer += ` +
+

Question ${i + 1}

+ + +
`; + } + + questionsScreen.innerHTML += ` +

Create your questions

+
+
+ ${questionContainer} + +
+
`; + +}; + +const edit = (createQuizBox) => { + const active = document.querySelector(".active"); + if (active !== null) { + toggleClasses(active); + active.classList.remove("active"); + } + toggleClasses(createQuizBox); + createQuizBox.classList.add("active"); +} + +const toggleClasses = (element) => { + const questionTitle = element.querySelector(".title"); + const ionIconPencil = element.querySelector(".pencil"); + const questionsFormContainer = element.querySelector(".form-container"); + + questionTitle.classList.toggle("margin"); + ionIconPencil.classList.toggle("hidden"); + questionsFormContainer.classList.toggle("hidden"); +} + +const collectQuestionData = (questionBox) => { + const title = questionBox.querySelector('input[name="question_text"]').value; + const color = questionBox.querySelector('input[name="background_color_question"]').value; + + const correctAnswer = { + text: questionBox.querySelector('input[name="correct_answer_text"]').value, + image: questionBox.querySelector('input[name="correct_answer_img_url"]').value, + isCorrectAnswer: true, + }; + + const incorrectAnswers = Array.from(questionBox.querySelectorAll(".incorrect-answer")) + .map((incorrectAnswer) => ({ + text: incorrectAnswer.querySelector('input[name="incorrect_answer_text"]').value, + image: incorrectAnswer.querySelector('input[name="incorrect_answer_img_url"]').value, + isCorrectAnswer: false, + })); + + return { title, color, answers: [correctAnswer, ...incorrectAnswers] }; +}; + +const checkQuestions = () => { + const questionsFormContainers = document.querySelectorAll(".form-container.questions"); + const questionsData = Array.from(questionsFormContainers).map(collectQuestionData); + quizData.questions.push(...questionsData); + + showLevelsScreen(basicCreationData.levels); +}; + +const showLevelsScreen = (levelsQuantity) => { + const questionsScreen = document.querySelector(".questions-screen"); + const levelsScreen = document.querySelector(".levels-screen"); + + questionsScreen.classList.add("hidden"); + levelsScreen.classList.remove("hidden"); + + let levelsContainer = ""; + + for (let i = 0; i < parseInt(levelsQuantity); i++) { + const levelId = `level_${i + 1}`; + + levelsContainer += ` +
+

Level ${i + 1}

+ + +
+ `; + } + + levelsScreen.innerHTML = ` +

Now, decide the levels!

+
+
+ ${levelsContainer} + +
+
+ `; + +} + +const collectLevelsData = (levelBox) => { + const title = levelBox.querySelector('input[name="level_title"]').value; + const image = levelBox.querySelector('input[name="level_image_url"]').value; + const text = levelBox.querySelector('textarea[name="level_description"]').value; + const minValueString = levelBox.querySelector('input[name="level_minValue"]').value; + + const minValue = parseInt(minValueString, 10); + + return { title, image, text, minValue }; +} + +const checkLevels = () => { + const levelsFormContainers = document.querySelectorAll(".form-container.levels"); + const levelsData = Array.from(levelsFormContainers).map(collectLevelsData); + + quizData.levels.push(...levelsData); + submitQuiz(); +} + +const submitQuiz = async () => { + try { + showLoading(); + + quizData.questions.map((question) => { + question.answers = question.answers.filter((answer) => answer.text !== ""); + }); + + const menorMinValue = Math.min(...quizData.levels.map(level => level.minValue)); + + if (menorMinValue !== 0) { + const indiceMenorMinValue = quizData.levels.findIndex(level => level.minValue === menorMinValue); + + if (indiceMenorMinValue !== -1) { + quizData.levels[indiceMenorMinValue].minValue = 0; + } + } + + const response = await axios.post(`${BASE_URL}/quizzes`, quizData); + + removeLoading(); + saveID(response.data.id); + showFinalScreen(response.data.id); + + } catch (error) { + window.location.reload(); + throw error; + } +} + +const saveID = (quizId) => { + if (localStorage.getItem("id")) { + localStorage.getItem("id"); + const id = JSON.parse(localStorage.getItem("id")); + id.push(quizId); + localStorage.setItem("id", JSON.stringify(id)); + } else { + localStorage.setItem("id", JSON.stringify([quizId])); + } +} + +const showFinalScreen = (quizId) => { + const finalScreen = document.querySelector(".final-screen"); + const levelsScreen = document.querySelector(".levels-screen"); + levelsScreen.classList.add("hidden"); + finalScreen.classList.remove("hidden"); + + finalScreen.innerHTML = ` +

Your quiz is ready!

+
+ +
+ ${basicCreationData.title} +
+ +

Back to home

+ `; +} + +const accessQuiz = async (id) => { + try { + showLoading(); + const finalScreen = document.querySelector(".final-screen"); + finalScreen.classList.add("hidden"); + + const response = await axios.get(`${BASE_URL}/quizzes/${id}`); + displayQuizScreen(response.data); + } catch (error) { + window.location.reload(); + throw error; + } +}; + +document.addEventListener("DOMContentLoaded", function () { + const createQuizzButton = document.querySelector('.button-creation'); + if (createQuizzButton) { + createQuizzButton.addEventListener("click", showCreationScreen); + } +}); \ No newline at end of file diff --git a/src/scripts/main.js b/src/scripts/main.js new file mode 100644 index 0000000..b17682d --- /dev/null +++ b/src/scripts/main.js @@ -0,0 +1,357 @@ +import { returnHome } from "./modules/main/events.js"; +import { Loading } from './components/Loading.js'; + +window.Loading = Loading; + +let accuracyPercentage = 0; +let totalAnswers = 0; +let countOfCorrectAnswers = 0; +let levels = []; + +window.BASE_URL = "https://mock-api.driven.com.br/api/v4/buzzquizz"; + +window.showLoading = () => { + const loadingScreen = document.querySelector(".loading-screen"); + loadingScreen.innerHTML = Loading(); +} + +window.removeLoading = () => { + const loadingScreen = document.querySelector(".loading-screen"); + loadingScreen.innerHTML = ""; +} + +const isValidURL = (url) => { + const urlRegex = /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/; + return urlRegex.test(url); +} + +const shuffleAnswers = (array) => { + for (let i = array.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [array[i], array[j]] = [array[j], array[i]]; + } + return array; +}; + +const restartQuiz = (currentQuiz) => { + const restartPage = document.querySelector(".quiz-page"); + accuracyPercentage = 0; + totalAnswers = 0; + countOfCorrectAnswers = 0; + restartPage.remove(); + goToQuizScreen(currentQuiz); +} + +const backToHome = () => { + document.location.reload(true); +} + +const getUserQuizzes = async () => { + const createFirstQuizzContainer = document.querySelector(".create-quiz"); + const containerYourQuizzes = document.querySelector(".container-your-quizzes"); + const yourQuizzes = document.querySelector(".your-quizzes"); + let quizzesUsuario = ""; + + if (localStorage.getItem("id")) { + createFirstQuizzContainer.classList.add("hidden"); + containerYourQuizzes.classList.remove("hidden"); + const id = JSON.parse(localStorage.getItem("id")); + + for (const quizId of id) { + try { + const response = await axios.get(`${BASE_URL}/quizzes/${quizId.toString()}`); + const userQuiz = response.data; + + const quizElement = document.createElement("div"); + + quizElement.classList.add("other-quizzes"); + quizElement.setAttribute("data-identifier", "quiz-card"); + quizElement.setAttribute("data-quiz-id", userQuiz.id) + + const imgElement = document.createElement("img"); + imgElement.src = userQuiz.image; + + const shadowElement = document.createElement("div"); + shadowElement.classList.add("image-shadow"); + + const spanElement = document.createElement("span"); + spanElement.textContent = userQuiz.title; + + quizElement.appendChild(imgElement); + quizElement.appendChild(shadowElement); + quizElement.appendChild(spanElement); + + quizzesUsuario += quizElement.outerHTML; + } catch (error) { + throw error; + } + } + + yourQuizzes.innerHTML = quizzesUsuario; + + yourQuizzes.addEventListener("click", (event) => { + if (event.target.classList.contains("image-shadow")) { + const quizElement = event.target.closest(".other-quizzes"); + + if (quizElement) { + const quizId = quizElement.getAttribute("data-quiz-id"); + goToQuizScreen(quizId); + } + } + }); + + } +} + +const goToQuizScreen = async (id) => { + try { + showLoading(); + const mainScreen = document.querySelector(".main-page-body"); + const quiz = await axios.get(`${BASE_URL}/quizzes/${id}`); + mainScreen.classList.add("hidden"); + displayQuizScreen(quiz.data); + window.scrollTo(0, 0); + } catch (error) { + throw error; + } +} + +window.displayQuizScreen = (quizData) => { + removeLoading(); + levels = quizData.levels; + + const body = document.querySelector("body"); + + const quizPage = document.createElement("div"); + quizPage.classList.add("quiz-page"); + quizPage.innerHTML = ` +
+ + ${quizData.title} +
+ `; + + quizData.questions.forEach((item) => { + const answerBox = document.createElement("div"); + answerBox.classList.add("individual-question-container"); + answerBox.dataset.identifier = "question-card"; + + const wrapperContainer = document.createElement("div"); + wrapperContainer.classList.add("wrapper-container"); + + const questionCard = document.createElement("div"); + questionCard.classList.add("individual-question-title-container"); + questionCard.style.backgroundColor = item.color; + + const answerCard = document.createElement("div"); + answerCard.classList.add("individual-question-answers-container"); + + questionCard.innerHTML = ` +

${item.title}

+ `; + + const answers = displayQuizAnswers(item.answers, quizData.questions.length); + answers.forEach(answer => { + answerCard.appendChild(answer); + }); + + wrapperContainer.appendChild(questionCard); + wrapperContainer.appendChild(answerCard); + + answerBox.appendChild(wrapperContainer); + quizPage.appendChild(answerBox); + }); + + const endOfQuizContainer = document.createElement("div"); + endOfQuizContainer.classList.add("quiz-end-container", "hidden"); + endOfQuizContainer.innerHTML = ` +
+

${accuracyPercentage}% accuracy: ${levels[0].title}

+
+
+ +

${levels[0].text}

+
+ + + `; + + document.addEventListener('click', (event) => { + if (event.target.classList.contains('restart-quiz')) { + restartQuiz(quizData.id); + } + }); + + document.addEventListener('click', (event) => { + if (event.target.classList.contains('back-to-home')) { + backToHome(); + } + }); + + quizPage.appendChild(endOfQuizContainer); + body.appendChild(quizPage); +} + +const displayQuizAnswers = (answers, quantityOfEachAnswer) => { + let ARRAY_ANSWERS = []; + + answers.forEach((item) => { + const answerContainer = document.createElement("div"); + answerContainer.classList.add("individual-answer-container", item.isCorrectAnswer ? "correct-answer" : "wrong-answer"); + answerContainer.dataset.identifier = "answer"; + answerContainer.onclick = () => selectAnswer(answerContainer, quantityOfEachAnswer); + + const img = document.createElement("img"); + img.src = item.image; + + const span = document.createElement("span"); + span.textContent = item.text; + + answerContainer.appendChild(img); + answerContainer.appendChild(span); + + ARRAY_ANSWERS.push(answerContainer); + }); + + return shuffleAnswers(ARRAY_ANSWERS); +} + +const selectAnswer = (selectedAnswer, numberOfAnswers) => { + const individualQuestionAnswersContainer = selectedAnswer.parentNode; + const individualQuestionTitleContainer = individualQuestionAnswersContainer.previousElementSibling; + const individualAnswerContainer = individualQuestionAnswersContainer.children; + const wrongAnswers = individualQuestionAnswersContainer.querySelectorAll(".wrong-answer"); + const correctAnswer = individualQuestionAnswersContainer.querySelector(".correct-answer"); + + Array.from(individualAnswerContainer).forEach((item) => { + item.classList.add("unselected"); + item.onclick = null; + }); + + Array.from(wrongAnswers).forEach((item) => { + item.classList.add("red"); + }); + + if (selectedAnswer.classList.contains("correct-answer")) { + countOfCorrectAnswers++; + } + + selectedAnswer.classList.remove("unselected"); + correctAnswer.classList.add("green"); + totalAnswers++; + + if (totalAnswers === numberOfAnswers) { + const percentage = Math.round((countOfCorrectAnswers / numberOfAnswers) * 100); + quizResult(percentage); + } + + setTimeout(() => { + const question = document.querySelectorAll(".individual-question-title-container"); + const endQuiz = document.querySelector(".quiz-end-container"); + + let scrolling = false; + let targetquestion = 0; + + window.onscroll = () => { + scrolling = true; + } + + Array.from(question).forEach((item, index) => { + if (item === individualQuestionTitleContainer) { + targetquestion = index; + } + }); + + if (targetquestion + 1 < question.length && !scrolling) { + question[targetquestion + 1].scrollIntoView(); + } else if (!scrolling) { + endQuiz.scrollIntoView(); + } + }, 1500); +} + +const quizResult = (percentage) => { + const endQuiz = document.querySelector(".quiz-end-container"); + endQuiz.classList.remove("hidden"); + + let reachedLevel; + const finalLevel = levels.length - 1; + + for (let i = finalLevel; i >= 0; i--) { + if (percentage >= levels[i].minValue) { + reachedLevel = levels[i]; + break; + } + } + + const endQuizTitle = endQuiz.querySelector(".end-quiz-title"); + endQuizTitle.innerHTML = `${percentage}% accuracy: ${reachedLevel.title}`; + const endQuizImage = endQuiz.querySelector("img"); + endQuizImage.setAttribute("src", reachedLevel.image); + const quizOutcomeText = endQuiz.querySelector(".quiz-text"); + quizOutcomeText.innerHTML = `${reachedLevel.text}`; +} + +const displayGeneralQuizzes = async () => { + try { + showLoading(); + + await getUserQuizzes(); + + const response = await axios.get(`${BASE_URL}/quizzes`); + removeLoading(); + + const quizList = response.data; + const quizBox = document.querySelector(".quiz-box"); + + quizList.forEach((quiz) => { + if (!isUserQuiz(quiz.id)) { + if (!isValidURL(quiz.image)) { + quiz.image = "https://http.cat/404.jpg"; + } + + const quizCard = document.createElement("div"); + quizCard.classList.add("other-quizzes"); + quizCard.dataset.identifier = "quiz-card"; + quizCard.setAttribute("data-quiz-id", quiz.id); + + quizCard.innerHTML = ` + +
+ ${quiz.title} + `; + + quizBox.appendChild(quizCard); + } + }); + + quizBox.addEventListener("click", (event) => { + const quizCard = event.target.closest(".other-quizzes[data-identifier='quiz-card']"); + if (quizCard) { + const quizId = quizCard.getAttribute("data-quiz-id"); + if (quizId) { + goToQuizScreen(quizId); + } + } + }); + } catch (error) { + throw error; + } +}; + + +const isUserQuiz = (quizId) => { + const userQuizzesIds = JSON.parse(localStorage.getItem("id")) || []; + return userQuizzesIds.includes(quizId); +}; + +displayGeneralQuizzes(); + +const handleEvents = ( () => { + returnHome(); +})(); + diff --git a/src/scripts/modules/main/events.js b/src/scripts/modules/main/events.js new file mode 100644 index 0000000..f55c6c5 --- /dev/null +++ b/src/scripts/modules/main/events.js @@ -0,0 +1,7 @@ +export const returnHome = () => { + const headerTitle = document.querySelector(".header-title"); + + headerTitle.addEventListener("click", () => { + document.location.reload(true); + }); +}; \ No newline at end of file diff --git a/src/styles/reset.css b/src/styles/reset.css new file mode 100644 index 0000000..952ec6f --- /dev/null +++ b/src/styles/reset.css @@ -0,0 +1,49 @@ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +* { + box-sizing: border-box; + transition: all ease 0.2s; + word-break: break-all; +} \ No newline at end of file diff --git a/src/styles/style.css b/src/styles/style.css new file mode 100644 index 0000000..320ecba --- /dev/null +++ b/src/styles/style.css @@ -0,0 +1,795 @@ +/*::::::::::Page Header::::::::::*/ + +header { + width: 100%; + height: 69px; + + display: flex; + justify-content: center; + align-items: center; + + background: #EC362D; + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); +} + +.header-title { + color: #FFFFFF; + font-size: 37px; + font-weight: 700; + line-height: normal; + + cursor: pointer; +} + +/*::::::::::Main Page Body::::::::::*/ + +.main-page-body { + width: 100%; + height: auto; + + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: space-around; + align-items: center; + + margin-top: 10px; + + background-color: #fafafa; +} + +/*::::::::::Quiz Creation Suggestion::::::::::*/ + +.container-your-quizzes { + width: 1050px; + margin-top: 69px; + margin-bottom: 46px; +} + +.container-title-button { + display: flex; + align-items: center; + + margin-bottom: 13px; + gap: 17px; +} + +.container-title-button p { + font-size: 20px; + font-weight: 700; +} + +.container-title-button ion-icon { + font-size: 30px; + color: #ec362d; + + cursor: pointer; +} + +.your-quizzes { + width: 100%; + + display: flex; + flex-wrap: wrap; + + gap: 15px; +} + +.create-quiz { + width: 1050px; + height: 181px; + + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: center; + align-items: center; + + margin-bottom: 110px; + margin-top: 79px; + + border-radius: 5px; + border: 1px dashed #d5d5d5; +} + +.create-quiz p { + color: #b9b9b9; + font-size: 20px; + width: 60%; + text-align: center; +} + +.create-quiz > .button-creation { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-top: 40px; + padding: 10px 15px; + font-size: 21px; + font-weight: 400; + color: #ec362d; + background-color: #fafafa; + border: 1px dashed #ec362d; + border-radius: 50px; + cursor: pointer; +} + +.container-your-quizzes { + width: 1050px; + margin-top: 69px; + margin-bottom: 46px; +} + +.container-your-quizzes .container-title-button { + display: flex; + margin-bottom: 13px; + gap: 17px; + align-items: center; +} + +.container-your-quizzes .container-title-button p { + font-size: 20px; + font-weight: 700; + font-family: Roboto; +} + +.container-your-quizzes .container-title-button ion-icon { + font-size: 30px; + color: #ec362d; + cursor: pointer; +} + +/*::::::::::All Quizzes::::::::::*/ +.all-quizzes { + width: 1050px; + + text-align: left; + font-size: 20px; + font-weight: 700; + margin-bottom: 12px; +} + +.all-quizzes p { + color: #000; + font-size: 20px; + font-style: normal; + font-weight: 700; + line-height: normal; +} + +.quiz-box { + width: 1050px; + + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.other-quizzes { + width: 340px; + height: 181px; + + position: relative; + margin-bottom: 14px; +} + +.other-quizzes img { + width: 100%; + height: 100%; + + border-radius: 5px; +} + +.other-quizzes span { + position: absolute; + bottom: 20px; + left: 15px; + color: white; + z-index: 1; +} + +.image-shadow { + width: 100%; + height: 100%; + border-radius: 5px; + box-shadow: inset 0 -50px 60px rgba(0, 0, 0, 0.9); + position: absolute; + top: 0; + + cursor: pointer; +} + +/*:::::::::::Quiz Creation Screen 1::::::::::*/ + +.creation-page-body { + width: 100%; + min-height: calc(100vh - 69px); + display: flex; + flex-direction: column; + align-items: center; + background-color: #fafafa; + gap: 29px; +} + +.instruction { + font-weight: bold; + font-size: 23px; + margin-top: 37px; +} + +.creation-content { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; +} + +.data-quiz { + display: flex; + flex-direction: column; + background-color: #fff; + width: 600px; + height: 256px; + justify-content: center; + align-items: center; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05); +} + +.data-quiz input { + padding-left: 10px; + width: 95%; + height: 46px; + margin-bottom: 10px; + font-size: 19px; + font-style: italic; + border: 1px solid #d1d1d1; + border-radius: 5px; +} + +.data-quiz input.input-error { + background-color: rgb(234, 85, 85); +} + +.button-proceed { + background-color: #ec362d; + border-radius: 15px; + font-size: 18px; + color: #fff5f4; + height: 54px; + padding: 0 25px; + border: none; + outline: none; + margin-top: 29px; + cursor: pointer; +} + +/*::::::::::: End of Quiz 1 Creation Screen::::::::::*/ + + + +/*:::::::::::Quiz Creation Screen 2::::::::::*/ + +.quiz-creation-box { + cursor: pointer; + display: flex; + width: 600px; + min-height: 74px; + justify-content: space-between; + align-items: center; + background-color: #fff; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05); + margin-bottom: 22px; +} + +.quiz-creation-box h3 { + font-weight: bold; + font-size: 20px; + margin-left: 17px; +} + +.quiz-creation-box ion-icon { + font-size: 26px; + margin-right: 25px; +} + +.form-container { + width: 100%; +} + +.form-container div { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; +} +.form-container .question { + margin-top: 12px; + margin-bottom: 28px; +} + +.form-container div input { + width: 95%; + padding-left: 10px; + height: 46px; + margin-bottom: 10px; + font-size: 19px; + font-style: italic; + border: 1px solid #d1d1d1; + border-radius: 5px; +} + +.correct-answer { + margin: 14px 0 24px 0; +} + +.incorrect-answers { + margin-top: 14px; +} + +.incorrect-answers .incorrect-answer { + margin-bottom: 24px; +} + +.questions-screen .creation-content { + min-height: 100vh; +} + +.questions-screen .creation-content .button-proceed { + width: 350px; + margin: 20px auto 50px auto; +} + +.active { + flex-direction: column; + align-items: flex-start; +} + +.margin { + margin-top: 27px; +} + +/*::::::::::: End of Quiz 2 Creation Screen::::::::::*/ + + +/*:::::::::::Quiz Creation Screen 3::::::::::*/ + +.form-container { + width: 100%; +} + +.input-box { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + margin-top: 12px; +} + +.input-box input { + height: 46px; + width: 95%; + margin-bottom: 10px; + font-size: 19px; + font-style: italic; + border: 1px solid #d1d1d1; + border-radius: 5px; + padding-left: 10px; +} + +.input-box .description { + width: 95%; + height: 170px; + padding-left: 10px; + min-height: 46px; + font-size: 19px; + font-style: italic; + font-family: Roboto; + margin-bottom: 10px; + border-radius: 5px; + border: 1 solid #d1d1d1; +} + +.input-box .description::placeholder { + font-size: 19px; + font-family: Roboto; + font-style: italic; +} + +.input-box input::placeholder, +.input-box .description::placeholder { + margin-left: 20px; +} + +.creation-page-body .creation-content { + width: 100%; +} + +/*::::::::::: End of Quiz 3 Creation Screen::::::::::*/ + + +/*:::::::::::Quiz Creation Completion Screen:::::::::*/ + +.final-screen .image-container { + width: 500px; + height: auto; + position: relative; + cursor: pointer; +} +.final-screen .image-container img { + width: 100%; + height: 266px; + border-radius: 5px; +} + +.image-container span { + position: absolute; + bottom: 20px; + left: 15px; + color: white; + z-index: 1; +} + +/*:::::::::::End of Quiz Creation Completion Screen:::::::::*/ + + +/*::::::::::Quiz Page::::::::::*/ +.quiz-page { + width: 100%; + + display: flex; + flex-direction: column; + align-items: center; +} + +.cover-photo-container { + width: 100%; + height: 277px; + + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 20px; + + position: relative; +} + +.cover-photo-container img { + width: 100%; + height: 277px; + + object-fit: cover; + filter: brightness(0.4); +} + +.cover-photo-container span { + position: absolute; + color: white; + font-size: 38px; +} + +.end-of-quiz-container { + width: 759px; + background-color: white; + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 50px; + padding: 23px; +} + +.result-container { + width: 727px; + height: 99px; + background-color: #ec362d; + margin-bottom: 18px; + display: flex; + align-items: center; + justify-content: center; +} + +.result-container h1 { + color: white; + font-weight: 550; + font-size: 23px; +} + +.image-and-description { + width: 681px; + height: 273px; + display: flex; +} + +.image-and-description img { + width: 364px; + height: 273px; +} + +.image-and-description .quiz-text { + width: auto; + padding: 21px; + word-break: break-all; +} + +.restart-quiz { + width: 259px; + height: 52px; + + display: flex; + align-items: center; + justify-content: center; + + margin-bottom: 20px; + margin-top: 50px; + + background-color: #ec362d; + border-radius: 17px; + font-size: 21px; + color: white; + border: none; + + cursor: pointer; +} + +.back-to-home { + background-color: transparent; + color: #818181; + font-size: 21px; + border: none; + + cursor: pointer; +} + +.unselected { + opacity: 0.4; +} + +.quiz-end-container { + width: 759px; + background-color: white; + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 50px; + padding: 23px; +} + +.individual-question-container { + width: 759px; + + margin-bottom: 42px; + background-color: white; + display: flex; + align-items: center; + flex-direction: column; + padding: 28px; + + box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05); +} + +.wrapper-container { + margin-bottom: 48px; +} + +.individual-question-title-container { + width: 688px; + height: 138px; + + display: flex; + align-items: center; + justify-content: center; +} + +.individual-question-title-container h2 { + color: white; + font-weight: 550; + font-size: 23px; + + font-family: Roboto; + font-size: 23px; + font-style: normal; + font-weight: 700; + line-height: 27px; + letter-spacing: 0em; + text-align: center; +} + +.individual-question-answers-container { + margin-top: 19px; + width: 684px; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: baseline; +} + +.individual-answer-container { + width: 330px; + height: 200px; +} + +.individual-answer-container img { + width: 330px; + height: 175px; + + cursor: pointer; +} + +.individual-answer-container span { + color: inherit; + font-weight: 700; +} + + + + + +/*::::::::::General Styles::::::::::*/ + +body { + font-family: "Roboto", sans-serif; + background-color: #fafafa; +} + +form { + display: flex; + flex-direction: column; + align-items: center; +} + +html { + scroll-behavior: smooth; + inset-block: center; +} + +/*::::::::::Support Classes::::::::::*/ +.hidden { + display: none; +} + +.loading { + min-height: 77vh; + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + gap: 24px; +} + +.green { + color: green; +} + +.red { + color: red; +} + +.unmodified { + color: black; +} + +/* Chrome, Safari, Edge, Opera */ +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +/* Firefox */ +input[type="number"] { + input { + -moz-appearance: textfield; + appearance: textfield; + } +} + +/*::::: Mobile Version:::::*/ + +@media (max-width: 1100px) { + .main-page-body { + width: 100vw; + justify-content: center; + } + .create-quiz { + width: 90vw; + margin-bottom: 30px; + display: flex; + flex-direction: column; + } + + .create-quiz p { + color: #b9b9b9; + font-size: 20px; + width: 60%; + text-align: center; + } + + .create-quiz .button-creation { + margin-top: 40px; + padding: 10px 15px; + font-size: 21px; + font-weight: 400; + color: #ec362d; + background-color: #fafafa; + border: 1px dashed #ec362d; + border-radius: 50px; + cursor: pointer; + } + + .quiz-box { + width: 90vw; + margin: 0 auto; + cursor: pointer; + } + + .all-quizzes { + width: 90%; + } + + .other-quizzes { + margin: 0 auto; + margin-bottom: 14px; + } + .quiz-page { + display: flex; + flex-direction: column; + } + + .individual-question-container { + width: 90vw; + height: auto; + padding: 0; + align-items: center; + margin: 0 auto; + display: flex; + } + + .individual-question-answers-container { + display: flex; + flex-direction: column; + align-items: center; + } + + .container-your-quizzes { + width: 90%; + } + + .container-title-button { + justify-content: space-between; + } + + .main-page-body > .button-creation { + width: 100%; + justify-self: center; + justify-content: space-between; + padding: 0 25px; + } + + .data-quiz { + width: 100%; + } + + .question-box { + width: 100%; + } + + .instruction { + font-size: 23px; + } +} + +@media (max-width: 500px) { + .final-screen .image-container { + width: 90%; + height: auto; + } + + .final-screen .image-container img { + width: 100%; + height: 181px; + } +} + +