Add data-identifier on homescreen and quizscreen

neves-gabriel · Nov 23, 2021 · 4416ee9 · 4416ee9
1 parent 3d0226a
commit 4416ee9
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -34,19 +34,19 @@ <h1 onclick="reloadPage()">BuzzQuizz</h1>
 
         <div class="list-title-container hidden"> 
             <h2>Seus Quizzes</h2>
-            <button name="create-new-quiz" onclick="openQuizCreation()"><ion-icon name="add-circle"></ion-icon></button>
+            <button name="create-new-quiz" onclick="openQuizCreation()" data-identifier="create-quizz"><ion-icon name="add-circle"></ion-icon></button>
         </div>
 
-        <ul class="quiz-list user">
+        <ul class="quiz-list user" data-identifier="user-quizzes">
             <div class="empty-list">
                 <p>Você não criou nenhum quizz ainda :(</p>
-                <button name="create-first-new-quiz" onclick="openQuizCreation()">Criar quizz</button>
+                <button name="create-first-new-quiz" onclick="openQuizCreation()" data-identifier="create-quizz">Criar quizz</button>
             </div>
         </ul>
 
         <h2>Todos os Quizzes</h2>
 
-        <ul class="quiz-list all">
+        <ul class="quiz-list all" data-identifier="general-quizzes">
         </ul>
 
     </div>

diff --git a/js/homescreen.js b/js/homescreen.js
@@ -26,20 +26,20 @@ function renderQuizzPreview (response) {
         for(let i=0; i< allQuizzes.length; i++){
         if (userQuizzes.includes(allQuizzes[i].id)) {
             userQuizContainer.innerHTML += `<li class="quiz-preview" style="background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.5) 64.58%, #000000 100%), url(${allQuizzes[i].image});"
-                                            onclick="openQuiz(${allQuizzes[i].id})">
+                                            onclick="openQuiz(${allQuizzes[i].id})" data-identifier="quizz-card">
                                                 <p>${allQuizzes[i].title}</p>
                                             </li>`;
         } else {
             quizContainer.innerHTML += `<li class="quiz-preview" style="background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.5) 64.58%, #000000 100%), url(${allQuizzes[i].image});"
-                                    onclick="openQuiz(${allQuizzes[i].id})">
+                                    onclick="openQuiz(${allQuizzes[i].id})" data-identifier="quizz-card">
                                         <p>${allQuizzes[i].title}</p>
                                     </li>`;
         }
         } 
     } else {
         for(let i=0; i< allQuizzes.length; i++){
             quizContainer.innerHTML += `<li class="quiz-preview" style="background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.5) 64.58%, #000000 100%), url(${allQuizzes[i].image});"
-                                    onclick="openQuiz(${allQuizzes[i].id})">
+                                    onclick="openQuiz(${allQuizzes[i].id})" data-identifier="quizz-card">
                                         <p>${allQuizzes[i].title}</p>
                                     </li>`;
         }
@@ -103,7 +103,7 @@ function renderQuestion(questionData){
     let answersList = [];
     let returnHtml = ``;
 
-    returnHtml += ` <div class="question">
+    returnHtml += ` <div class="question" data-identifier="question">
                         <div class="question-title" style="background-color: ${questionData.color}">
                             ${questionData.title}
                         </div>
@@ -123,7 +123,7 @@ function renderAnswers(answersList){
     let answersHtml = ``;
 
     for(let currentAnswer of answersList){
-        answersHtml +=`<li class="answer ${currentAnswer.isCorrectAnswer}" onclick="selectAnswer(this)">
+        answersHtml +=`<li class="answer ${currentAnswer.isCorrectAnswer}" onclick="selectAnswer(this)" data-identifier="answer">
                         <img class="answer-img" src="${currentAnswer.image}"/>
                         <div class="answer-title">${currentAnswer.text}</div>
                       </li>`;
@@ -189,7 +189,7 @@ function finishQuiz(){
 function buildResult(){
     let level = calculateLevel();
 
-    return `<div class="result-text">${level.title}</div>
+    return `<div class="result-text" data-identifier="quizz-result">${level.title}</div>
             <div class="result-details">
                 <img class="result-img" src="${level.image}"/>
                 <div class="result-comment">${level.text}</div>