https://virtual-labs.github.io/exp-monostable-multivibrator-iitkgp cl…

…ick on the link to test your code.

README.md

@@ -0,0 +1,191 @@
+## README
+
+## Quiz
+### 1. Introduction
+This part of the experiment is specifically for assessment purposes. This allows for the creation of a quiz with multiple choice single answer questions.  
+These can be
+* Pretest - Pre requisite quizzes
+* Posttest - Testing the learning
+* Learning Unit Quizzes - Quizzes to test the section's learning.
+The format for the same is discussed below.
+
+### 2. Target Audience
+This guide is meant for anyone creating a virtual lab and wanting to have a quiz section.
+
+### 3. Structure of quiz
+The data for the quiz needs to be added to a json file pertaining the following specifications.
+1. The quiz needs to have an array of objects, each object representing a question. As shown below
+```
+"questions" : [
+    {
+        "question" : "What is 1+2 ?",
+        "answers" : 
+        {
+            "a" : 1,
+            "b" : 2,
+            "c" : 3,
+            "d" : 4
+        },
+        "correctAnswer" : c
+    }
+]
+```
+### 4. Quiz V2.0 (Enhancements done)
+The new format of quiz has multiple new additions. The details for which have been described below.  
+The format of json would be as linked [here](./pretest.json)  
+
+First we will look at the additional fields added  
+
+### 4.1 Fields 
+* Mandatory Fields
+    * [version](#42-version) - Without which the enhanced quiz will not be rendered. 
+    * [levels](#44-levels) -  Adds difficulty level to each question (Allows for filtering)
+
+* Optional Fields
+    * [explanations](#43-explanations) - Adds an explanation to each answer. If wrong answer is choosen, only it's explanation pops up.  If correct answer is choosen, all available explanations pop up.  
+
+### 4.2 Version
+The very first field is absolutely necessary. This ensures that the quiz supports the new features.
+```
+"version": 2.0
+```   
+
+### 4.3 Explanations
+Just like we mention answers, we can have a section for explanation so that they show up after an answer is marked. This is optional and can completely be left out. The three ways of defining (Assuming there are 4 answers a, b, c, d):
+
+1. All answers have explanations
+```
+"explanations": {
+    "a" : "Explanation 1,
+    "b" : "Explanation 2"
+    "c" : "Explanation 3"
+    "d" : "Explanation 4"
+},
+```  
+2. Some answers have explanations
+```
+"explanations": {
+    "a" : "Explanation 1,
+    "d" : "Explanation 4"
+},
+```
+
+3. No answers have explanations
+```
+/* Can be excluded from json */
+```  
+
+
+### 4.4 Levels
+Adds an ability to filter questions based on difficulty levels. This is mandatory and has to be mentioned for each question.  
+The three available difficulty levels are:
+```
+['beginner', 'intermediate', 'advanced']
+```
+Using any other will not work. The format for the same:
+```
+"difficulty" : "beginner"
+```
+
+### 5. Tips
+1. An extra functionality of explanation is the ability to add an Rich Text (HTML Formatted). It will work just like in html.  
+This could be used for
+    a. Adding hyper links
+    b. Formatting text etc.
+```
+"explanations": {
+    "a" : "Explanation 1  <a href='www.google.com'>here</a>",
+    "b" : "Explanation 2"
+},
+```
+> This can be done in either of explanation, answer and the question.
+An example for the same can be found here: source | website
+
+2. Multi Correct
+To mimic the functionality of multi correct questions, one can add options as part of the question itself, and the actual answer options can be like : 
+```
+    "answers" : 
+    {
+        "a" : "both i and ii",
+        "b" : "All i, ii, iii, iv",
+        "c" : "Only i",
+        "d" : "None of the above"
+    }
+```
+An example for the same can be found here: source | website
+
+3. Image Support  
+You can add images to both question and answers, there can be multiple cases of the same. The following examples can be followed.  
+* **Image in question** : Add img tag in question.
+```
+"questions" : [
+    {
+        "question": "$\\\\$ <img src='./images/example.png' alt='question image'/>",
+        "answers" : 
+        {
+            "a" : 1,
+            "b" : 2,
+            "c" : 3,
+            "d" : 4
+        },
+        "correctAnswer" : c
+    }
+]
+```  
+
+* **Image and Text in question** : Add br tag and img tag in question after text. 
+```
+"questions" : [
+    {
+        "question": "This is an example question $\\\\$ <br><img src='./images/example.png' alt='question image'/>",
+        "answers" : 
+        {
+            "a" : 1,
+            "b" : 2,
+            "c" : 3,
+            "d" : 4
+        },
+        "correctAnswer" : c
+    }
+]
+```  
+> The same two cases apply for answers too. [Example Link](https://github.com/virtual-labs/exp-convolutional-codes-iiith/blob/dev/experiment/posttest.json) 
+
+**Make sure the image aspect ratio remains constant and good to maintain the structure**
+
+### 6. Manual Validation of Quiz Json (wrt version 2.0)
+This is till the automatic validation is set up.
+* The first field has to be version with 2 or 2.0 as value.
+* The questions needs to be an array of objects containing questions.
+* Each question object should hav a question field, answers field, difficulty field and correctAnswer field.
+    * question : Should be a string
+    * answer : Should be an object containing options, and each option should be a string.
+    * difficulty : should be a string and should have values from ["beginner", "intermerdiate", "advanced"]
+    * correctAnswer : Should be a string and it's value should be present in keys of one of the answer.
+* If explanation is present it has to be an object and needs to follow the description of answer object.  
+
+### 7. Test Cases
+- [x] Using the mentioned quiz format  
+- [x] Using the old quiz json format
+- [ ] Not including the version in json
+- [ ] Including incorrect version in json 
+- [ ] Including correct version but following old format 
+- [x] Difficulty not mentioned
+- [x] Incorrect difficulty level mentioned
+- [x] explanation not provided for all options
+- [x] explanation empty
+- [x] explanation object not defined
+- [x] HTML in quuestion (tags like hyper links, bold etc)
+- [x] HTML in answer (tags like hyper links, bold etc)
+- [x] HTML in explanation (tags like hyper links, bold etc)
+- [x] On wrong annswer only wrong answer is colored red
+- [x] On correct answer all red color resets
+- [x] Combination of filters working properly
+- [x] If all questions have same difficulty, filter option should be hidden.
+- [x] When questions are answered after filtering, marks should be counted out of filtewred questions, not total.
+- [x] On wrong answer only explanation of wrong answer is shown
+- [x] On correct answer all available explanations are shown
+
+### 8. TODO
+* Add automatic schema validation
+* Link to source files implementing the above tips.

aim.md

@@ -0,0 +1,9 @@
+## Aim of the experiment
+
+1. To perform a Monostable Multivibrator using 555 Timer
+2. To observe and plot the Trigger Input Voltage.
+3. To observe and plot the Output Voltage.
+4. To observe and plot the Capacitance Voltage.
+5. Calculate the practical time period by the waveform.
+6. Calculate the theoretical time period by 1.1R<sub>A</sub>C.
+7. Calculate the frequency of the waveform.

assesment.log

@@ -0,0 +1,30 @@
+=/pretest.json
+{
+  _: [],
+  f: [
+    '/home/runner/work/exp-monostable-multivibrator-iitkgp/exp-monostable-multivibrator-iitkgp/experiment/pretest.json'
+  ],
+  files: [
+    '/home/runner/work/exp-monostable-multivibrator-iitkgp/exp-monostable-multivibrator-iitkgp/experiment/pretest.json'
+  ],
+  c: 'assessment',
+  contentTypes: 'assessment',
+  'content-types': 'assessment',
+  '$0': 'validate'
+}
+Validated true
+=/posttest.json
+{
+  _: [],
+  f: [
+    '/home/runner/work/exp-monostable-multivibrator-iitkgp/exp-monostable-multivibrator-iitkgp/experiment/posttest.json'
+  ],
+  files: [
+    '/home/runner/work/exp-monostable-multivibrator-iitkgp/exp-monostable-multivibrator-iitkgp/experiment/posttest.json'
+  ],
+  c: 'assessment',
+  contentTypes: 'assessment',
+  'content-types': 'assessment',
+  '$0': 'validate'
+}
+Validated true

assets/css/common-styles-responsive.css

@@ -0,0 +1,97 @@
+.slidecontainer {
+    text-align: center;
+}
+
+.slider {
+    width: 10%;
+}
+
+.text-box {
+    padding: 7px 20px;
+    margin: 8px 0;
+    box-sizing: border-box;
+    width: 14%; 
+}
+
+.legend { list-style: none; }
+.legend li { padding-bottom : 1.5vw; width: 20vw; }
+.legend span { border: 0.1vw solid black; float: left; border-radius: 50%;}
+.legend .grey { background-color: grey; }
+.legend .green { background-color: #a4c652; }
+.legend .black { background-color: black; }
+
+.button-input {
+    border-radius: 50vw;
+    background-color: #288ec8;
+    border: none;
+    color: white;
+    padding: 1%;
+    margin-left: 1%;
+    margin-right: 1%;
+    padding-bottom: 1%;
+    padding-top: 1%;
+    padding-left: 2%;
+    padding-right: 2%;
+}
+
+.button-input:hover {
+    background-color:gray;
+    cursor:pointer;
+}
+
+.comment-box {
+    position: relative;
+    padding: 1vw;
+    width: 30vw;
+    text-align: center;
+}
+
+.instruction-box {
+    position: relative;
+    width: 100%;
+    transition: width 0.2s ease-out;
+    border: 0.1vw solid grey;
+    z-index : 10;
+}
+
+.collapsible {
+    background-color: Transparent;
+    color: "grey";
+    cursor: pointer;
+    width: 100%;
+    border: none;
+    text-align: center;
+    outline: none;
+    font-weight: bold;
+    padding-top: 1%;
+    padding-bottom: 1%;
+}
+
+.collapsible::-moz-focus-inner {
+    border: 0;
+}
+
+.active, .collapsible:hover {
+    background-color: "white";
+}
+
+/*The unicode \25BE is for ▾ (Dropdown arrow) */
+.collapsible:after {
+    content: "\25BE";
+    color: "grey";
+    font-weight: bold;
+    float: right;
+    margin-left: 5px;
+}
+
+.active:after {
+    content: "\25B4";
+}
+
+.content {
+    padding: 0 1.8vw;
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.2s ease-out;
+    background-color: "white";
+}