Merge pull request #5 from virtual-labs/dev

enhancements and fixes for Binary Input Channels Experiment

Author: two-ticks

experiment-descriptor.json

@@ -40,7 +40,7 @@
     {
       "target": "index.html",
       "source": "simulation/binary_erasure_channel.html",
-      "label": "Binary Channels",
+      "label": "Simulation",
       "unit-type": "task",
       "content-type": "simulation"
     },

experiment/aim.md

@@ -1,3 +1 @@
-### Aim of the experiment
-
 This experiment will enable the user to understand the above aspects of these channels. The user is expected to know basics of probability distributions (such as Bernoulli, Binomial, and Gaussian distributions) and the notion of conditional probability, to execute this experiment. The user should ideally read the theory part of this experiment first, before attempting the questions. 

experiment/pretest.json

@@ -46,7 +46,7 @@
         "d": "$p_X(0)=0.3,\\hspace{0.2cm} p_X(1)=0.6$."
       },
       "explanations": {
-        "a": "Wrong answer. This option is a valid Binomial distribution, not a Bernoulli distribution.",
+        "a": "Incorrect answer. This option is a valid Binomial distribution, not a Bernoulli distribution.",
         "b": "Incorrect answer. A Bernoulli random variable takes only two values.",
         "c": "Correct answer! A Bernoulli random variable takes two possible values (often represented as $0$ or $1$), and the probabilities should sum to $1$.",
         "d": "Incorrect answer! A Bernoulli random variable does take only two possible values (often represented as $0$ or $1$. However their probabilities should sum to $1$."

experiment/procedure.md

@@ -1,5 +1,3 @@
-### Procedure
-
 The experiment consists of three sub-experiments, through which the user will be systematically understanding the essential mathematical aspects of three important probabilistic channels, discussed in the theory part of this experiment. These channels are : 
 
 1. The Binary Erasure Channel, which erases each bit transmitted independently with probability $\epsilon$. The erasure symbol is denoted by $?$. 
@@ -8,7 +6,7 @@ The experiment consists of three sub-experiments, through which the user will be
 
 The detailed working of this experiment is as follows. 
 
-## Overview of the Experiment window
+### Overview of the Experiment window
 
 <div style="text-align: center;">
     <img src="images/exp_window.png" alt="Experiment Window" width="75%"/>
@@ -21,11 +19,11 @@ The experiment window consists of the following components:
 4. **Observation box**: The observation box displays the feedback messages based on the user's input.
 5. **Action box**: The action box contains the input elements and buttons to perform the task.
 
-## Experiment 1: Binary Input Discrete Memoryless Channels
+### Experiment 1: Binary Input Discrete Memoryless Channels
 
 There are three tasks in this sub-experiment.
 
-### Task 1: Binary Erasure Channel
+#### Task 1: Binary Erasure Channel
 
 1. **Select Output Vectors**: Select the possible output vectors ($\vec{y}$) of the Binary Erasure Channel $BEC(\epsilon)$ whose input vector $\vec{x}$ is given. After selection, the boxes will turn green and deselecting them will turn them to gray.
     <div style="text-align: center;"> <img src="images/becexp_1.png" alt="alt text" width="75%"/> </div>
@@ -59,7 +57,7 @@ There are three tasks in this sub-experiment.
     <img src="images/becobs25.png" alt="alt text" width="25%"/>
     </div>
 
-### Task 2: Binary Symmetric Channel
+#### Task 2: Binary Symmetric Channel
 
 1. **Select Output Vectors**: Select the possible output vectors ($\vec{y}$) of the Binary Symmetric Channel $BSC(p)$ whose input vector $\vec{x}$ is given. After selection, the boxes will turn green and deselecting them will turn them to gray.
     <div style="text-align: center;"> <img src="images/bscexp_1.png" alt="alt text" width="75%"/> </div>
@@ -93,7 +91,7 @@ There are three tasks in this sub-experiment.
     <img src="images/becobs25.png" alt="alt text" width="25%"/>
     </div>
 
-### Task 3: Additive White Gaussian Noise Channel
+#### Task 3: Additive White Gaussian Noise Channel
 
 1. **Enter probability values**: According to the statement about the AWGN channel displayed, enter the values in the input boxes provided in the expression that represents the probability density of the output.
     <div style="text-align: center;"> <img src="images/awgnexp_1.png" alt="alt text" width="75%"/> </div>

experiment/simulation/binary_erasure_channel.html

@@ -70,3 +70,44 @@
     text-indent: 0%;
   }
 
+/* Responsive MathJax Equations */
+.MathJax {
+    max-width: 100%;
+    display: inline-block;
+}
+
+/* Ensure math containers are responsive */
+.math-container {
+    width: 100%;
+}
+
+/* Hide scrollbars on larger screens */
+@media screen and (min-width: 751px) {
+    .math-container {
+        overflow: visible;
+    }
+    
+    .MathJax {
+        overflow: visible;
+    }
+}
+
+/* Add scrollbars for smaller screens */
+@media screen and (max-width: 750px) {
+    .math-container {
+        overflow-x: auto;
+        overflow-y: hidden;
+    }
+    
+    .MathJax {
+        font-size: 0.8em !important;
+    }
+}
+
+/* Prevent equation overflow */
+.MathJax_Display {
+    max-width: 100%;
+    text-align: center;
+}
+
+

experiment/simulation/binary_symmetric_channel.html

@@ -117,7 +117,7 @@ input[type=number]::-webkit-outer-spin-button {
 
 input[type=number] {
     -moz-appearance: textfield;
-  }
+}
 
 /* Error Detection */
 
@@ -127,4 +127,14 @@ select {
     border: groove;
     border-radius: 0.2em;
     background-color: #f1f1f1;
-  }
+}
+
+.taskbar-tabs {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    flex: 1;
+    /* Allow tabs to grow and shrink based on container size */
+    width: 100%;
+    /* Ensure full width of the container */
+}

experiment/simulation/css/binary_erasure_channel.css

@@ -70,7 +70,7 @@
             </div>
             <div class="column">
                 <div class="v-tabs">
-                    <ul>
+                    <ul class="taskbar-tabs">
                         <li id="Task1" onclick="window.location.href = 'binary_erasure_channel.html';">
                             <a>
                                 Binary Erasure Channel

experiment/simulation/css/main.css

@@ -1,14 +1,12 @@
-# Theory 
-
-## What is a Communication Channel? 
+### What is a Communication Channel? 
 
 A communication channel is a medium through which communication happens. In this virtual lab, we are dealing with specifically those channels that accept binary-valued inputs. We call these channels as binary-input channels. For some binary channels, we write the possible set of inputs as the *logical bits* $\{0,1\}$. That is, at any time instant, we can send a logical "0" through the channel, or a logical "1". Equivalently, we may also write the binary alphabet in the *bipolar* form, which is written as $\{+1,-1\}$. Normally, we take the logical-bit to bipolar mapping as $0\to +1$ and $1\to -1$.
 
 
 We generally use the notation $\cal X$ to denote the input alphabet of the channel. From the point of view of the receiver, the input to the channel is unknown, and hence is modelled as a random variable with some input probability distribution. We denote this input random variable as $X$. Similarly, the output of the channel, is a random variable denoted by $Y$. We assume that the output alphabet, the set of all values that the output can possibly take, is denoted by $\cal Y$. 
 
 
-## Types of Channels considered in this virtual lab
+### Types of Channels considered in this virtual lab
 
 The problem of designing good communication systems arises precisely due to the existence of *noise* in communication channels. The noise in the communication channel is generally modelled via the conditional probabilities (of the output value, given the input value). We consider some three important types of communication channels (or in other words, noise models) in this virtual lab.
 
@@ -47,7 +45,7 @@ $$Y=X+Z.$$
 
 ---
 
-## Conditional Distribution Associated with the Communication Channel
+### Conditional Distribution Associated with the Communication Channel
 
 We can also describe the channels above using the conditional distribution of the output random variable $Y$ given by the input random variable $X$. Specifically, we have the following. 
 
@@ -76,7 +74,7 @@ $$
 p_{Y|X}(y|x)=\frac{1}{\sqrt{\pi N_0}}e^{\frac{-(y-x)^2}{N_0}}, \forall x,y \in \mathbb{R}. 
 $$
 
-## The Memoryless Property of the Channels
+### The Memoryless Property of the Channels
 
 We assume that the three channels we have considered in this virtual lab have the *memoryless* property and exist *without feedback*. To be precise, if we transmit a $n$-length sequence of bits denoted by $(x_1,\ldots,x_n)$ through any of these channels, the output is a sequence of bits $(y_1,\ldots,y_n)$, with probability as follows.