Merge pull request #27 from virtual-labs/dev

updated

experiment/procedure.md

@@ -2,18 +2,18 @@
 ### Basic Knowledge :
 - Select the type of load cell from the options at the top. 
 - Answer all the questions and click on "Submit Test" button.
-- Click on next level.
+- Click on "Next Level".
 
 ### Configuration :
 - Select the configuration parameters.
 - If column type load cell selected then, calculate area and enter its value if the value is correct, click on Configure. If the entered value is incorrect then formula followed by correct answer will be displayed after 3 attempts. 
-- Click on Next Level.
+- Click on "Next Level".
 
 ### Construction of Wheatstone bridge:-
 - Click on a component from the left panel to select it. The selected component will appear on the right, where you can drag and drop the component to adjust its position.
-- You can select any image or connection and click the delete button to modify it, if needed.
+- You can select any component or connection and click the delete button to modify it, if needed.
 - Use drag-and-drop to connect the ports and construct the Wheatstone bridge.
-- After making the connections, click the "Validate Connection" button to verify them. If the connections are incorrect three times, a popup message will appear, and on the fourth attempt, a hint will be provided. If the connections are correct, you will be redirected to the next page. 
+- After completing the connections, click the "Validate Connection" button to check them. If the connections are incorrect three times, a popup will notify you, and on the fourth attempt, a hint will be displayed. Once the connections are correct, you'll be redirected to the next page. 
 
 ### Calculations : 
 - Enter a load between 1000 and 10000 N for the column-type load cell, and for the cantilever-type load cell, the load range is between 10 and 100 N.
@@ -24,7 +24,7 @@
 - Select the supply voltage Eb and click "Submit." Note that this selection cannot be changed a second time.
 - Calculate the 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.
 - Now, calculate the same for the other applied loads.
-- Click on Next Level button.
+- Click on "Next Level" button.
 
 ### Characterization :
 - Select any load for which you want to calculate the error and sensitivity.

experiment/simulation/css/analysis.css

@@ -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;

experiment/simulation/css/style.css

@@ -10,6 +10,11 @@
 /*         } */
 
 
+ .img-responsive {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
 
  .draggable {
             cursor: pointer;

experiment/simulation/index.html

@@ -42,14 +42,19 @@
 
 	</header>
 	<div  class="row container" id = "rowHide" style="margin-top:20px;">
-	<div  class="col-sm-1">
+	<div  class="col-sm-2">
+
+	  <button type="button" class="btn btn-primary btnMarin" data-toggle="modal" style="margin-bottom:15px;" data-target="#exampleModal" id = "btnForModal">
+	  Procedure
+	</button>
+
 <!-- 	 <label for="sel1">Select list (select one):</label> -->
 	 </div>
 	<div  class="col-sm-3">
 	 <label for="sel1">Select type of load cell : </label>
 	 </div>
 
-     <div  class="col-sm-4"> 
+     <div  class="col-sm-3"> 
       <select class="form-control" id="typeCell" name="sellist1" style="margin-bottom:10px;">
         <option value="0">--- Select type of load cell --- </option>
 	   <option value="15">Column type load cell</option>
@@ -65,8 +70,31 @@
      <div  class="col-sm-2"> 
       <button type="button" id="validateCon" class="btn-info" data-dismiss="modal" data-toggle="modal" data-target="#myModal" style="margin-top:-1px;margin-bottom:10px;" hidden>Validate Connection</button>
      </div>
-
+
+      </div>
+
+
+      <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;margin-top: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>
+
+
 <div  class="row container-fluid" id="main-div" >
 <div class="col-lg-6" id="canvas">
 	             <div class="panel panel-primary" >
@@ -94,7 +122,7 @@
 
 	     			<center><label> Select Type of load sell </label></center>
 	     			</div>
-
+	     		<div class="panel-body" id="main-div-conf11" ></div>
 	     		</div>
 	   	</div>
 
@@ -176,6 +204,62 @@ <h4 class="modal-title" style="font-weight: 600;"></h4>
 
 }  
 </script>
+<script>
 
+var ht = '';
+
+ht += '<li>'
++'<strong>BASIC KNOWLEDGE:</strong>'
++'<ol>'
++'<li>Select the type of load cell from the options at the top.</li>'
++'<li>Answer all the questions and click on the "Submit Test" button.</li>'
++' <li>Click on "Next Level".</li>'
++'</ol>'
++'</li>'
++'<li>'
++'<strong>CONFIGURATION:</strong>'
++'<ol>'
++'<li>Select the configuration parameters.</li>'
++'<li>If a column-type load cell is selected, calculate the area and enter its value. If the value is correct, click on "Configure". If the entered value is incorrect, a formula followed by the correct answer will be displayed after 3 attempts.</li>'
++' <li>Click on "Next Level".</li>'
++'</ol>'
++'</li>'
++'<li>'
++'<strong>CONSTRUCTION OF WHEATSTONE BRIDGE:</strong>'
++'<ol>'
++'    <li>Click on a component from the left panel to select it. The selected component will appear on the right, where you can drag and drop the component to adjust its position.</li>'
++'    <li>You can select any component or connection and click the delete button to modify it, if needed.</li>'
++'    <li>Use drag-and-drop to connect the ports and construct the Wheatstone bridge.</li>'
++'   <li>After completing the connections, click the "Validate Connection" button to check them. If the connections are incorrect three times, a popup will notify you, and on the fourth attempt, a hint will be displayed. Once the connections are correct, you will be redirected to the next page.</li>'
++'</ol>'
++'</li>'
++'<li>'
++'<strong>CALCULATIONS:</strong>'
++'<ol>'
++'<li>Enter a load between 1000 and 10000 N for the column-type load cell, and for the cantilever-type load cell, the load range is between 10 and 100 N.</li>'
++' <li>Calculate Axial Strain and enter its value. If the value is correct, further calculations will be enabled. If the value is incorrect, a formula followed by the correct answer will be displayed after 3 attempts.</li>'
++' <li>Calculate Transverse Strain and enter its value. If the value is correct, further calculations will be enabled. If the value is incorrect, a formula followed by the correct answer will be displayed after 3 attempts.</li>'
++'   <li>Repeat the same process for different loads to calculate axial and transverse strain. Calculate the load for 5 readings and click on "Next Level".</li>'
++'  <li>Select one of the loads to calculate output voltage and click on "Submit".</li>'
++' <li>Select the supply voltage Eb and click "Submit." Note that this selection cannot be changed a second time.</li>'
++'    <li>Calculate the output voltage and enter its value. If the value is correct, further calculations will be enabled. If the value is incorrect, a formula followed by the correct answer will be displayed after 3 attempts.</li>'
++'   <li>Now, calculate the same for the other applied loads.</li>'
++'  <li>Click on "Next Level" button.</li>'
++'</ol>'
++'</li>'
++'<li>'
++'<strong>CHARACTERIZATION:</strong>'
++'<ol>'
++' <li>Select any load for which you want to calculate the error and sensitivity.</li>'
++' <li>Calculate the error for the selected load (error = standard reading - actual reading).</li>'
++'  <li>Calculate the sensitivity (sensitivity = actual output / input).</li>'
++' <li>After submitting the correct value for sensitivity, click on the "Result" button for analysis.</li>'
++'</ol>'
++'</li>'
++'</ol>'
+$(".modal-body1").html(ht);
+
+
+</script>
 
 </html>

experiment/simulation/src/calculation.js

@@ -19,6 +19,9 @@ var wrongTransCnt = 0;
 
 function columnType(){
 
+	$("#delete-btn").prop("hidden",true);
+	$("#validateCon").prop("hidden",true);
+
 	var area = parseInt(areaSelect);
 //	console.log("areaSelect"+areaSelect);
 	var mod = parseInt(modSelelect);
@@ -480,7 +483,8 @@ function cantilever(){
      resetDivSize();
      $("#centerText2").html('CALCULATION');
       $("#centerText1").html('CANTILEVER LOAD CELL');
-
+      $("#delete-btn").prop("hidden",true);
+	$("#validateCon").prop("hidden",true);
 //      var htm = '<img src="images/cantiForCalculate.png" class="img-fluid"  width=95% height=100% ">'
 //      $("#main-div-conf").html(htm);
       finalConfigCanti();

experiment/simulation/src/graphPage.js

@@ -350,6 +350,10 @@ tableMainDiv =	'<div class="col-sm-12">'
 
 	              $("#canvas-div-sub").html(htm);
 
+	        var htm11 = '<img src="images/amplifier.png"  class="img-responsive">'
+	        $("#main-div-conf11").append(htm11);
+
+
 	        var loadErrVal=0;
 	        var selValue = 0;
 	        $("#loadErr").change(function(){
@@ -490,9 +494,13 @@ tableMainDiv =	'<div class="col-sm-12">'
 	    var idd1=1;   
 	 $("#submitSensitivityCheck").click(function(){
 		$("body").css("padding","0px 0px 0px 0px");
-		sensitivityCal = (ranVal1/selValue).toFixed(2);
+//		sensitivityCal = (ranVal1/selValue).toFixed(2);
 //		sensitivityCal = sensitivityCal.toFixed(2);
-		sensitivityCal = parseFloat(sensitivityCal);
+
+        var sensitivityCal1 = (ranVal1/selValue).toFixed(4);
+		var sensitivityCal2 = (sensitivityCal1*1000).toFixed(4);
+
+		sensitivityCal = parseFloat(sensitivityCal2);
 
 		var senseEnter = $("#sensitivity").val();
 
@@ -677,7 +685,7 @@ tableMainDiv =	'<div class="col-sm-12">'
 
 				   +'<div class="row" id="senCheck" hidden>'
 				   +'<div class="col-sm-5">'
-				   +'<label  id=""  class="" style="font-size:16px;margin:15px 10px ;">Calculate Sensitivity of load mV/N :  </label>'
+				   +'<label  id=""  class="" style="font-size:16px;margin:15px 10px ;">Calculate Sensitivity of load V/N :  </label>'
 				   +'</div>'
 				   +'<div class="col-sm-4">'
 				   +'<input type="number" value="" id="sensitivity"  style="margin:10px;margin-left:1px;width:100%;"  class=" form-control" />'
@@ -701,6 +709,9 @@ tableMainDiv =	'<div class="col-sm-12">'
 
 		      $("#canvas-div-sub").html(htm);
 
+	         var htm11 = '<img src="images/amplifier.png"  class="img-responsive">'
+	        $("#main-div-conf11").append(htm11);
+
 	        var loadErrVal=0;
 	        var selValue = 0;
 	        $("#loadErr").change(function(){
@@ -837,9 +848,10 @@ tableMainDiv =	'<div class="col-sm-12">'
 	    var idd1=1;   
 	 $("#submitSensitivityCheck").click(function(){
 		$("body").css("padding","0px 0px 0px 0px");
-		sensitivityCal = (ranVal1/selValue).toFixed(2);
+		var sensitivityCal1 = (ranVal1/selValue).toFixed(4);
+		var sensitivityCal2 = (sensitivityCal1*1000).toFixed(4);
 //		sensitivityCal = sensitivityCal.toFixed(2);
-		sensitivityCal = parseFloat(sensitivityCal);
+		sensitivityCal = parseFloat(sensitivityCal2);
 
 		var senseEnter = $("#sensitivity").val();