Merge pull request #15 from virtual-labs/dev

Dev
virtual-labs · Oct 10, 2024 · ff39731 · ff39731
2 parents 1f60854 + 7770037
commit ff39731
Show file tree

Hide file tree

Showing 7 changed files with 230 additions and 79 deletions.
diff --git a/experiment/aim.md b/experiment/aim.md
@@ -1,11 +1,11 @@
 # Aim 
 Understand operation of piezoelectric sensor and its application
 
-## Objective  
+## Objectives  
 -	Understand operation of piezoelectric sensor 
--	Configure sensor parameters based on material type. 
--	Characterize piezoelectric sensor.
--	Identify suitability. 
+-	Configure sensor parameters based on material type 
+-	Characterize piezoelectric sensor
+-	Identify suitability 
 
 
 
diff --git a/experiment/procedure.md b/experiment/procedure.md
@@ -4,14 +4,14 @@
 
 ### Configuration :
 - Select the material.
-- Select Length, Thickness, Width of material and configure. 
-- Click on Next Level.
+- Select length, thickness, width of material and configure. 
+- Click on "Next Level".
 
 ### Calculations : 
-- Enter the Force between 1 to 50 (N).
-- Calculate pressure and enter it's value if the value is correct further calculations will be enabled and if the value is Incorrect then formula followed by correct answer will be displayed after 3 attempts.
-- Calculate output voltage and enter it's value, if the value is correct further calculations will be enabled and if the value is Incorrect then formula followed by correct answer will be displayed after 3 attempts.
-- Calculate Charge Q, after calculating correct answer click on Next Reading button and similarly calculate other 4 readings for the same material.
+- Enter the force between 1 to 50 (N).
+- Calculate pressure and enter it's value if the value is correct further calculations will be enabled and if the value is incorrect then formula followed by correct answer will be displayed after 3 attempts.
+- Calculate output voltage and enter it's value, if the value is correct further calculations will be enabled and if the value is incorrect then formula followed by correct answer will be displayed after 3 attempts.
+- Calculate charge Q, after calculating correct answer click on "Next Reading" button and similarly calculate other 4 readings for the same material.
 - After calculating 5 readings select another material from the top and repeat the same process by selecting another material.
 - After recording 5 readings for the new material, click the "Compare with Previous Material" button.
 
@@ -25,8 +25,8 @@
 
 ### Testing : 
 - Select the material for testing.
-- Select Appropriate dimensions i.e length , width and height and click on check configuration.
+- Select appropriate dimensions i.e length , width and height and click on check configuration.
 - If the selected parameters are correct, the Height and Weight fields will be enabled, while the remaining configuration parameters above will be disabled.
 - Enter a height between 1 and 100 cm, input the appropriate weight, and click "Start." You will then see the force required on digital meter.
-- Click on Reset button and take trials for different height and weight.
+- Click on "Reset" button and take trials for different height and weight.
 - If the sensor breaks due to certain parameters, click the "Reselect" button to adjust the configuration and repeat the process, taking different trials. After recording 5 readings, you can proceed to the next level's results page. 
diff --git a/experiment/simulation/css/analysis.css b/experiment/simulation/css/analysis.css
@@ -2,7 +2,7 @@
 	background-color: #e9ecef;
 }
 .row{
-	margin:10px;
+	margin:0px;
 
 }
 table{
@@ -11,36 +11,36 @@ table{
     font-size: 16px;
 }
 .NotAttained{
-	background-color: #e23939;
+	background-color: #ec4848c4;
     padding: 5px;
-    color: #fff;
-    border-redius: 10px;
+    color: #000;
+    border-radius: 10px;
 
 }
  .tableData{
  font-size: 16px;
     font-weight: 200;
  }  
 .attained{
-background-color: green;
+	background-color: #bff0a8;
     padding: 5px;
-    color: #fff;
-    border-redius: 10px;
+    color: #000;
+    border-radius: 10px;
 
 }
 .table-bordered {
     border: 4px solid #ddd;
 }
 .panel-danger{
 	    box-shadow: 0px px 6px 6px #8c9bb9;
-   background-color: #072323;
+   background-color: #a5a6a64f;
     border-radius: 17px;
 
 }
 #panelbody{
-	    background-color: #243535;
-	    color: #fff;
-/* 	     border-radius: 26px; */
+	    background-color: #2e3f4d;
+	     border-radius: 10px;
+		color: #fff;
 }
 /* #mainDiv { */
 /*     height: 1000px; */
@@ -101,19 +101,19 @@ margin-bottom: 30px;
 .counterPanelGreen{
 	margin-bottom: 20px;
     margin-top: 26px;
-    background-color: #34ae50;
+    background-color: #34ae50a6;
 }
 .counterPanelRed{
 	margin-bottom: 20px;
     margin-top: 26px;
-    background-color: #ec4848;
+    background-color: #ec4848bd;
 }
 .valueBox
 {
 text-align: center;
     width: 100%;
     background: #fff;
-   padding: 14px;
+   padding: 8px;
     margin: 5% 0;
 /*     -webkit-box-shadow: 0 6px 6px 6px #d7d8da; */
     -moz-box-shadow: 0 6px 6px 6px #d7d8da;

diff --git a/experiment/simulation/index.html b/experiment/simulation/index.html
@@ -42,21 +42,24 @@
 	<div  class="col-sm-12">
 	<div class="row">
 	<div class="col-sm-3"></div>
-	<div class="col-sm-2" id="materialType" style="margin-top:10px;"  hidden>
+	<div class="col-sm-2" id="materialType" style="margin-top:5px;margin-bottom:5px;"  hidden>
     <label class="labelstyle" id="labelType" >Select Material type: </label>   
     </div>
      <div class="col-sm-4">
-	   <select  class="form-control selectConf" id="material"  style="height:auto;margin-top:10px;" hidden>
+	   <select  class="form-control selectConf" id="material"  style="margin-top:5px;margin-bottom:5px;" hidden>
 	   <option value="0">--- Select the Material --- </option>'
 	   <option value="10" id="BariumTitanate" >Barium titanate </option>
 	   <option value="20" id="Quartz">Quartz</option>
 
         </select>          
         </div>
         <div class="col-sm-2">
+         <button type="button" class="btn btn-primary btnMarin" data-toggle="modal" style="margin-top:5px;margin-bottom:5px;" data-target="#exampleModal" id = "btnForModal">
+	  Procedure
+	</button>
         </div>
         <div class="col-sm-1">
-        <button type="button" class="btn btn-danger"  id="nextLevelChar" style="width:100%;margin-top: 16px;margin-left:100px;" hidden>Next Level</input>
+        <button type="button" class="btn btn-danger"  id="nextLevelChar" style="width:100%;margin-top: 5px;margin-left:100px;margin-bottom:5px;" hidden>Next Level</input>
 
         </div>
             </div> 
@@ -116,6 +119,28 @@ <h4 class="modal-title" style="font-weight: 600;"></h4>
   </div>
 <!--   Model end -->
 
+
+<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-lg" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="exampleModalLabel">Procedure</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body1" style="    overflow-y: scroll;height:600px;margin-left:10px; ">
+        ...
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">OK</button>
+<!--         <button type="button" class="btn btn-primary">OK</button> -->
+      </div>
+    </div>
+  </div>
+</div>
+
+
 	<footer>
 Copyrights &copy; COEP - Virtual Lab
 </footer>
@@ -156,4 +181,56 @@ <h4 class="modal-title" style="font-weight: 600;"></h4>
 });
 </script>
 
+<script>
+
+var htm = '';
+
+htm+= '<h3>Basic Knowledge:</h3>'
++'<ul>'
++'<li>Answer all the questions and click on "Submit Test" button.</li>'
++'</ul>'
+
++'<h3>Configuration:</h3>'
++'<ul>'
++'<li>Select the material.</li>'
++'<li>Select length, thickness, width of material and configure.</li>'
++'<li>Click on "Next Level".</li>'
++'</ul>'
+
++'<h3>Calculations:</h3>'
++'<ul>'
++'<li>Enter the Force between 1 to 50 (N).</li>'
++'<li>Calculate pressure and enter its value; if the value is correct, further calculations will be enabled. If the value is incorrect, the formula followed by the correct answer will be displayed after 3 attempts.</li>'
++'<li>Calculate output voltage and enter its value; if the value is correct, further calculations will be enabled. If the value is incorrect, the formula followed by the correct answer will be displayed after 3 attempts.</li>'
++'<li>Calculate charge Q. After calculating the correct answer, click on the Next Reading button and similarly calculate the other 4 readings for the same material.</li>'
++'<li>After calculating 5 readings, select another material from the top and repeat the same process by selecting another material.</li>'
++'<li>After recording 5 readings for the new material, click the "Compare with Previous Material" button.</li>'
++'</ul>'
+
++'<h3>Standard Observations:</h3>'
++'<ul>'
++'<li>Here, you can compare the difference between the standard calculations for both materials.</li>'
++'<li>Click "Next Level" at the top.</li>'
++'</ul>'
+
++'<h3>Actual Observations:</h3>'
++'<ul>'
++'<li>Here, you can find the difference between standard values and observed values for both materials.</li>'
++'<li>Click "Next Level" at the top.</li>'
++'</ul>'
+
++'<h3>Testing:</h3>'
++'<ul>'
++'<li>Select the material for testing.</li>'
++'<li>Select appropriate dimensions (i.e., length, width, and height) and click on check configuration.</li>'
++'<li>If the selected parameters are correct, the Height and Weight fields will be enabled, while the remaining configuration parameters above will be disabled.</li>'
++'<li>Enter a height between 1 and 100 cm, input the appropriate weight, and click "Start." You will then see the force required on the digital meter.</li>'
++'<li>Click on "Reset" button and take trials for different heights and weights.</li>'
++'<li>If the sensor breaks due to certain parameters, click the "Reselect" button to adjust the configuration and repeat the process, taking different trials. After recording 5 readings, you can proceed to the result.</li>'
++'</ul>'
+
+$(".modal-body1").html(htm);
+
+</script>
+
 </html>
diff --git a/experiment/simulation/src/graph.js b/experiment/simulation/src/graph.js
@@ -45,12 +45,23 @@
 //		}
 		console.log(" Voltage output V/S charge  " + graphData1);
 		Highcharts.chart('sub-main-div2', {
+
+			legend: {
+				    symbolPadding: 0,
+				    symbolWidth: 0,
+				    symbolHeight: 0,
+				    squareSymbol: false,
+				    enabled : false
+				  },
+				exporting: { enabled: false },
+				credits: { enabled: false},
+
 			title: {
 				text: 'Barium Titanate '
 			},
-//			subtitle: {
-//				text: 'Meter Constant is  pulses (per/ltr)'
-//			},
+			subtitle: {
+				text: ''
+			},
 			xAxis: {
 				min: Xmin,
 				max: Xmax,
@@ -141,12 +152,22 @@ function graphCreate1(masterJson)
 //		}
 		console.log(" Voltage output V/S charge  " + graphData1);
 		Highcharts.chart('sub-main-div1', {
+			legend: {
+				    symbolPadding: 0,
+				    symbolWidth: 0,
+				    symbolHeight: 0,
+				    squareSymbol: false,
+				    enabled : false
+				  },
+				exporting: { enabled: false },
+				credits: { enabled: false},
+
 			title: {
 				text: 'Quartz '
 			},
-//			subtitle: {
-//				text: 'Meter Constant is  pulses (per/ltr)'
-//			},
+			subtitle: {
+				text: ''
+			},
 			xAxis: {
 				min: Xmin,
 				max: Xmax,

diff --git a/experiment/simulation/src/result.js b/experiment/simulation/src/result.js
@@ -1,7 +1,8 @@
 function result(){
+	$("#btnForModal").prop("hidden",true);
 
 
-	var correctVal = (counterMasterJson.questionary.correctAnswer/6).toFixed(2);
+var correctVal = (counterMasterJson.questionary.correctAnswer/6).toFixed(2);
 var quesPercent = (correctVal*100).toFixed(1);
 quesPercent = parseFloat(quesPercent);
 
@@ -22,6 +23,10 @@ var quartzPercent = (quartzCalculate*100).toFixed(1);
 quartzPercent = parseFloat(quartzPercent);
 console.log(quartzPercent);
 
+
+var totPercent = ((parseFloat(bariumPercent)+parseFloat(quartzPercent)/2)).toFixed(1);
+totPercent = parseFloat(totPercent);
+
 var sub = counterMasterJson.sensorTesting.totalCnt - counterMasterJson.sensorTesting.sensorBreakTesting;
 var testingPercent = (100*sub/counterMasterJson.sensorTesting.totalCnt).toFixed(1);
 testingPercent = parseFloat(testingPercent);
@@ -39,8 +44,8 @@ var htm = ''
 
 	+ '<div class="col-md-4">'
 	+ ' <div class="panel remarkBground" >'
-	+ ' <div class="panel-body remark" ><center style="    font-size: 16px;">Congratulations!!! <br> <b>Piezo electric transducer experiment is completed successfully!!</b>'
-	+ '<br> <b>Satisfactory performance</b></center></div>'
+	+ ' <div class="panel-body remark" ><center style="    font-size: 16px;">Congratulations!!! <br> <b>Piezo electric transducer simulation is completed !!</b>'
+//	+ '<br> <b>Satisfactory performance</b></center></div>'
 	+ '</div>'
 	+ '</div>'
 
@@ -103,34 +108,50 @@ var htm = ''
 		 +'<br><table class="table table-bordered ">'
 		   +'  <thead class="thead-dark">'
 		   +'    <tr class="">'
-		   +'      <th><center class="">COMPETENCY(PIEZO ELECTRIC SENSOR)</center></th>'
+		   +'      <th><center class="">COMPETENCY (PIEZO ELECTRIC SENSOR)</center></th>'
 		   +'     <th><center class="">STATUS</center></th>'
 		   +'    </tr>'
 		   +' </thead>'
 		   +'  <tbody>'
 		   +'   <tr>'
 		   +'     <td class=""><center>Basic knowledge</center></td>'
-		   +'     <td class=""><center class="attained"> Attained</center></td>'
-
-		   +'  </tr>'
+		   if(quesPercent>=60){
+		   htm += '     <td class=""><center class="attained"> Attained</center></td>'
+		   }else{
+			htm +='     <td class=""><center class="NotAttained"> Not Attained</center></td>'
+
+		}
+		   htm += '  </tr>'
 		   +'  <tr>'
 		   +'     <td class=""><center>Configuration</center></td>'
 		   +'     <td class=""><center class="attained"> Attained</center></td>'
 		   +' </tr>'
 		   +'   <tr>'
 		  +'     <td class=""><center>Calculation</center></td>'
-		   +'     <td class=""><center class="attained">Attained</center></td>'
-
-		   +'  </tr>'
+		  if(totPercent>=60){
+		   htm += '     <td class=""><center class="attained">Attained</center></td>'
+		  }else{
+			htm +='     <td class=""><center class="NotAttained"> Not Attained</center></td>'
+
+		}
+		   htm +='  </tr>'
 		   +'  <tr>'
-		+'<td class=""><center>Observation</center></td>'
+		+'<td class=""><center>Standard Observations</center></td>'
+		   +'<td class=""><center class="attained">Attained</center></td>'
+		   +' </tr>'
+		     +'  <tr>'
+		+'<td class=""><center>Actual Observations</center></td>'
 		   +'<td class=""><center class="attained">Attained</center></td>'
 		   +' </tr>'
 		   +'<tr>'
 		  +' <td class=""><center>Testing</center></td>'
-		   +'<td class=""><center class="attained"> Attained</center></td>'
-
-		   +'  </tr>'
+		  if(testingPercent>=60){
+		   htm += '<td class=""><center class="attained"> Attained</center></td>'
+		  }else{
+			htm +='     <td class=""><center class="NotAttained"> Not Attained</center></td>'
+
+		}
+		   htm +='  </tr>'
 
 		   +' </tbody>'
 		  +' </table>'
@@ -240,7 +261,7 @@ var htm = ''
 		+' <div class="panel panel-danger  " style="    margin-bottom: 28px;">'
 		+'<center><span class="valueBox">Wrong Attempts</span></center>'
 		+' <div class="panel-body counterPanelRed">'
-
+     
 		+'<center><span class="valueBox"><b>'+BariumCalculateActual+'</b></span></center>'
 		+'</div>'
 		+'</div>'