Merge pull request #9 from virtual-labs/dev

Review comments are rectified

experiment/procedure.md

@@ -1,20 +1,17 @@
 ### Procedure
 
-<div style="text-align:left">
-  Click on the Objective icon <img src="images/objecticon.png" alt="Alt text" style="height:80px; width:80px;">  to view the objective of the simulation. 
+1. Click on the Objective icon <img src="images/objecticon.png" alt="Alt text" > to view the objective of the simulation.
 
    ![Alt text](images/objectscreen.png)
-
-   Click on the Apparatus icon <img src="images/apparatus-icon.png" alt="Alt text" style="height:80px; width:80px;">  to check the tools required for this simulation.
 
-   ![Alt text](images/appratus_screen.png)
+2. Click on the Apparatus icon <img src="images/apparatus-icon.png" alt="Alt text" > to check the tools required for this simulation.
 
-  Click on the Solution icon <img src="images/solutions-icon.png" alt="Alt text" style="height:80px; width:80px;"> to proceed with further simulation steps.
+   ![Alt text](images/appratus_screen.png)
 
-  ![Alt text](images/solution_screen.png)
+3. Click on the Solution icon <img src="images/solutions-icon.png" alt="Alt text" > to proceed with further simulation steps.
 
-   Evaluate and choose the correct answer to proceed with further steps, click on the Next button <img src="images/nextButtonIcon.png" alt="Alt text" style="height:80px; width:80px;">
+   ![Alt text](images/solution_screen.png)
 
-  After performing the experiment, click on the Reset button <img src="images/resetButton-icon.png" alt="Alt text" style="height:80px; width:80px;"> to restart the experiment.
+4. Evaluate and choose the correct answer to proceed with further steps, click on the next button <img src="images/nextButton-icon.png" alt="Alt text" >
 
-</div>
+5. After performing the experiment, click on the Reset button <img src="images/resetButton-icon.png" alt="Alt text" > to restart the experiment.

experiment/simulation/css/style.css

@@ -98,6 +98,7 @@ h1 {
   padding: 1.2rem 1.6rem;
   border-radius: 0.9rem;
   left: 0;
+  cursor: pointer;
 }
 
 .logo-div {
@@ -377,6 +378,7 @@ h1 {
   border-radius: 1rem;
   cursor: pointer;
   transition: all 0.2s;
+  border: 0.2rem solid transparent;
   justify-self: center;
 }
 #question {
@@ -400,7 +402,7 @@ h1 {
   );
   background-clip: text;
   color: transparent;
-  border: 0.3rem solid var(--clr-title-background);
+  border: 0.2rem solid var(--clr-title-background);
   box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
 }
 .question-btn {
@@ -433,6 +435,9 @@ h1 {
   animation: highlight 1s infinite;
 }
 
+.anim {
+  animation: highlight 1s infinite;
+}
 .btn-group {
   display: flex;
   gap: 0.5rem;

experiment/simulation/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Solve</title>
+    <title>SOLVE</title>
 
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -64,7 +64,7 @@ <h1>Isometric to Orthographic view</h1>
 
           <li class="tool-list tool-practice" onclick="displayDiv(this)">
             <a class="tool-link" title="solution"
-              ><img src="./images/solution.png" alt="solution" class="icons"
+              ><img src="./images/solution.png" alt="Solution" class="icons"
               ></a
               >
               <span>Solution</span>
@@ -74,17 +74,17 @@ <h1>Isometric to Orthographic view</h1>
       <div class="main">
         <div class="main-section">
           <div id="simulation" class="main__task-div">
-            <h3 class="task-title">Simulation</h3>
+            <h3 class="task-title">Objective</h3>
 
             <div class="canvas__div">
               <div class="task-screen objective">
-                <h3 class="objective__title">Objective</h3>
+                <!-- <h3 class="objective__title">Objective</h3> -->
                 <p class="objective__sub">To Orthographic View</p>
                 <p class="objective__main">To convert the isometric view of a solid to all types of orthographic view. We are going to draw the front, Top and side view from the isometric view of solid.
               </p>
               </div>
               <div class="task-screen apparatus hide">
-                <h3 class="apparatus__title">Apparatus</h3>
+                <!-- <h3 class="apparatus__title">Apparatus</h3> -->
                 <div class="apparatus-screen">
                   <div class="apparatus-tool">
                     <img src="./images/compass.jpeg" alt="compass" class="tool-img">

experiment/simulation/js/script.js

@@ -124,6 +124,7 @@ const answersDiv = document.querySelector(".answers");
 const questionBtnDiv = document.querySelector(".question-btn");
 const practiceDiv = document.querySelector(".practice");
 const canvas = document.querySelector("#simscreen");
+const taskTitle = document.querySelector(".task-title");
 const ctx = canvas.getContext("2d");
 let currentStepCount = 1;
 let currentStep;
@@ -171,13 +172,16 @@ function displayDiv(ele) {
   });
   if (ele.classList.contains("tool-objective")) {
     document.querySelector(".objective").classList.remove("hide");
+    taskTitle.textContent = "Objective";
   }
   if (ele.classList.contains("tool-apparatus")) {
     document.querySelector(".apparatus").classList.remove("hide");
+    taskTitle.textContent = "Apparatus";
   }
   if (ele.classList.contains("tool-practice")) {
     document.querySelector(".practice").classList.remove("hide");
     if (currentStep === undefined) initialSetup();
+    taskTitle.textContent = "Solution";
   }
 }