Merge pull request #6 from virtual-labs/dev

Simulation Updated and pretest and postest explainations updated

experiment/procedure.md

@@ -1,32 +1,23 @@
-## Assumptions
-•	The springs have no masses.
-<br>
-•	No dampers are provided.
+### Procedure
 
-## Description
+<div style="text-align:left">
+  Click on the Simulation icon <img src="images/simulation.png" alt="Alt text" style="height:80px; width:80px;">  to view the simulation. 
 
-1.	At first page, the page will be displayed as shown below:
+   ![Alt text](images\Screen1.png)
+
+   In order to view the variable section click on the Variable icon. <img src="images/var1.png" alt="Alt text" style="height:80px; width:80px;">
 
-![](images/Procedure/1.png)
+   ![Alt text](images/variable11.png)
 
-<br>
-2. Change the values of initial excitation given to masses m<sub>1</sub> and m<sub>2</sub> (X<sub>o1</sub> and X<sub>o2</sub>). So that, the motion of masses will be initiated to the input given.
+   Click on Play icon <img src="images/play1.png" alt="Alt text" style="height:80px; width:80px;"> to run the simulation and click on Pause icon <img src="images/pause.png" alt="Alt text" style="height:80px; width:80px;"> to stop it.
 
-![](images/Procedure/2.png)
-<br>
+   Click on the Next icon  <img src="images/next2.png" alt="Alt text" style="height:80px; width:80px;"> to go further.  
 
-3.	You can change the stiffness constants k<sub>1</sub> and k<sub>2</sub>, value of masses m<sub>1</sub> and m<sub>2</sub> according to your convenience and can check the output response of system.
+   ![Alt text](images/screen2.png)
 
-4. You can pause the animation by clicking the  ![](images/Procedure/3.png)  button.
+   Click on the Next or Prev icon<img src="images/prenex.png" alt="Alt text" style="height:80px; width:80px;"> to cycle through different pages. 
 
-5.	To play the animation again, click ![](images/Procedure/4.png)   button.
-
-6.	If you want to check the values of natural frequencies, their respective mode shape ratios and equation of motion of masses m<sub>1</sub> and m<sub>2</sub>, you can click  ![](images/Procedure/5.png)  button. The representation of second page is shown below:
-
-![](images/Procedure/6.png)
-
-7.	If you want to go back, Click ![](images/Procedure/7.png)   button.
-
-8.	If you want to go further to see the mode shapes of system, Click ![](images/Procedure/8.png)   button. The representation of third page is shown below.
-
-![](images/Procedure/9.png)
+   ![Alt text](images/vibrationlastscreen.png)
+click on the result icon to view the result.<img src="images/result.png" alt="Alt text" style="height:80px; width:80px;"> 
+![Alt text](images/Result2.png)
+</div>

experiment/simulation/css/general.css

@@ -0,0 +1,233 @@
+:root {
+  --clr-title-background: #089b93;
+  --clr-title-background2: rgb(8, 195, 185);
+  --clr-title-background3: rgb(65, 116, 114);
+  --clr-text-clr: #ffffff;
+  --clr-container-clr: #9fdeff;
+  --clr-body-clr: #ebe7e7;
+  --clr-side-background2: rgb(28, 138, 138);
+  --clr-side-background3: rgb(75, 77, 77);
+}
+*,
+*,
+*::before,
+*::after {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 62.5%;
+  font-family: "Nunito", sans-serif;
+}
+
+body {
+  font-weight: 400;
+  line-height: 1.6;
+  font-size: 1.6rem;
+  position: relative;
+  width: 60%;
+  margin: auto;
+}
+
+h2,
+h3 {
+  color: #333;
+}
+
+::-webkit-scrollbar {
+  width: 0.5rem;
+  left: -5rem;
+}
+
+::-moz-scrollbar {
+  width: 0.5rem;
+  left: -5rem;
+}
+
+.ui-widget input,
+.ui-selectmenu-button,
+.ui-widget textarea,
+.ui-widget button,
+.ui-select option {
+  font-family: "Nunito", sans-serif;
+  font-size: 1.6rem;
+}
+
+/* select menu */
+.ui-selectmenu-button {
+  background-color: #fff;
+}
+
+/*majorly modified here*/
+.ui-spinner {
+  width: 10rem;
+  text-align: center;
+  display: inline-block;
+  overflow: hidden;
+  padding: 0;
+  vertical-align: middle;
+  border: 0 none;
+}
+.ui-spinner-input {
+  width: inherit;
+  font-size: 1.6rem;
+  border: none;
+  background: none;
+  color: inherit;
+  padding: 0 0 0.1rem 0.5rem;
+  margin: 0;
+  vertical-align: middle;
+  outline: none;
+}
+.ui-spinner-button {
+  width: 1.8rem;
+  height: 50%;
+  font-size: 0.5em;
+  padding: 0;
+  margin: 0;
+  text-align: center;
+  position: absolute;
+  cursor: default;
+  display: block;
+  overflow: hidden;
+  right: 0;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+/* vertical centre icon */
+.ui-spinner .ui-icon {
+  position: absolute;
+  margin-top: -8px;
+  top: 50%;
+  left: 50%;
+}
+.ui-spinner .ui-icon:active {
+  outline: none;
+}
+.ui-spinner-up {
+  top: 0;
+  cursor: pointer;
+}
+
+.ui-spinner-down {
+  bottom: 0;
+  cursor: pointer;
+}
+
+.ui-slider {
+  position: relative;
+  text-align: left;
+  background: #d7d7d7;
+  z-index: 1;
+  margin-top: 8px;
+}
+.ui-slider {
+  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
+}
+.ui-slider .ui-slider-handle {
+  background: url(../images/slider_handles.png) 0px -23px no-repeat;
+  position: absolute;
+  z-index: 2;
+  width: 23px;
+  height: 23px;
+  cursor: pointer;
+  border: none;
+  outline: none;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+.ui-slider .ui-state-hover,
+.ui-slider .ui-state-active {
+  background-position: 0 0;
+}
+.ui-slider .ui-slider-range {
+  /* background: #a3cae0; */
+  background: #02498036;
+  position: absolute;
+  z-index: 1;
+  font-size: 0.7em;
+  display: block;
+  border: 0;
+  background-position: 0 0;
+}
+/* .ui-slider .ui-slider-range {
+  -moz-box-shadow: 0 1px 2px rgba(17, 35, 45, 0.6) inset;
+  -webkit-box-shadow: 0 1px 2px rgba(17, 35, 45, 0.6) inset;
+  box-shadow: 0 1px 2px rgba(17, 35, 45, 0.6) inset;
+} */
+
+.ui-slider-horizontal {
+  height: 5px;
+  width: inherit;
+}
+.ui-slider-horizontal .ui-slider-handle {
+  top: -10px;
+  margin-left: -13px;
+}
+.ui-slider-horizontal .ui-slider-range {
+  top: 0;
+  height: 100%;
+}
+.ui-slider-horizontal .ui-slider-range-min {
+  left: 0;
+}
+.ui-slider-horizontal .ui-slider-range-max {
+  right: 0;
+}
+
+.ui-slider-vertical {
+  width: 5px;
+  height: 100px;
+}
+.ui-slider-vertical .ui-slider-handle {
+  left: -8px;
+  margin-left: 0;
+  margin-bottom: -13px;
+}
+.ui-slider-vertical .ui-slider-range {
+  left: 0;
+  width: 100%;
+}
+.ui-slider-vertical .ui-slider-range-min {
+  bottom: 0;
+}
+.ui-slider-vertical .ui-slider-range-max {
+  top: 0;
+}
+
+.select-menu {
+  font-family: "Nunito", sans-serif;
+  font-size: 1.6rem;
+}
+.highlight {
+  background: linear-gradient(
+    to bottom,
+    #f7c3a9da,
+    #c17a53da,
+    #c17a53da,
+    #c17a53da,
+    #c17a53da,
+    #311b10da
+  );
+  height: 100%;
+  width: 0;
+}
+
+.display-hide {
+  display: none;
+}
+
+.display-flex {
+  display: flex;
+}
+
+.svg-style {
+  fill: none;
+  stroke: #bdeaf3;
+}