Skip to content

Commit

Permalink
Merge pull request #12 from virtual-labs/dev
Browse files Browse the repository at this point in the history 
update
  • Loading branch information
@vlabiitk
vlabiitk authored Dec 13, 2023
2 parents e59998d + 1644c4a commit 70073a9
Show file tree
Hide file tree
Showing 30 changed files with 904 additions and 7 deletions.
198 changes: 198 additions & 0 deletions experiment/simulation/Simulator1.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,198 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Simulator 1</title>

<style>
a {
text-decoration: none;
}

.border {
border: 1px solid black;
}

.text {
background-color: yellow;
border-radius: 21px;
font-size: 22px;
margin-left: 50px;
margin-right: 50px;
padding: 5px;
}

.image-container {
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
align-items: center;
}

.threedimage,
.twodimage {
width: 80%;
height: auto;
padding: 10px;
}

.selected {
box-shadow: 1px -3px 24px 7px rgba(0, 0, 0, 0.76);
-webkit-box-shadow: 1px -3px 24px 7px rgba(0, 0, 0, 0.76);
-moz-box-shadow: 1px -3px 24px 7px rgba(0, 0, 0, 0.76);
}

#result {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 20px;
margin: 5px;
background-color: lightpink;
}

.sim1-image {
width: 100%;
height: auto;
}

.question,
.btn,
input,
label,
#result2 {
font-size: 20px;
}
</style>
</head>

<body>
<button type="button" class="btn btn-outline-info mx-2 my-2"><a href="index.html"> Go to the main page</a></button>
<button type="button" class="btn btn-outline-info m-3"><a href="index.html">Back </a></button>
<button type="button" class="btn btn-outline-info m-3"><a href="Simulator2.html">Next </a></button>
<h2 class="d-flex justify-content-center align-items-center"> Simulator 1 </h2>
<p class="d-flex justify-content-center align-items-center text">Predict the correct 2-D net required to build 3-D
images in the table given below.</p>

<div class="container">
<div class="row">
<div class="col-md-5 ">
<ul type="none" class="image-container">
<li>
<img class="threedimage selected" id="3d1" src="./images/sim1-3d1.png" alt="" />
</li>
<li>
<img class="threedimage" id="3d2" src="./images/sim1-3d2.png" alt="" />
</li>
<li>
<img class="threedimage" id="3d3" src="./images/sim1-3d3.png" alt="" />
</li>
<li>
<img class="threedimage" id="3d4" src="./images/sim1-3d4.png" alt="" />
</li>
</ul>
</div>

<div class="col-md-2">
<p id="result"> </p>
</div>
<div class="col-md-5 ">
<ul type="none" class="image-container">
<li>
<img class="twodimage" id="2d1" src="./images/sim1-2d1.png" alt=""
onclick="handleEtchantButtonClick(this)" />
</li>
<li>
<img class="twodimage" id="2d3" src="./images/sim1-2d3.png" alt=""
onclick="handleEtchantButtonClick(this)" />
</li>
<li>
<img class="twodimage" id="2d4" src="./images/sim1-2d4.png" alt=""
onclick="handleEtchantButtonClick(this)" />
</li>
<li>
<img class="twodimage" id="2d2" src="./images/sim1-2d2.png" alt=""
onclick="handleEtchantButtonClick(this)" />
</li>
</ul>
</div>

</div>

</div>





<script>
// Array of sample ids in the order they should appear
const sampleIds = ["3d1", "3d2", "3d3", "3d4"];
const etchantIds = ["2d1", "2d2", "2d3", "2d4"];

var currentSampleIndex = 0;
var resultElement = document.getElementById("result");
var selectedSample = sampleIds[currentSampleIndex];

function handleEtchantButtonClick(button) {
var selectedEtchant = button.id;

var isCorrect = checkIfCorrectEtching(selectedEtchant);

// Show result

if (isCorrect) {
resultElement.textContent = "Good Job !";
resultElement.style.color = "green";
setTimeout(() => {
// Clear the result message after a delay
resultElement.textContent = "";
// Automatically move to the next sample
moveToNextSample();
}, 100);
} else {
resultElement.textContent = "Incorrect . Please choose the correct image.";
resultElement.style.color = "red";
}

}

function checkIfCorrectEtching(selectedEtchant) {
// Check if the selected etchant matches the expected etchant for the current sample
return selectedEtchant === etchantIds[currentSampleIndex];
}


function moveToNextSample() {
// Remove the 'selected' class from the current sample button
document.getElementById(sampleIds[currentSampleIndex]).classList.remove('selected');

// Increment the sample index
currentSampleIndex++;

// Check if there are more samples
if (currentSampleIndex < sampleIds.length) {
// Add the 'selected' class to the next sample button
document.getElementById(sampleIds[currentSampleIndex]).classList.add('selected');
} else {
resultElement.textContent = "You have completed successfully.";
resultElement.style.color = "green";
}
}


</script>

</body>

</html>
141 changes: 141 additions & 0 deletions experiment/simulation/Simulator2.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Simulator 2</title>

<style>
a {
text-decoration: none;
}

.border {
border: 1px solid black;
}

.text {
background-color: yellow;
border-radius: 21px;
font-size: 22px;
margin-left: 50px;
margin-right: 50px;
padding: 5px;
}

.image-container {
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
align-items: center;
}

.threedimage,
.twodimage {
width: 80%;
height: auto;
padding: 10px;
}

.selected {
box-shadow: 1px -3px 24px 7px rgba(0, 0, 0, 0.76);
-webkit-box-shadow: 1px -3px 24px 7px rgba(0, 0, 0, 0.76);
-moz-box-shadow: 1px -3px 24px 7px rgba(0, 0, 0, 0.76);
}

#result {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 20px;
margin: 5px;
background-color: lightpink;
}

.sim1-image {
width: 100%;
height: auto;
}

.question,
.btn,
input,
label,
#result2 {
font-size: 20px;
}
</style>
</head>

<body>
<button type="button" class="btn btn-outline-info mx-2 my-2"><a href="index.html"> Go to the main page</a></button>
<button type="button" class="btn btn-outline-info m-3"><a href="Simulator1.html">Back </a></button>
<button type="button" class="btn btn-outline-info m-3"><a href="Simulator3.html">Next </a></button>
<h2 class="d-flex justify-content-center align-items-center"> Simulator 2 </h2>
<p class="d-flex justify-content-center align-items-center text">In the square pyramid given below, calculate the area of the section cut by the
plane at a distance one third from the top of the square pyramid. The 8 x 8 square grids are given
representing the top and side views of the square pyramid, respectively. </p>

<div class="container">
<div class="row">
<div class="col-md-12">
<img class="sim1-image" src="./images/sim1-image.png" alt="" />
</div>
</div>

<div class="row">
<div class="col-md-6">
<div id="optionsForm">
<label for="answer">Answer:</label><br>
<input type="text" id="answer" name="answer" placeholder="Enter your answer" autocomplete="off">
square
units<br>
<button type="button" class="btn btn-outline-success mt-3" onclick="checkAnswer()">Submit</button>
</div>
</div>
<div class="col-md-6">
<p id="result2"> </p>
</div>
</div>
</div>




<script>

// for question javascript
function checkAnswer() {
// Get the user's input
var userInput = document.getElementById("answer").value;

// Check if the input is a numeric value
if (!/^\d+$/.test(userInput)) {
document.getElementById("result2").innerHTML = "Please enter a numeric value.";
document.getElementById("result2").style.color = "red";
return;
}

// Check if the numeric value is correct (4000)
if (parseInt(userInput) === 4) {
document.getElementById("result2").innerHTML = "Correct!";
document.getElementById("result2").style.color = "green";
} else {
document.getElementById("result2").innerHTML = "Wrong answer. Try again.";
document.getElementById("result2").style.color = "red";
}
}
</script>

</body>

</html>
Loading

0 comments on commit 70073a9

Please sign in to comment.