",
+ "b": "
",
+ "c": "
",
+ "d": "
"
+ },
+ "explanations": {
+ "a": "Explanation 1",
+ "b": "Explanation 2",
+ "c": "Explanation 3",
+ "d": "Explanation 4: Standard nomenclature is adopted."
+ },
+ "correctAnswer": "d",
+ "difficulty": "beginner"
+ },
+
+ {
+ "question": "9. Choose the correct statement.",
+ "answers": {
+ "a": "SCR is a fully controlled device.",
+ "b": "SCR is a semi-controlled device.",
+ "c": "SCR is a uncontrolled device.",
+ "d": "All the above statements are false."
+ },
+ "explanations": {
+ "a": "Explanation 1",
+ "b": "Explanation 2: SCR is turned- ON using firing pulses but it cannot be turned- OFF by removing firing pulses. Hence, it a semi-controlled device.",
+ "c": "Explanation 3",
+ "d": "Explanation 4"
+ },
+ "correctAnswer": "b",
+ "difficulty": "beginner"
+ },
+
+ {
+ "question": "10. SCR is capable of blocking:",
+ "answers": {
+ "a": "neither positive nor negative anode-to-cathode voltages.",
+ "b": "only positive anode-to-cathode voltages.",
+ "c": "only negative anode-to-cathode voltages.",
+ "d": "both positive and negative anode-to-cathode voltages."
+ },
+ "explanations": {
+ "a": "Explanation 1",
+ "b": "Explanation 2",
+ "c": "Explanation 3",
+ "d": "Explanation 4: SCR is capable of blocking both polarities of anode-to-cathode voltage (VAK). During forward blocking it blocks positive VAK and during reverse blocking it blocks negative VAK."
+ },
+ "correctAnswer": "d",
+ "difficulty": "beginner"
+ },
+
+ {
+
+ "question": "11. Which of the following statements is correct?",
+ "answers": {
+ "a": "MOSFET is a voltage controlled device",
+ "b": "Switching speed of IGBT is faster than MOSFET",
+ "c": "MOSFET is a current controlled device",
+ "d": "MOSFET is suitable for line frequency AC-DC rectifiers"
+ },
+ "explanations": {
+ "a": "Explanation 1: MOSFET conducts when gate pulses or positive Gate-to-Source voltage is applied. Hence, it is a voltage controlled device.",
+ "b": "Explanation 2",
+ "c": "Explanation 3",
+ "d": "Explanation 4"
+ },
+ "correctAnswer": "a",
+ "difficulty": "beginner"
+ },
+
+ {
+
+ "question": "12. Which of the following is the correct for MOSFET from application point of view?",
+ "answers": {
+ "a": "High power, high frequency",
+ "b": "Low power, high frequency",
+ "c": "Low power, low frequency",
+ "d": "High power, low frequency"
+ },
+ "explanations": {
+ "a": "Explanation 1",
+ "b": "Explanation 2: MOSFET is capable of operating at high switching frequencies and hence it is used in low power applications.",
+ "c": "Explanation 3",
+ "d": "Explanation 4"
+ },
+ "correctAnswer": "b",
"difficulty": "beginner"
}
+
]
}
diff --git a/experiment/procedure.md b/experiment/procedure.md
index 37929cc..f0308da 100644
--- a/experiment/procedure.md
+++ b/experiment/procedure.md
@@ -1 +1,112 @@
-### Procedure
\ No newline at end of file
+### Procedure
+
+
+### For “Low frequency switching device (SCR)”
+
+**1. 'v-i' Characteristics using meters:**
+
+a) Click on ‘Connections’ icon. A table containing all will terminals appear.
+
+b) Click on each starting terminal and observe the corresponding connection.
+
+c) After all nodes are connected, Click on ‘Connections Completed’ icon.
+
+d) ‘Switch- ON’ the main supply (Vin).
+
+e) Click on ‘Start Experiment’ icon.
+
+
+**On the Experiment page:**
+
+a) Observe the ‘v-i’ characteristics plotted on the graph on the right side. They are plotted for three different values of gate currents (Ig) by using the data logging features of the meters.
+
+**2. 'v-i' Characteristics using probes and oscilloscope:**
+
+a) Click on ‘Connections’ icon. A table containing all will terminals appear.
+
+b) Click on each starting terminal and observe the corresponding connection.
+
+c) After all nodes are connected, Click on ‘Connections Completed’ icon.
+
+d) ‘Switch- ON’ the main supply (Vin).
+
+e) Click on ‘Start Experiment’ icon.
+
+
+**On the Experiment page:**
+
+a) Click on the ‘Rg’ slider to set it at an initial maximum value of 25 kΩ. This sets the gate current (Ig) to zero.
+Click on the Resistance icon- ‘R’ to set the load.
+
+b) Click on the ‘vin’ slider to set the main supply voltage to 15 V (rms)
+
+c) Click on the ‘plot’ icon. Observe the Reverse blocking and Forward blocking characteristics on the graph.
+
+d) Click on the ‘Rg’ slider to set it to 750 Ω. Observe the gate current ‘Ig’. Click on the ‘plot’ icon. Observe the forward conduction characteristics of the SCR.
+
+e) Repeat Step-4 for Rg = 150 Ω and 50 Ω.
+
+
+### For “Medium frequency switching device (IGBT)”
+
+**Output Characteristics using probes and oscilloscope:**
+
+a) Click on ‘Make connections’ icon.
+
+b) A table listing all the terminals pops up. This a simple series circuit. Click on each ‘From’ terminal one after the other.
+
+c) Observe the simultaneous connection being formed.
+
+d) Once all the terminals are connected, click on ‘Connections Completed’ icon.
+
+e) ‘Switch- ON’ the main supply.
+
+f) ‘Switch- ON’ the Gate-to-Source supply.
+
+g) Click on ‘Start Experiment’.
+
+
+**On the Experiment page:**
+
+a) Click on the Resistance icon- ‘R’ to set the load.
+
+b) Set the initial Gate-to-Source voltage ‘VGS’ using the slider.
+
+c) Vary the Main voltage (Vin) using the “Vin” slider.
+
+d) Click on ‘Plot’ to trace the characteristics.
+
+e) Repeat Steps-2 to 4 for a total of five values of Gate-to-Source voltage (VGE).
+
+
+### For “High frequency switching device (MOSFET)”
+
+**Output Characteristics using probes and oscilloscope:**
+
+a) Click on ‘Make connections’ icon.
+
+b) A table listing all the terminals pops up. This a simple series circuit. Click on each ‘From’ terminal one after the other.
+
+c) Observe the simultaneous connection being formed.
+
+d) Once all the terminals are connected, click on ‘Connections Completed’ icon.
+
+e) ‘Switch- ON’ the main supply.
+
+f) ‘Switch- ON’ the Gate-to-Source supply.
+
+g) Click on ‘Start Experiment’.
+
+
+**On the Experiment page:**
+
+a) Click on the Resistance icon- ‘R’ to set the load.
+
+b) Set the initial Gate-to-Source voltage ‘VGS’ using the slider.
+
+c) Vary the Main voltage (Vin) using the “Vin” slider.
+
+d) Click on ‘Plot’ to trace the characteristics.
+
+e) Repeat Steps-2 to 4 for a total of five values of Gate-to-Source voltage (VGS).
+
diff --git a/experiment/references.md b/experiment/references.md
index b15b47e..02acb08 100644
--- a/experiment/references.md
+++ b/experiment/references.md
@@ -1 +1,5 @@
-### Link your references in here
\ No newline at end of file
+### References
+
+1. R. Erickson & D. Maksimović, Fundamentals of Power Electronics. Springer Nature, July 2020
+
+2. M. H. Rashid, Power Electronics: Devices, Circuits, and Applications. Pearson Education Limited, 2014.
diff --git a/experiment/simulation/Dom.js b/experiment/simulation/Dom.js
new file mode 100644
index 0000000..4f68dc5
--- /dev/null
+++ b/experiment/simulation/Dom.js
@@ -0,0 +1,240 @@
+
+// global for document object
+const get = (query) => {
+ return document.querySelector(query);
+};
+
+const getAll = (query) => {
+ return document.querySelectorAll(query);
+};
+
+class Dom {
+ constructor(selector) {
+ this.item = null;
+ if (selector[0] == "." || selector[0] == "#") {
+ this.item = get(selector);
+ } else if (selector instanceof HTMLElement) {
+ this.item = selector;
+ } else {
+ this.item = src.get(selector);
+ }
+ this.selector = selector;
+ // push
+ }
+ getValue(){
+ return this.item.attributes['value'].value
+ }
+ setValue(val){
+ this.item.attributes['value'].value = val;
+ }
+ setAttribute(attribute,value){
+ this.item.attributes[attribute] = value
+ }
+ getAttribute(attribute){
+ this.item.attributes[attribute].value
+ }
+ hidden(isHidden) {
+ if (isHidden == false) this.item.style.visibility = "visible";
+ else this.item.style.visibility = "hidden";
+ }
+ setContent(text) {
+ this.item.innerHTML = text;
+ return this;
+ }
+ zIndex(idx) {
+ this.item.style.zIndex = idx;
+ return this;
+ }
+ opacity(val = 1) {
+ this.item.style.opacity = val;
+ return this;
+ }
+ rotate(deg) {
+ this.item.style.transform = `rotate(${deg}deg)`;
+ return this;
+ }
+ addClass(className) {
+ this.item.classList.add(className);
+ return this;
+ }
+ removeClass(className) {
+ this.item.classList.remove(className);
+ return this;
+ }
+ borderRadius(amount) {
+ amount += "px";
+ this.styles({
+ borderRadius: amount,
+ });
+ }
+ scale(val = 1) {
+ this.item.style.scale = val;
+ return this;
+ }
+ get() {
+ return this.item;
+ }
+ set(
+ left = null,
+ top = null,
+ height = null,
+ width = null,
+ bottom = null,
+ right = null,
+ disp = "block"
+ ) {
+ // coordinates
+ this.left = left;
+ this.top = top;
+ this.bottom = bottom;
+ this.right = right;
+ this.height = height;
+ this.width = width;
+ this.item.style.opacity = 1;
+ this.item.style.transform = "translateX(0) translateY(0)";
+
+ if (this.left !== null) this.item.style.left = String(this.left) + "px";
+ if (this.top !== null) this.item.style.top = String(this.top) + "px";
+ if (this.bottom !== null)
+ this.item.style.bottom = String(this.bottom) + "px";
+ if (this.right !== null) this.item.style.right = String(this.right) + "px";
+ if (this.height !== null)
+ this.item.style.height = String(this.height) + "px";
+ if (this.width !== null) this.item.style.width = String(this.width) + "px";
+ this.show(disp);
+ return this;
+ }
+ show(disp = "block") {
+ //! push for every element
+ this.push();
+
+ this.item.style.display = disp;
+ // this.opacity();
+ return this;
+ }
+ hide() {
+ this.item.style.display = "none";
+ return this;
+ }
+ play(speed = 1) {
+ this.item.play();
+ this.item.playbackRate = speed;
+ return this;
+ }
+ // for setting styles
+ styles(props) {
+ for (let property in props) {
+ this.item.style[property] = props[property];
+ }
+ return this;
+ }
+ // * static elements/objects of anime
+ static arrayOfAnimes = [];
+ static arrayOfItems = [];
+ static animePush(animeObj) {
+ Dom.arrayOfAnimes.push(animeObj);
+ }
+ static resetAnimeItems() {
+ Dom.arrayOfAnimes = [];
+ }
+ static hideAll() {
+ //to empty the setCC
+ setCC("");
+ // to delete all content of content adder menu
+ Scenes.items.contentAdderBox.setContent("");
+ for (let i of Dom.arrayOfItems) {
+ i.hide();
+ i.opacity();
+ }
+ // * reset animes
+ for (let i of Dom.arrayOfAnimes) {
+ // to reset each anime after back btn pressed
+ i.reset();
+ }
+ Dom.resetItems();
+ }
+ static resetItems() {
+ Dom.arrayOfItems = [];
+ }
+ static setBlinkArrowRed(
+ isX = true,
+ left = null,
+ top = null,
+ height = 30,
+ width = null,
+ rotate = 0
+ ) {
+ let blinkArrow = new Dom(".blinkArrowRed")
+ .set(left, top, height, width)
+ .rotate(rotate)
+ .zIndex(10000);
+ if (isX === -1) {
+ blinkArrow.hide();
+ return;
+ }
+ let x = 0,
+ y = 0;
+ if (isX) {
+ x = 20;
+ } else {
+ y = 20;
+ }
+ var blink = anime({
+ targets: blinkArrow.item,
+ easing: "easeInOutQuad",
+ opacity: 1,
+ translateX: x,
+ translateY: y,
+ direction: "alternate",
+ loop: true,
+ autoplay: false,
+ duration: 300,
+ });
+
+ return blink;
+ }
+ static setBlinkArrow(
+ isX = true,
+ left = null,
+ top = null,
+ height = 60,
+ width = 60,
+ rotate = 0
+ ) {
+ // because we added the blinkArrow image out of the anime-main
+ top += 130;
+ let blinkArrow = new Dom(".blinkArrow")
+ .set(left, top, height, width)
+ .rotate(rotate)
+ .zIndex(10000);
+ if (isX === -1) {
+ blinkArrow.hide();
+ return;
+ }
+ let x = 0,
+ y = 0;
+ if (isX) {
+ x = 20;
+ } else {
+ y = 20;
+ }
+ var blink = anime({
+ targets: blinkArrow.item,
+ easing: "easeInOutQuad",
+ opacity: 1,
+ translateX: x,
+ translateY: y,
+ direction: "alternate",
+ loop: true,
+ autoplay: false,
+ duration: 300,
+ });
+
+ return blink;
+ }
+ push() {
+ if (this.selector != ".anime-header") Dom.arrayOfItems.push(this);
+ return this;
+ }
+ forMathematicalExpressionBtn = 0;
+ }
\ No newline at end of file
diff --git a/experiment/simulation/EE4/.vscode/settings.json b/experiment/simulation/EE4/.vscode/settings.json
new file mode 100644
index 0000000..5b06ac3
--- /dev/null
+++ b/experiment/simulation/EE4/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "liveServer.settings.port": 5506
+}
\ No newline at end of file
diff --git a/experiment/simulation/EE4/css/EE4_styling.css b/experiment/simulation/EE4/css/EE4_styling.css
new file mode 100644
index 0000000..4c49f47
--- /dev/null
+++ b/experiment/simulation/EE4/css/EE4_styling.css
@@ -0,0 +1,88 @@
+.connections-box{
+ border: solid 1px black;
+ display: flex;
+ width: 504px;
+ position: absolute;
+ z-index: 100;
+ }
+ .connections-box .btn-box span{
+ padding: 5px 10px;
+ font-weight: bold;
+ font-size: 16px;
+ }
+ .connections-box .head{
+ background-color: #ffc000;
+ width: 70px!important;
+ }
+ .connections-box .btn-box{
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 0;
+ width: 44px;
+ border-radius: none;
+ cursor: pointer;
+ }
+ .connections-box .middle-border{
+ border-bottom: 2px solid;
+ width: 502px;
+ top: 30px;
+ position: absolute;
+ }
+
+ .part_2_connections_box{
+ display: none;
+ }
+
+ .part_1_1_connections_box{
+ display: none;
+ width: auto;
+ }
+ .part_1_1_connections_box .middle-border{
+ width: 422px;
+ }
+
+ .part_1_2_connections_box{
+ display: none;
+ }
+
+
+/* Table style */
+.table{
+ display: none;
+ position: absolute;
+ border: 1px solid black;
+ border-collapse: collapse;
+}
+
+.table td, .table th {
+ height: 25px;
+ padding: 0 20px;
+ font-weight: bold;
+ text-align: center;
+ border: 1px solid black;
+}
+
+.part_2_table th{
+ background-color: #002060;
+ color: white;
+}
+
+/* part3 table */
+.part3_table_two{
+ width: 430px;
+}
+
+.part3_table_two th,
+.part3_table_two td
+{
+ width: 73px!important;
+ font-size: 13px;
+ padding: 0!important;
+}
+
+.part3_table_two th{
+ font-size: 15px!important;
+ height: 15px!important;
+}
diff --git a/experiment/simulation/EE4/css/certificate.css b/experiment/simulation/EE4/css/certificate.css
new file mode 100644
index 0000000..6fbf347
--- /dev/null
+++ b/experiment/simulation/EE4/css/certificate.css
@@ -0,0 +1,72 @@
+@import url("https://fonts.googleapis.com/css?family=Open+Sans|Pinyon+Script|Rochester|Homemade+Apple");
+
+.certificate {
+ position: absolute;
+ box-shadow: inset 0px 0px 20px 12px #3d246c;
+ min-width: 800px;
+ min-height: 400px;
+ border: 14px solid #3d246c;
+ flex-direction: column;
+ display: none;
+ padding-top: 35px;
+}
+
+.certificate .header {
+ transform: translateY(-25px);
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+}
+
+.certificate .student-detail {
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+ align-items: center;
+}
+
+.cursive {
+ font-size: 1.8rem;
+ font-family: "Pinyon Script", cursive !important;
+ font-family: "Rochester", cursive !important;
+ font-style: italic;
+ /* font-family: "Homemade Apple", cursive !important; */
+}
+
+.certificate hr {
+ width: 90%;
+}
+
+.sans {
+ font-family: "Open Sans", sans-serif;
+ text-align: center;
+}
+
+.title {}
+
+.bold {
+ font-weight: bold;
+}
+
+.red{
+ color: red;
+}
+
+.certificate .logo {
+ height: 80px;
+ /* transform: translateY(-25px); */
+}
+
+.certificate .row {
+ display: flex;
+ flex-direction: column;
+}
+
+.btn-save{
+ display: none;
+}
+
+.certificate #certificateStuName{
+ font-size: 1.8rem;
+ border-bottom: 2px solid black;
+}
\ No newline at end of file
diff --git a/experiment/simulation/EE4/css/chart.css b/experiment/simulation/EE4/css/chart.css
new file mode 100644
index 0000000..2fab3e3
--- /dev/null
+++ b/experiment/simulation/EE4/css/chart.css
@@ -0,0 +1,15 @@
+.chart {
+ display: none;
+ position: absolute;
+ padding: 10px;
+ width: fit-content;
+ border-radius: 20px;
+ box-shadow: 3px 3px 12px 0px;
+ height: 220px !important;
+ width: 364px !important;
+}
+
+.chart #myChart {
+ height: 100%!important;
+ width: 100%!important;
+}
\ No newline at end of file
diff --git a/experiment/simulation/EE4/css/component_styling.css b/experiment/simulation/EE4/css/component_styling.css
new file mode 100644
index 0000000..8ddb655
--- /dev/null
+++ b/experiment/simulation/EE4/css/component_styling.css
@@ -0,0 +1,626 @@
+@font-face {
+ font-family: "Cosmic Sans MS";
+ src: url(../fonts/ComicSansMS3.ttf);
+}
+
+.qs{
+ cursor: pointer;
+ display: none;
+ position: absolute;
+ /* display: flex; */
+ text-align: center;
+ box-shadow: 1px 1px 5px lime;
+ border-radius: 10px;
+ font-size: 3.5em;
+ font-weight: bolder;
+ color: white;
+ height: 70px;
+ width: 70px;
+ background-color: #05bc57;
+ justify-content: center;
+ align-items: center;
+ align-content: center;
+}
+
+/* * Slider */
+.slider-box{
+ /* display: none; */
+ position: absolute;
+ /* user-select: none; */
+ }
+
+
+/* table styling */
+
+/* part3 table one */
+.part3_table_one{
+ display: none;
+ bottom: 0px;
+ position: absolute;
+ right: 10px;
+ text-align: center;
+ gap: 20px;
+ border-collapse: collapse;
+}
+.part3_table_one td,tr,th{
+ border: 1px solid black;
+}
+.part3_table_one thead{
+ background-color: #0000cc;
+ color: white;
+}
+.part3_table_one thead tr th{
+ width: 64px;
+}
+.part3_table_one tbody tr{
+ height: 29px;
+}
+.part3_table_one td{
+ text-align: center;
+ font-weight: bold;
+ width: 100px;
+ font-size: 1.2em;
+ padding: 0;
+ margin: 0;
+}
+.part3_table_one th{
+ font-size: 1.2em;
+}
+.part3_table_one tbody tr:nth-child(2n){
+ background-color: #eaeff7;
+}
+.part3_table_one tbody tr:nth-child(2n+1){
+ background-color: #d2deef;
+}
+/*
+.part3_table_one td:nth-child(2){
+ background-color: rgb(194, 194, 194);
+}
+.part3_table_one td:nth-child(3){
+ background-color: rgb(194, 194, 194);
+}
+.part3_table_one td:nth-child(4){
+ background-color: rgb(194, 194, 194); */
+/* } */
+/* .part3_table_one td:nth-child(10){
+ background-color: #ffff00;
+}
+.part3_table_one td:nth-child(11){
+ background-color: #ffc000;
+} */
+
+/* part table two */
+.part3_table_two{
+ display: none;
+ position: absolute;
+ right: 10px;
+ width: 500px;
+ text-align: center;
+ border-collapse: collapse;
+}
+.part3_table_two td,tr,th{
+ border: 1px solid black;
+}
+.part3_table_two thead{
+ /* background-color: #0000cc; */
+ background-color: #660066;
+ color: white;
+}
+.part3_table_two thead tr th{
+ width: 10px;
+ font-size: 16px;
+ padding: 0;
+ height: 60px;
+}
+
+.part3_table_two tbody tr{
+ height: 20px;
+}
+.part3_table_two td{
+ text-align: center;
+ font-weight: bold;
+ width: 10px;
+ font-size: 16px;
+ padding: 0 14px!important;
+ margin: 0;
+}
+/* .part3_table_two tbody tr:nth-child(2n){
+ background-color: #eaeff7;
+}
+.part3_table_two tbody tr:nth-child(2n+1){
+ background-color: #d2deef;
+} */
+.part3_table_two.v0-bg td:nth-child(5){
+ background-color: rgb(194, 194, 194);
+}
+.part3_table_two.v0-bg td:nth-child(6){
+ background-color: rgb(194, 194, 194);
+}
+.part3_table_two.m-bg td:nth-child(7){
+ background-color: rgb(194, 194, 194);
+}
+.part3_table_two.m-bg td:nth-child(8){
+ background-color: rgb(194, 194, 194);
+}
+.part3_table_two.iIn-bg td:nth-child(9){
+ background-color: rgb(194, 194, 194);
+}
+.part3_table_two.iIn-bg td:nth-child(10){
+ background-color: rgb(194, 194, 194);
+}
+
+
+/* part3 table three */
+.part3_table_three{
+ width: 1000px;
+ display: none;
+ bottom: 0px;
+ position: absolute;
+ right: 10px;
+ text-align: center;
+ gap: 20px;
+ border-collapse: collapse;
+}
+.part3_table_three td,tr,th{
+ border: 1px solid black;
+}
+.part3_table_three thead{
+ background-color: #0000cc;
+ color: white;
+}
+.part3_table_three thead tr th{
+ width: 426px;
+}
+.part3_table_three tbody tr{
+ height: 29px;
+}
+.part3_table_three td{
+ text-align: center;
+ font-weight: bold;
+ width: 426px;
+ font-size: 1.2em;
+ padding: 0;
+ margin: 0;
+}
+.part3_table_three th{
+ font-size: 1.2em;
+}
+.part3_table_three tbody tr:nth-child(2n){
+ background-color: #eaeff7;
+}
+.part3_table_three tbody tr:nth-child(2n+1){
+ background-color: #d2deef;
+}
+/*
+.part3_table_three td:nth-child(2){
+ background-color: rgb(194, 194, 194);
+}
+.part3_table_three td:nth-child(3){
+ background-color: rgb(194, 194, 194);
+}
+.part3_table_three td:nth-child(4){
+ background-color: rgb(194, 194, 194); */
+/* } */
+/* .part3_table_three td:nth-child(10){
+ background-color: #ffff00;
+}
+.part3_table_three td:nth-child(11){
+ background-color: #ffc000;
+} */
+/* table four */
+
+.deactive{
+ pointer-events: none;
+ cursor:not-allowed;
+ user-select: none;
+ opacity: 0.9;
+ box-shadow: none!important;
+}
+.disabled{
+ pointer-events: none;
+ cursor:not-allowed;
+ user-select: none;
+ opacity: 0.9;
+ box-shadow: none!important;
+}
+
+.graph_box{
+ display: none;
+ padding: 0 0 22px 22px;
+ width: 377px;
+ height: 242px;
+ position: absolute;
+ right: 10px;
+ top: -75px;
+ box-sizing: border-box;
+ background-color: white;
+ border-radius: 20px;
+ box-shadow: 2px 2px 4px;
+}
+
+.graph{
+ /* background-color: white; */
+ padding: 5px;
+ /* background-color: #202020; */
+ display: none;
+}
+
+/* ! Next Btn Deactive class */
+.btn-deactive{
+ transition: 1s;
+ opacity: 0.7;
+ cursor: not-allowed;
+ background-color: rgb(97, 97, 97)!important ;
+ box-shadow: none!important;
+ color: black;
+ pointer-events: none;
+}
+
+.btn-deactive:hover {
+ box-shadow: none!important;
+}
+
+.btn-deactive:active{
+ opacity: none!important;
+ transform: none!important;
+}
+
+/* * Part 3 table two btns */
+.btn-box1 button{
+ background-color: #0000ff;
+}
+
+.btn-box2 button{
+ background-color: #d26315;
+}
+.btn-box3 button{
+ background-color: #5d8c3b;
+}
+
+.table-btn{
+ color: white;
+ position: relative;
+ width: 31.5%;
+ padding: 5px;
+ font-size: 1.2em;
+ font-weight: bold;
+ z-index: 1000;
+ border-radius: 10px;
+ cursor: pointer;
+ border: 2px solid black
+}
+.table-btn:hover{
+ border-color: white;
+ transition: 0.2s;
+}
+.table-btn:active{
+ transition: 0s;
+ border-color: black;
+ background-color: black;
+}
+
+/* ! Delte reset */
+.btn-delete{
+ background-color: #05056f;
+ color: white;
+ font-weight: bold;
+ display: none;
+ z-index: 1000;
+ position: absolute;
+ border-radius: 20px;
+ font-size: 1.25em;
+ padding: 12px 7px;
+ width: 90px;
+ /* top: 360px;
+ left: 10px; */
+
+}
+
+.btn-reset{
+ background-color: #5d8c3b;
+ color: white;
+ font-weight: bold;
+ display: none;
+ z-index: 1000;
+ position: absolute;
+ border-radius: 20px;
+ font-size: 1.25em;
+ padding: 12px 7px;
+ width: 90px;
+ /* top: 360px;
+ left: 120px; */
+
+}
+.btn-record{
+ background-color: #975f52;
+ color: white;
+ font-weight: bold;
+ display: none;
+ z-index: 1000;
+ position: absolute;
+ border-radius: 20px;
+ font-size: 1.25em;
+ padding: 12px 0px;
+ width: 90px;
+ /* top: 360px;
+ left: 120px; */
+
+}
+
+/* ! check connection and circuit diagram btn */
+.btn-check-connections{
+ background-color: #d26315!important;
+ color: white;
+ font-weight: bold;
+ display: none;
+ z-index: 1000;
+ position: absolute;
+}
+
+.btn-circuit-diagram{
+ background-color: #7937aa!important;
+ color: white;
+ font-weight: bold;
+ display: none;
+ z-index: 1000;
+ position: absolute;
+}
+
+/* ! check reset hint btn for ee3 */
+
+.ee3-btn-check{
+ background-color: #814141;
+ color: white;
+ font-weight: bold;
+ display: none;
+ z-index: 1000;
+ position: absolute;
+ border-radius: 20px;
+}
+.ee3-btn-reset{
+ background-color: #055794;
+ color: white;
+ font-weight: bold;
+ display: none;
+ z-index: 1000;
+ position: absolute;
+ border-radius: 20px;
+
+}
+.ee3-btn-hint{
+ background-color: #385238;
+ color: white;
+ font-weight: bold;
+ display: none;
+ z-index: 1000;
+ position: absolute;
+ border-radius: 20px;
+}
+
+
+
+.bg-black{
+ background-color: black!important;
+}
+
+.theory{
+ height: 495px;
+ width: 950px;
+ top: -46px;
+ left: 0;
+ z-index: 1001;
+}
+
+
+.btn-transparent {
+ display: block;
+ position: absolute;
+ width: 92px;
+ height: 35px;
+ bottom: -95px;
+ right: -3px;
+ border-radius: 8px;
+ font-weight: bolder;
+ z-index: 6000;
+ }
+
+ .btn-transparent:active {
+ box-shadow: #422800 2px 2px 0 0;
+ transform: translate(4px, 4px);
+ }
+
+ .btn-disabled{
+ color: gray;
+ box-shadow: none;
+ background-color: #f1f2f4;
+ user-select: none;
+ cursor: not-allowed;
+ /* pointer-events: none; */
+ }
+ .btn-disabled:active{
+ opacity: none!important;
+ transform: none!important;
+ }
+ .btn-disabled:hover{
+ border: none;
+ box-shadow: none;
+ }
+
+ /* Pop window */
+ .btn-popup-box{
+ display: flex;
+ position: relative;
+ left: 23px;
+ justify-content: center;
+ align-items: center;
+ /* background-color: rgba(0, 0, 0, 0.619); */
+ padding: 0 2px;
+ height: 40px;
+ border-radius: 10px;
+ z-index: 5000;
+ }
+
+ .btn-popup{
+ padding: 8px 10px;
+ margin: 0 2px;
+ font-size: 17px;
+ font-weight: bold;
+ cursor:help;
+ transition: 0.1s;
+ border-radius: 20px;
+ box-shadow: 1px 1px 5px white;
+ }
+
+ .btn-popup:nth-child(1){
+ background-color: #8e4311;
+ }
+ .btn-popup:nth-child(2){
+ background-color: #0505a4;
+ }
+ .btn-popup:nth-child(3){
+ background-color: #3f5f29;
+ }
+
+ .btn-popup:hover ~ .btn-popup-window{
+ display: block!important;
+ }
+ .btn-popup:hover{
+ scale: 0.94;
+ background-color: transparent;
+ }
+
+ .btn-popup-window{
+ display: none;
+ position: absolute;
+ left: -422px;
+ top: 39px;
+ width: 950px;
+ height: 495px;
+ z-index: 5001;
+ }
+
+ .blur{
+ display: none;
+ top: 45px;
+ z-index: 5000;
+ background-color: rgba(0, 0, 0, 0.389);
+ filter: blur(7px);
+ -webkit-filter: blur(7px);
+ }
+
+ /* vertex */
+ .vertex-box{
+ display: none;
+ }
+ .vertex-box .vertex{
+ /* display: none; */
+ position: absolute;
+ /* background-color: black;
+ width: 20px;
+ height: 20px;
+ z-index: 2000;
+ color: white;
+ border-radius: 100vh; */
+ /* left: 10px;
+ top: 20px; */
+ }
+
+ #vertex1{
+ left: 124px;
+ top: 23px;
+}
+ #vertex2{
+ left: 124px;
+ top: 162px;
+}
+#vertex3{
+ left: 205px;
+ top: 309px;
+}
+#vertex4{
+ left: 341px;
+ top: 308px;
+}
+#vertex5{
+ left: 684px;
+ top: 31px;
+}
+
+#vertex6 {
+ left: 682px;
+ top: 181px;
+}
+#vertex7 {
+ left: 427px;
+ top: -16px;
+}
+#vertex8 {
+ left: 573px;
+ top: -16px;
+}
+#vertex9 {
+ left: 387px;
+ top: 307px;
+}
+#vertex10 {
+ left: 497px;
+ top: 307px;
+}
+
+/* ! Added Font */
+.main-window{
+ font-family: "Cosmic Sans MS";
+}
+
+/* !added cursor pointer to imgs */
+.ee3-imgs{
+ cursor: pointer;
+}
+
+/*! part1 boxes of ee3 exp */
+
+.part1_box1{
+ height: 90px;
+ width: 90px;
+ border-radius: 20px;
+ background-color: #f5f29e;
+ position: relative;
+ top: 75px;
+ left: -330px;
+ border: 1px solid #f5f29e;
+}
+
+/* * concept dev */
+
+.concept_development{
+ display: none;
+}
+
+/*! EE4 images */
+.ee4_imgs {
+ cursor: pointer;
+}
+
+.exp-4 th{
+ background-color: #ffc000;
+ color: #203864 ;
+}
+
+.exp-4 {
+ border: 2px solid black;
+ /* width: fit-content; */
+ /* gap: 20px; */
+}
+
+.exp-4 td{
+ border-right: 2px solid black;
+ border-bottom: 2px solid black;
+}
+.part_1_table_1{
+ position: absolute;
+ display: none;
+}
+.part_1_table_2{
+ position: absolute;
+ display: none;
+}
\ No newline at end of file
diff --git a/experiment/simulation/EE4/css/imgs.css b/experiment/simulation/EE4/css/imgs.css
new file mode 100644
index 0000000..b0f5aae
--- /dev/null
+++ b/experiment/simulation/EE4/css/imgs.css
@@ -0,0 +1,63 @@
+.anime-main{
+ position: relative;
+ height: 404px;
+ width: 946px;
+ /* overflow: hidden!important; */
+}
+
+.markings{
+ /* display: none; */
+ opacity: 0;
+ height: 4.8px;
+ width: 38px;
+ height: 10px;
+ top: -30px;
+ left: 212px;
+ z-index: 5;
+ position: relative;
+ /* position: absolute; */
+ /* visibility: hidden; */
+ filter: brightness(0);
+}
+
+.markings2{
+ height: 25px;
+ z-index: 5;
+ position: relative;
+ left: -410px;
+ top: -57px;
+ opacity: 0;
+ display: none;
+}
+.markings3{
+ height: 10px;
+ z-index: 9;
+ position: absolute;
+ left: 59px;
+ filter: brightness(0);
+ top: 120px;
+ opacity: 0;
+ display: none;
+}
+.main-window-imgs{
+ display: none;
+ position: absolute;
+
+}
+.blinkArrow{
+ display: none;
+ filter:brightness(200);
+ position: absolute;
+ z-index: 2000;
+
+}
+.blinkArrowRed{
+ display: none;
+ position: absolute;
+ z-index: 2000;
+}
+
+.main-window-videos{
+ display: none;
+ position: absolute;
+}
diff --git a/experiment/simulation/EE4/css/layout.css b/experiment/simulation/EE4/css/layout.css
new file mode 100644
index 0000000..2ee9a7c
--- /dev/null
+++ b/experiment/simulation/EE4/css/layout.css
@@ -0,0 +1,398 @@
+/* #drawer */
+@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
+body{
+ margin: 0;
+ display: flex;
+ justify-content: center;
+ /* padding-top: 70px; */
+ font-family: Roboto;
+}
+#drawer{
+ font-family: Roboto,Noto,sans-serif;
+ min-width: 230px;
+ max-width: 230px;
+ padding: 10px;
+ background-color: #f8f9fa;
+ height: 638px;
+ overflow-y: auto;
+ grid-area: drawer;
+ grid-column-start: 1;
+}
+
+#drawer ol{
+ list-style: none;
+ margin: 0px auto !important;
+ padding: 0;
+}
+
+#drawer ol li{
+ display: flex;
+ justify-content: start;
+ align-items: center;
+ margin: 6px 0;
+ padding: 3px 10px;
+ min-height: 48px;
+ border-radius: 5px;
+ border: 1px solid rgb(218, 220, 224);
+ counter-increment: li-count;
+ opacity: 0.7;
+ line-height: 20px;
+ font-stretch: 100%;
+}
+
+#drawer ol li a .step{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+#drawer ol li a .step::before{
+ content: counter(li-count);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 26px;
+ min-width: 26px;
+ border-radius: 50%;
+ background-color: gray;
+ margin-right: 8px;
+ font-size: 14px;
+ font-weight: bold;
+ color: white;
+}
+
+.right-container{
+ /* overflow: hidden; */
+ width: 100%;
+ display: flex;
+}
+
+.active{
+ box-shadow: 2px 2px 4px rgba(0,0,0,.15);
+ font-weight: bold!important;
+ opacity: 1!important;
+}
+
+.active .step::before{
+ background-color: #2b80ee!important;
+}
+
+.completed{
+ opacity: 1!important;
+ font-weight: 400;
+}
+
+.completed .step::before{
+ background-color: #2b80ee!important;
+}
+
+/* Other */
+.main-container{
+ display: flex;
+ /* gap: 25px; */
+ /* display: grid; */
+ /* grid-template-areas: "drawer progressBar" */
+ /* "drawer mainWindow"; */
+}
+
+.main-window{
+ background-color: #f1ece3;
+ position: relative;
+ grid-area: mainWindow;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ /* height: calc(100vh - 78px - 60px); */
+ min-height: calc(404px + 200px);
+ width: 950px;
+ border: 2px solid;
+ overflow: hidden;
+}
+
+.main-window .anime-header{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 2rem;
+ font-weight: bold;
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+ height: 50px;
+ color: white;
+ background-color: #3D246C;
+}
+.main-window .anime-footer{
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ /* height: 70px; */
+ height: 55px;
+ color: white;
+ background-color: #5C4B99;
+}
+
+.right-box{
+ display: flex;
+ margin-left: 1%;
+ flex-direction: column;
+ overflow: hiddenw1;
+}
+
+.anime-footer .steps-subtitle{
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+.anime-footer .steps-subtitle .user-name{
+ font-size: 1.05rem;
+ font-weight: bold;
+ background-color: #fff;
+ padding: 10px;
+ border-radius: 10px;
+}
+.anime-footer .steps-subtitle .subtitle{
+ font-size: 1.1rem;
+ font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+ font-weight: bold;
+}
+
+/* Steps Title description */
+.step-heading{
+ display: none;
+ gap: 10px;
+ margin-left: 20px;
+ align-items: center;
+}
+.step-heading .step-title{
+ background-color: #9F91CC;
+ border-radius: 20px;
+ font-weight: bold;
+ padding: 10px 15px;
+}
+
+.step-heading .step-description{
+ font-weight: bold;
+}
+
+.anime-main .measurements{
+ position: absolute;
+ z-index: 300;
+ /* border: 1px solid; */
+ display: none;
+}
+.anime-main .measurements .cell{
+ border: 1px solid;
+}
+
+/* temp text */
+.anime-main .temp-text, .temp-text2{
+ position: absolute;
+ background-color: white;
+ padding: 5px 10px;
+ display: none;
+}
+
+/* Project Welcome */
+.welcome-box{
+ display: none;
+ flex-direction: column;
+ align-items: center;
+ position: absolute;
+ }
+ .welcome-box .title{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-top: 25px;
+ gap: 4px;
+ }
+ .welcome-box .iit-logo{
+ height: 140px;
+ width: 200px;
+ }
+ .welcome-box .prof-img{
+ /* margin-top: 20px; */
+ height: 120px;
+ width: 100px;
+ }
+ .welcome-box .title span{
+ font-size: 1.5rem;
+ }
+ .welcome-box .title span:nth-child(2n - 1){
+ color: red
+ }
+ .welcome-box .title span:nth-child(2n){
+ font-weight: bold;
+ color: black;
+ font-family: Roboto;
+ }
+ .welcome-box .prof-description{
+ font-size: 0.8rem;
+ transform: translate(40px,15px);
+ display: flex;
+ flex-direction: column;
+ align-items: end;
+ padding: 5px;
+ font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+ border: 2px solid;
+ border-radius: 5px;
+ align-self: end;
+ }
+
+ /* Mute Btn */
+.btn-mute{
+ z-index: 500;
+}
+
+/* Video box */
+.video-box{
+ position: absolute;
+ display:none ;
+ /* display: flex; */
+ flex-direction: column;
+ border: 2px solid;
+ box-shadow: 5px 5px 10px 2px black;
+ align-items: center;
+ justify-content: center;
+ z-index: 10;
+ width: fit-content;
+ height: fit-content;
+ border-radius: 3px;
+ overflow: hidden;
+}
+
+/* .video-box .video{
+ /* height: 150px!important; */
+/* } */
+
+.video-box .title{
+ background-color: purple;
+ margin: 0;
+ text-align: center;
+ color: white;
+ padding: 3px;
+ font-size: 1.2em;
+
+}
+
+.video-box .controls{
+ display: flex;
+ background-color: purple;
+ align-items: center;
+ justify-content: space-around;
+ width: 100%;
+}
+.video-box .controls img{
+ height: 26px;
+
+}
+
+.video-box .controls .restart{
+ padding: 2px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+/* Temp texts/titles */
+.temp{
+ display: none;
+ font-weight: bold;
+ font-size: 1.0rem;
+ position: absolute;
+ text-align: justify;
+ background-color: black;
+ color: white;
+ width: 35px;
+ padding: 0 1px;
+ border-radius: 4px;
+}
+
+
+/* Content Adder Boxc */
+.content-adder-box{
+ padding: 10px 5px;
+ /* display: flex; */
+ display: none;
+ flex-direction: column;
+ gap: 5px;
+ height: fit-content;
+ width: fit-content;
+ z-index: 1000;
+ border-radius: 10px;
+ background-color: #5c4b99;
+ box-shadow: 3px 3px 5px ;
+ position: absolute;
+ right: 20px;
+ top: 80px!important;
+}
+
+
+ /* print */
+ @media print{
+ #drawer, .progress-bar, .anime-header, .anime-footer{
+ display: none!important;
+ }
+ .main-window{
+ border: none;
+ }
+ .certificate{
+ display: flex;
+ transform: translateY(400px) rotate(90deg) scale(1.5,2);
+
+
+ }
+ }
+ /* for transparent box */
+ .transparent-box{
+ display: none;
+ height: 100% ;
+ width: 950px;
+ background-color: transparent;
+ z-index: 500;
+ position: absolute;
+
+ }
+
+
+ .image-box{
+ /* display: flex; */
+ display: none;
+ border: 2px solid;
+ text-align: center;
+ flex-direction: column;
+ justify-content: center;
+ /* background-color: white; */
+ height: fit-content;
+ width: fit-content;
+ position: absolute;
+ padding: 3px;
+ border-radius: 10px;
+ box-shadow: 5px 5px 14px ;
+ }
+ .image-box .title{
+ margin: 0;
+ font-weight: bold;
+ }
+ .image-box .image{
+ border-radius: 10px;
+ }
+
+ .pointer{
+ cursor: pointer;
+ }
+
+ .btn-img{
+ transition: 0.1s;
+ }
+ .btn-img:hover{
+ scale: 0.95;
+ }
+ .btn-img:active{
+ filter: opacity(0.9);
+ }
+
+ .btn-img-disabled{
+ /* filter: grayscale(1); */
+ }
+
+
+
\ No newline at end of file
diff --git a/experiment/simulation/EE4/css/progressBar.css b/experiment/simulation/EE4/css/progressBar.css
new file mode 100644
index 0000000..4b55d7e
--- /dev/null
+++ b/experiment/simulation/EE4/css/progressBar.css
@@ -0,0 +1,128 @@
+:root {
+ --primary-color: rgb(11, 78, 179);
+ --gray: #e5e5e5;
+ --gray2: #808080;
+ --blue: #2183dd;
+ --primary: #0d6efc;
+ --green: #009900;
+ --white: #ffffff;
+}
+
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+
+
+
+
+
+
+/* Progressbar */
+.progress-bar {
+ /* width: clamp(320px, 30%, 430px); */
+ grid-area: progressBar;
+ font-family: Roboto;
+ width: 100%;
+ margin-bottom: 10px;
+}
+
+.progressbar {
+ position: relative;
+ display: flex;
+ justify-content: space-between;
+ counter-reset: step;
+}
+
+.progressbar::before,
+.progress {
+ content: "";
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ height: 5px;
+ width: 100%;
+ background-color: var(--gray);
+ z-index: -1;
+}
+
+.progress {
+ background-color: var(--primary);
+ width: 0%;
+ transition: 0.3s;
+}
+
+.progress-step {
+ width: 1.5rem;
+ height: 1.5rem;
+ /* background-color: var(--gray); */
+ background-color: white;
+ border-radius: 50%;
+ border: 2px solid var(--gray2);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.progress-step::before {
+ counter-increment: step;
+ content: counter(step);
+ font-weight: bold;
+ /* content: "\f00c"; */
+}
+
+.progress-step::after {
+ display: none;
+ content: attr(data-title);
+ position: absolute;
+ top: calc(100% + 0.5rem);
+ font-size: 0.85rem;
+ color: #666;
+}
+
+.progress-step-active {
+ background-color: var(--primary);
+ color: #f3f3f3;
+}
+
+/* Form */
+
+
+
+/* Button */
+.btns-group {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 1.5rem;
+}
+
+.btn {
+ box-shadow: 3px 2px 4px 0px black;
+ padding: 0.75rem;
+ display: block;
+ text-decoration: none;
+ /* background-color: var(--primary); */
+ background-color: #FFDBC3;
+ color: black;
+ text-align: center;
+ border: none;
+ border-radius: 0.25rem;
+ cursor: pointer;
+ transition: 0.1s;
+ height: fit-content;
+ margin: 0 10px;
+ font-family: Roboto;
+ font-weight: bold;
+
+}
+
+.btn:hover {
+ box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--green);
+}
+
+.btn:active{
+ opacity: 0.8!important;
+ transform: scale(0.95)!important;
+}
diff --git a/experiment/simulation/EE4/css/quiz.css b/experiment/simulation/EE4/css/quiz.css
new file mode 100644
index 0000000..512981b
--- /dev/null
+++ b/experiment/simulation/EE4/css/quiz.css
@@ -0,0 +1,86 @@
+.quiz-container {
+ z-index: 501;
+ top: 0;
+ position: absolute;
+ color: #000000;
+ border-radius: 10px;
+ box-shadow: 3px 3px 20px 1px black;
+ overflow: hidden;
+ width: 350px;
+ min-height: 350px;
+ height: fit-content;
+ max-width: 100%;
+ /* background-color: #fff5; */
+ background-color: #ffffffc2;
+ backdrop-filter: blur(10px);
+ padding: 0.9rem;
+ display: none;
+ /* border: 2px solid ; */
+ }
+
+
+ .quiz-container h2 {
+ padding: 1rem;
+ font-size: 1.2rem;
+ text-align: center;
+ margin: 0;
+ }
+
+ .quiz-container ul {
+ list-style-type: none;
+ padding: 0;
+ }
+
+ .quiz-container ul li {
+ font-size: 1.2rem;
+ margin: 1rem 0;
+ }
+
+ .quiz-container ul li label {
+ cursor: pointer;
+ }
+
+ .quiz-container button {
+ background-color: #aa84bb;
+ border: none;
+ color: white;
+ cursor: pointer;
+ display: block;
+ font-family: inherit;
+ font-size: 1.1rem;
+ width: 100%;
+ padding: 1rem;
+ border-radius: 5px;
+ }
+
+ .quiz-container button:hover {
+ background-color: #732d91;
+ }
+
+ .quiz-container button:focus {
+ background-color: #5e3370;
+ outline: none;
+ }
+
+ .quiz-container #quizAns{
+ display: none;
+ }
+
+ .quiz-container #closeQuiz{
+ margin: 10px;
+ right: 0;
+ top: 0;
+ position: absolute;
+ font-size: 1rem;
+ color: white;
+ padding: 4px 10px;
+ height: fit-content;
+ font-weight: bold;
+ background-color: #732d91;
+ cursor: pointer;
+ border-radius: 50%;
+}
+ .quiz-container .title{
+ display: flex;
+ justify-content: space-between;
+ }
\ No newline at end of file
diff --git a/experiment/simulation/EE4/css/resultTable.css b/experiment/simulation/EE4/css/resultTable.css
new file mode 100644
index 0000000..44aeb3f
--- /dev/null
+++ b/experiment/simulation/EE4/css/resultTable.css
@@ -0,0 +1,142 @@
+/*
+Responsive HTML Table With Pure CSS - Web Design/UI Design
+
+Code written by:
+👨🏻⚕️ Coding Design (Jeet Saru)
+
+> You can do whatever you want with the code. However if you love my content, you can **SUBSCRIBED** my YouTube Channel.
+
+🌎link: www.youtube.com/codingdesign
+*/
+
+
+
+main.table {
+ width: 82vw;
+ height: 90vh;
+ background-color: #fff5;
+
+ backdrop-filter: blur(7px);
+ box-shadow: 0 .4rem .8rem #0005;
+ border-radius: .8rem;
+
+ overflow: hidden;
+}
+
+main.table__header {
+ width: 100%;
+ height: 10%;
+ background-color: #fff4;
+ padding: .8rem 1rem;
+
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+
+
+
+
+main.table__body {
+ width: 95%;
+ max-height: calc(89% - 1.6rem);
+ background-color: #fffb;
+
+ margin: .8rem auto;
+ border-radius: .6rem;
+
+ overflow: auto;
+ overflow: overlay;
+}
+
+main.table__body::-webkit-scrollbar{
+ width: 0.5rem;
+ height: 0.5rem;
+}
+
+main.table__body::-webkit-scrollbar-thumb{
+ border-radius: .5rem;
+ background-color: #0004;
+ visibility: hidden;
+}
+
+main.table__body:hover::-webkit-scrollbar-thumb{
+ visibility: visible;
+}
+
+main table {
+ width: 100%;
+}
+
+main td img {
+ width: 36px;
+ height: 36px;
+ margin-right: .5rem;
+ border-radius: 50%;
+
+ vertical-align: middle;
+}
+
+main table, th, td {
+ border-collapse: collapse;
+ padding: 1rem;
+ text-align: left;
+}
+
+main thead th {
+ position: sticky;
+ top: 0;
+ left: 0;
+ background-color: #d5d1defe;
+ cursor: pointer;
+ text-transform: capitalize;
+}
+
+main tbody tr:nth-child(even) {
+ background-color: #0000000b;
+}
+
+main tbody tr {
+ --delay: .1s;
+ transition: .5s ease-in-out var(--delay), background-color 0s;
+}
+
+main tbody tr.hide {
+ opacity: 0;
+ transform: translateX(100%);
+}
+
+main tbody tr:hover {
+ background-color: #fff6 !important;
+}
+
+main tbody tr td,
+main tbody tr td p,
+main tbody tr td img {
+ transition: .2s ease-in-out;
+}
+
+main tbody tr.hide td,
+main tbody tr.hide td p {
+ padding: 0;
+ font: 0 / 0 sans-serif;
+ transition: .2s ease-in-out .5s;
+}
+
+main tbody tr.hide td img {
+ width: 0;
+ height: 0;
+ transition: .2s ease-in-out .5s;
+}
+
+
+
+main thead th:hover {
+ color: #6c00bd;
+}
+
+main thead th.active,tbody td.active {
+ color: #6c00bd;
+}
+
diff --git a/experiment/simulation/EE4/css/scenes.css b/experiment/simulation/EE4/css/scenes.css
new file mode 100644
index 0000000..128ec3e
--- /dev/null
+++ b/experiment/simulation/EE4/css/scenes.css
@@ -0,0 +1,116 @@
+.anime-main{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+/* Scene 1 */
+/* step1 */
+.user-input{
+ font-size: 1.5rem;
+ flex-direction: column;
+ display: none;
+ gap: 10px;
+ position: absolute;
+ left: 200;
+}
+.user-input p{
+ margin: 0;
+}
+.user-input *{
+ padding: 10px;
+
+}
+
+.anime-header{
+ display: none;
+ position: relative;
+ top: 0px;
+ z-index: 6000;
+}
+
+/* step2 - project intro */
+.project-intro{
+ top: 50px;
+ padding: 10px;
+ display: none;
+ position: absolute;
+}
+
+.project-intro .heading{
+ font-weight: bold;
+ font-size: 1.1rem;
+}
+.project-intro .description{
+ margin: 5px 0 15px 0;
+ color: rgb(48, 48, 48);
+}
+
+
+
+
+/* Mouse position */
+
+#demo {
+ height: 100%;
+ width: 100%;
+ background-color: #222831;
+}
+
+#info {
+ z-index: 200;
+ padding-left: 10px;
+ border-radius: 10px;
+ position: absolute;
+ user-select: none;
+ font-size: 2em;
+ width: 120px;
+ color: #EEEEEE;
+ background-color: #FD7013;
+}
+
+/* step3 */
+/* input template */
+.temp-input{
+ position: absolute;
+ font-size: 1.5rem;
+ display: none;
+}
+.temp-input span{
+ margin: 5px;
+}
+.error{
+ color: red;
+ font-size: 1rem;
+ text-align: center;
+ display: none;
+}
+.temp-input .input{
+ font-size: 1.5rem;
+ width: 100px;
+ padding: 5px;
+}
+
+.temp-input .submit-btn{
+ margin: 20px 0;
+}
+
+/* step 7 */
+.utm-button{
+ cursor: pointer;
+ background-color: rgb(0, 255, 0);
+ padding: 4px;
+ box-shadow: 1px 1px 10px 3px green;
+ border-radius: 50%;
+ /* border: 1px solid; */
+ left: 251px;
+ top: 147px;
+ position: absolute;
+ z-index: 6;
+ opacity: 0;
+}
+
+.celebration{
+ display: none;
+ position: absolute;
+}
\ No newline at end of file
diff --git a/experiment/simulation/EE4/css/sliders.css b/experiment/simulation/EE4/css/sliders.css
new file mode 100644
index 0000000..b7515ed
--- /dev/null
+++ b/experiment/simulation/EE4/css/sliders.css
@@ -0,0 +1,74 @@
+.slider-box .row1{
+ display: flex;
+ gap: 20px;
+}
+.slider-box .header{
+ color: white;
+ font-size: 1.2rem;
+ font-weight: bold;
+ text-align: center;
+ padding: 2px;
+}
+.slider-box .header_v{
+ background-color: #0000cc;
+}
+.slider-box .header_r{
+ background-color: #c00000;
+
+}
+.slider-box .header_c{
+ background-color: #ff0066;
+ }
+.slider-box .slider{
+ width: 155px;
+ height: 30px;
+}
+.slider-box .slider_vIn{
+ background-color: #fff5cc;
+}
+.slider-box .slider_R{
+ background-color: #f5efff;
+}
+.slider-box .slider_C{
+ background-color: #f5efff;
+}
+.slider-box .slider {
+ font-family: 'Times New Roman', Times, serif;
+ font-weight: bold;
+ font-size: 1.4rem;
+ color: #c00000;
+
+}
+.slider-box .slider option:hover{
+ background-color: #a8cf40;
+}
+.slider-box .slider-box-container-4 .header_d{
+ height: 10px;
+ width: fit-content;
+}
+.slider-box .slider-box-container-4 {
+ margin-top: 20px;
+}
+.slider-box .slider_D_input{
+ width: 50px;
+ height: 30px;
+ font-weight: bold;
+ font-size: 1.1rem;
+ text-align: center;
+ border: 2px solid black;
+ margin-left: 5px;
+ border-radius: 12px;
+}
+.slider-box .slider option:hover{
+ background-color: #a8cf40!important ;
+}
+.slider-box .slider-box-container-4{
+ display: flex;
+ width: fit-content;
+ padding: 7px 18px;
+ border-radius: 81px;
+ background-color: #7030a0;
+}
+.slider-box .slider_D{
+ /* width: 210px; */
+}
\ No newline at end of file
diff --git a/experiment/simulation/EE4/css/table.css b/experiment/simulation/EE4/css/table.css
new file mode 100644
index 0000000..91dbed8
--- /dev/null
+++ b/experiment/simulation/EE4/css/table.css
@@ -0,0 +1,163 @@
+table {
+ background-color: #fff5;
+
+ backdrop-filter: blur(7px);
+ box-shadow: 0 .4rem .8rem #0005;
+ border-radius: .8rem;
+
+ overflow: hidden;
+}
+
+main.table {
+ min-width: 600px;
+ height: 430px;
+ background-color: #fff5;
+
+ backdrop-filter: blur(7px);
+ box-shadow: 0 .4rem .8rem #0005;
+ border-radius: .8rem;
+
+ overflow: overlay;
+}
+.table__header .input-group {
+ width: 35%;
+ height: 100%;
+ background-color: #fff5;
+ padding: 0 .8rem;
+ border-radius: 2rem;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ transition: .2s;
+}
+
+.table__header .input-group:hover {
+ width: 45%;
+ background-color: #fff8;
+ box-shadow: 0 .0.7rem .4rem #0002;
+}
+
+.table__header .input-group img {
+ width: 1.2rem;
+ height: 1.2rem;
+}
+
+.table__header .input-group input {
+ width: 100%;
+ padding: 0 .5rem 0 .3rem;
+ background-color: transparent;
+ border: none;
+ outline: none;
+}
+
+main .table__body {
+ /* width: 95%; */
+ /* max-height: calc(89% - 1.6rem); */
+ background-color: #fffb;
+ display: flex;
+ justify-content: center;
+ border-radius: .6rem;
+
+ overflow: auto;
+ /* overflow: overlay!important; */
+}
+
+.table__body::-webkit-scrollbar{
+ width: 0.5rem;
+ height: 0.5rem;
+}
+
+.table__body::-webkit-scrollbar-thumb{
+ border-radius: .5rem;
+ background-color: #0004;
+ visibility: hidden;
+}
+
+.table__body:hover::-webkit-scrollbar-thumb{
+ visibility: visible;
+}
+
+
+td img {
+ width: 36px;
+ height: 36px;
+ margin-right: .5rem;
+ border-radius: 50%;
+
+ vertical-align: middle;
+}
+
+table, th, td {
+ border-collapse: collapse;
+ padding: 0.7rem;
+ text-align: left;
+}
+table{
+ padding: 0.3rem;
+}
+
+thead th {
+ position: sticky;
+ top: 0;
+ left: 0;
+ background-color: #d5d1defe;
+ cursor: pointer;
+ text-transform: capitalize;
+}
+
+tbody tr:nth-child(even) {
+ background-color: #0000000b;
+}
+
+tbody tr {
+ --delay: .1s;
+ transition: .5s ease-in-out var(--delay), background-color 0s;
+}
+
+tbody tr.hide {
+ opacity: 0;
+ transform: translateX(100%);
+}
+
+tbody tr:hover {
+ background-color: #fff6 !important;
+}
+
+tbody tr td,
+tbody tr td p,
+tbody tr td img {
+ transition: .2s ease-in-out;
+}
+
+tbody tr.hide td,
+tbody tr.hide td p {
+ padding: 0;
+ font: 0 / 0 sans-serif;
+ transition: .2s ease-in-out .5s;
+}
+
+tbody tr.hide td img {
+ width: 0;
+ height: 0;
+ transition: .2s ease-in-out .5s;
+}
+
+
+
+.result-table{
+ position: absolute;
+ left: 400;
+ display: none;
+}
+
+.result-table .table__header{
+ height: "";
+ min-width: 600px!important;
+}
+.result-table th{
+ display: flex;
+ align-items: center;
+}
+
diff --git a/experiment/simulation/EE4/fonts/ComicSansMS3.ttf b/experiment/simulation/EE4/fonts/ComicSansMS3.ttf
new file mode 100644
index 0000000..da55369
Binary files /dev/null and b/experiment/simulation/EE4/fonts/ComicSansMS3.ttf differ
diff --git a/experiment/simulation/EE4/helper/GRAPH/graph.html b/experiment/simulation/EE4/helper/GRAPH/graph.html
new file mode 100644
index 0000000..8bd3618
--- /dev/null
+++ b/experiment/simulation/EE4/helper/GRAPH/graph.html
@@ -0,0 +1,78 @@
+
+
+
+
+ 
+
+ '''.format(name)
+
+def src(name :str):
+ return name[0:name.find('.')] + ":this.allImgsDom[index++],\n"
+
+
+def dom(name):
+ name1 = name[0: name.find(".")]
+ return f'{name1} : new Dom("{name1}"),\n'
+
+
+sneha_folder_path = "E:\\office project\\vlabs-EE\\EE4\\src\\images\\new imgs\\"
+
+# utkarsh_folder_path = "S:\\Users\\Utkarsh\\Documents\\Office Main\\All Projects Repo\\vlabs-EE\\EE4\\src\\images\\exp4\\part2\\"
+
+names = os.listdir(sneha_folder_path)
+
+# namesStr = ''
+# for name in names:
+# namesStr = namesStr + f'{name}\n'
+
+# open("temp3.txt","w").write(namesStr)
+
+# BASE_COUNT = 13
+# count = 168
+
+srcs = ''
+doms = ''
+htms = ''
+for i in range(len(names)):
+ htms = htms + html(names[i])
+ doms = doms + dom(names[i])
+ srcs = srcs + src(names[i])
+
+
+
+
+# open("temp.txt","w").write()
+allItems = f'{htms}\n\n{srcs}\n\n{doms}'
+open("temp2.txt","w").write(allItems)
+
+print("Done 👍")
+# print(os.__path__)
+#
\ No newline at end of file
diff --git a/experiment/simulation/EE4/helper/temp.txt b/experiment/simulation/EE4/helper/temp.txt
new file mode 100644
index 0000000..e69de29
diff --git a/experiment/simulation/EE4/helper/temp2.py b/experiment/simulation/EE4/helper/temp2.py
new file mode 100644
index 0000000..6554647
--- /dev/null
+++ b/experiment/simulation/EE4/helper/temp2.py
@@ -0,0 +1,325 @@
+domitems = '''
+ 
+
+
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+ 
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+ 
+
+
+
+
+
+ 
+
+
+ 
+
+
+
+ 
+
+
+
+
+ 
+'''
+
+names = '''anchor_plate
+anchor_plate
+anchor_plate
+anchor_plate
+beam_3d_1
+beam_3d_1
+beam_3d_with_holes
+beam_3d_with_holes
+ct_prop
+ct_prop
+ct_prop
+ct_prop
+ct_prop
+ct_prop
+foot_adapter
+foot_adapter
+foot_adapter
+head_adapter
+head_adapter
+full_column
+drill_machine
+hammer
+nail
+objective
+real_foot_adapter
+real_head_adapter
+sheathing
+sheathing
+sheathing
+sheathing
+sheathing
+steel
+steel
+steel
+tie_rod
+tie_rod
+tie_rod
+tie_rod
+wing_nut_top
+wing_nut_top
+wing_nut_top
+wing_nut_top
+wing_nut_top
+wing_nut_full
+'''
+
+names = names.split("\n")
+for i in range(27,len(names)+27):
+ l = names[i-27] + ": this.allImgsDom[{0}],".format(i)
+ print(l)
+
\ No newline at end of file
diff --git a/experiment/simulation/EE4/helper/temp2.txt b/experiment/simulation/EE4/helper/temp2.txt
new file mode 100644
index 0000000..a802c50
--- /dev/null
+++ b/experiment/simulation/EE4/helper/temp2.txt
@@ -0,0 +1,68 @@
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+
+formulas_component_stress:this.allImgsDom[134],
+formulas_efficiency:this.allImgsDom[135],
+formulas_ideal:this.allImgsDom[136],
+formulas_nomenclautre:this.allImgsDom[137],
+formulas_non_ideal:this.allImgsDom[138],
+formulas_procedure:this.allImgsDom[139],
+formulas_universal:this.allImgsDom[140],
+graph2_arrow:this.allImgsDom[141],
+
+
+formulas_component_stress : new Dom("formulas_component_stress"),
+formulas_efficiency : new Dom("formulas_efficiency"),
+formulas_ideal : new Dom("formulas_ideal"),
+formulas_nomenclautre : new Dom("formulas_nomenclautre"),
+formulas_non_ideal : new Dom("formulas_non_ideal"),
+formulas_procedure : new Dom("formulas_procedure"),
+formulas_universal : new Dom("formulas_universal"),
+graph2_arrow : new Dom("graph2_arrow"),
diff --git a/experiment/simulation/EE4/helper/temp3.txt b/experiment/simulation/EE4/helper/temp3.txt
new file mode 100644
index 0000000..56fbe1c
--- /dev/null
+++ b/experiment/simulation/EE4/helper/temp3.txt
@@ -0,0 +1,90 @@
+slide_1.png
+slide_2.png
+slide_3_page_1.png
+slide_3_page_2.png
+slide_3_page_3.png
+slide_3_page_4.png
+slide_4_page_1.png
+slide_4_page_1_fan.png
+slide_4_page_2_battery_1.png
+slide_4_page_2_battery_2.png
+slide_4_page_2_battery_3.png
+slide_4_page_2_volt_text.png
+slide_4_page_3_text_1.png
+slide_4_page_3_text_2.png
+slide_4_page_3_wire.png
+slide_5_page_1.png
+slide_5_page_2_text_1.png
+slide_5_page_2_volt_text.png
+slide_5_page_3_1_text_1.png
+slide_5_page_3_2_wire.png
+slide_5_page_3_3_light.png
+slide_5_page_3_4_blast.gif
+slide_5_page_3_5_cross.png
+slide_5_page_3_6_emoji.png
+slide_5_page_3_7_text_2.png
+slide_5_page_3_8_text_3.png
+slide_5_page_4_1_text_1.png
+slide_6_page_1.png
+slide_6_page_2_1_text_1.png
+slide_6_page_2_2_emoji_blink.png
+slide_6_page_3_1_text_1.png
+slide_6_page_3_2_emoji_blink.png
+slide_7_page_1_1.png
+slide_7_page_1_2.png
+slide_7_page_1_3.png
+slide_8_page_1.png
+slide_8_page_2_and_rotate_the_fan.png
+slide_8_page_3_1.png
+slide_8_page_3_2_light.png
+slide_8_page_3_3_blank.png
+slide_8_page_3_4_emoji.png
+slide_8_page_3_5_text.png
+slide_9.png
+slide_10_page_1.png
+slide_10_page_2.png
+slide_10_page_3.png
+slide_10_page_4_1.png
+slide_10_page_4_2_plus.png
+slide_10_page_4_3_minus.png
+slide_10_page_4_4_arrow.png
+slide_10_page_4_5_text.png
+slide_11_page_1.png
+slide_11_page_2_1.png
+slide_11_page_2_2_blink.png
+slide_11_page_3_1.png
+slide_11_page_3_2_rotate_it.png
+slide_11_page_3_3_text_and_arrow.png
+slide_12_page_1.png
+slide_12_page_2_1_pwm_blink.png
+slide_12_page_2_2.png
+slide_12_page_2_3_text.png
+slide_12_page_3_1_pwn_blink.png
+slide_12_page_3_2.png
+slide_12_page_3_3_text.png
+slide_12_page_3_4_text_2.png
+slide_13_page_1.png
+slide_13_page_2.png
+slide_13_page_3_1_plus.png
+slide_13_page_3_2_minus_rotate_both.png
+slide_13_page_3_4.png
+slide_13_page_3_5_text.png
+['slide_14_helper.png',
+'slide_14_page_1.png',
+'slide_14_page_1_ball.png',
+'slide_14_page_2_1_blink.png',
+'slide_14_page_2_2_text.png',
+'slide_14_page_3_1_symbols.png',
+'slide_14_page_3_2_green_graph_and_start_ball.png',
+'slide_14_page_3_3_white_image_for_blue_line.png',
+'slide_15_page_1.png',
+'slide_15_page_1_ball.png',
+'slide_15_page_1_green_graph.png',
+'slide_15_page_1_minus.png',
+'slide_15_page_1_plus.png',
+'slide_15_page_2_1_blink.png',
+'slide_15_page_2_2_text.png',
+'slide_15_page_3_1_arrow_and_text.png',
+'slide_15_page_3_1_white.png',
+'slide_15_page_3_2_graph.png',
+'slide_15_page_3_3_text.png',]
\ No newline at end of file
diff --git a/experiment/simulation/EE4/helper/tempCodeRunnerFile.py b/experiment/simulation/EE4/helper/tempCodeRunnerFile.py
new file mode 100644
index 0000000..0b8a6fb
--- /dev/null
+++ b/experiment/simulation/EE4/helper/tempCodeRunnerFile.py
@@ -0,0 +1,42 @@
+import os
+
+def html(name):
+ return '''
+
+ '''.format(name)
+
+def src(name :str,i :int):
+ return name[0:name.find('.')] + ":this.allImgsDom[{0}],\n".format(i)
+
+
+def dom(name):
+ name1 = name[0: name.find(".")]
+ return f'{name1} : new Dom("{name1}"),\n'
+
+
+names = os.listdir("S:\\Users\\Utkarsh\\Documents\\Project2\\CE8\\src\\images\\Beam and Slab")
+
+count = 108
+
+srcs = ''
+doms = ''
+htms = ''
+for i in range(len(names)):
+ htms = htms + html(names[i])
+ doms = doms + dom(names[i])
+ srcs = srcs + src(names[i],i+count)
+
+
+
+# open("temp.txt","w").write()
+allItems = f'{htms}\n\n{srcs}\n\n{doms}'
+open("temp2.txt","w").write(allItems)
+
+print("Done 👍")
+# print(os.__path__)
+#
\ No newline at end of file
diff --git a/experiment/simulation/EE4/iframes/data/apple-touch-icon.png b/experiment/simulation/EE4/iframes/data/apple-touch-icon.png
new file mode 100644
index 0000000..5add869
Binary files /dev/null and b/experiment/simulation/EE4/iframes/data/apple-touch-icon.png differ
diff --git a/experiment/simulation/EE4/iframes/data/browsersupport.js b/experiment/simulation/EE4/iframes/data/browsersupport.js
new file mode 100644
index 0000000..0b1d9d3
--- /dev/null
+++ b/experiment/simulation/EE4/iframes/data/browsersupport.js
@@ -0,0 +1,7 @@
+!function(e,n,s){function t(e,n){return typeof e===n}function o(){var e,n,s,o,a,i,l;for(var c in f)if(f.hasOwnProperty(c)){if(e=[],n=f[c],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(s=0;s