Merge pull request #8 from virtual-labs/dev

Review comments are rectified
virtual-labs · Jul 15, 2024 · df303e9 · df303e9
2 parents 8208a1a + b7a4167
commit df303e9
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 12 deletions.
diff --git a/experiment/simulation/css/style.css b/experiment/simulation/css/style.css
@@ -570,7 +570,9 @@ canvas {
   grid-template-columns: 80fr 20fr;
   gap: 2rem;
 }
-
+.anim{
+  animation: highlight 1s infinite;
+}
 .var-spinner {
   justify-self: center;
 }

diff --git a/experiment/simulation/index.html b/experiment/simulation/index.html
@@ -63,7 +63,7 @@ <h1>Isometric to Orthographic view</h1>
           </li>
 
           <li class="tool-list tool-practice" onclick="displayDiv(this)">
-            <a class="tool-link" title="Variables"
+            <a class="tool-link" title="solution"
               ><img src="./images/solution.png" alt="solution" class="icons"
               ></a
               >
@@ -91,7 +91,7 @@ <h3 class="apparatus__title">Apparatus</h3>
                     <span>Compass</span>
                   </div>
                   <div class="apparatus-tool">
-                    <img src="./images/drafter.jpeg" alt="drafter" class="tool-img">
+                    <img src="./images/Drafter.jpeg" alt="drafter" class="tool-img">
                     <span>Drafter</span>
                   </div>
                   <div class="apparatus-tool">
@@ -118,14 +118,14 @@ <h3 class="apparatus__title">Apparatus</h3>
                 <p class="final-statement hide">Well Done! The conversion of the isometric view to the orthographic view is successful.</p>
                 <div class="practice-steps-additional">
 
-                  <button class="btn btn-axis hide">Draw Axis</button>
-                  <button class="btn btn-vp-hp hide">Draw the front view</button>
-                  <button class="btn btn-pyramid hide">Draw Pyramid</button>
-                  <button class="btn btn-a hide">Project the line down</button>
-                  <button class="btn btn-c hide">Draw the top view</button>
-                  <button class="btn btn-b hide"> Project lines to Profile plane</button>
-                  <button class="btn btn-d hide">Connect the lines</button>
-                  <button class="btn btn-e hide">Draw the side view</button>
+                  <button class="btn btn-axis anim hide">Draw Axis</button>
+                  <button class="btn btn-vp-hp anim hide">Draw the front view</button>
+                  <button class="btn btn-pyramid anim hide">Draw Pyramid</button>
+                  <button class="btn btn-a anim hide">Project the line down</button>
+                  <button class="btn btn-c anim hide">Draw the top view</button>
+                  <button class="btn btn-b anim hide"> Project lines to Profile plane</button>
+                  <button class="btn btn-d anim hide">Connect the lines</button>
+                  <button class="btn btn-e anim hide">Draw the side view</button>
                   <!-- <button class="btn btn-f hide">Project the lines up </button>
                   <button class="btn btn-g hide">Draw the pyramid up</button> -->
                       <img id="question" src="images/question.png" style="display: none;width: 70%; "/>

diff --git a/experiment/simulation/js/script.js b/experiment/simulation/js/script.js
@@ -333,13 +333,15 @@ function checkAnswer(ele, index, answer, buttonClass) {
   optionSelected.classList.remove("correct");
   if (index === answer) {
     optionSelected.classList.add("correct");
+    buttonClass.classList.add("anim");
     buttonClass.classList.remove("hide");
     validateAnswer.innerHTML = "Right answer👍";
     answersDiv.appendChild(validateAnswer);
   } else {
     optionSelected.classList.add("wrong");
+    buttonClass.classList.remove("anim");
     buttonClass.classList.add("hide");
-    validateAnswer.innerHTML = "Worng answer, please check the options again👎";
+    validateAnswer.innerHTML = "Wrong answer, please check the options again👎";
     answersDiv.appendChild(validateAnswer);
   }
 }