From 25212e14daf98ddb25d78e289d2c8ad66d45feff Mon Sep 17 00:00:00 2001 From: two-ticks Date: Fri, 24 Jan 2025 01:25:14 +0530 Subject: [PATCH 1/3] Update label for binary erasure channel in experiment descriptor --- experiment-descriptor.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/experiment-descriptor.json b/experiment-descriptor.json index 85486cb..15344c0 100644 --- a/experiment-descriptor.json +++ b/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" }, From 463ff37eeb2e44d6c93250b1faf1fbd71145543e Mon Sep 17 00:00:00 2001 From: two-ticks Date: Fri, 24 Jan 2025 01:45:51 +0530 Subject: [PATCH 2/3] refactor --- experiment/aim.md | 2 -- experiment/pretest.json | 2 +- experiment/procedure.md | 12 +++++------- experiment/simulation/binary_erasure_channel.html | 2 +- .../simulation/binary_symmetric_channel.html | 2 +- experiment/simulation/css/main.css | 14 ++++++++++++-- experiment/simulation/gaussian_channel.html | 2 +- experiment/theory.md | 10 ++++------ 8 files changed, 25 insertions(+), 21 deletions(-) diff --git a/experiment/aim.md b/experiment/aim.md index 89697a3..93914c3 100644 --- a/experiment/aim.md +++ b/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. \ No newline at end of file diff --git a/experiment/pretest.json b/experiment/pretest.json index 0384e6d..28544c9 100644 --- a/experiment/pretest.json +++ b/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$." diff --git a/experiment/procedure.md b/experiment/procedure.md index ce4dab8..0cfa290 100644 --- a/experiment/procedure.md +++ b/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
Experiment Window @@ -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.
alt text
@@ -59,7 +57,7 @@ There are three tasks in this sub-experiment. alt text
-### 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.
alt text
@@ -93,7 +91,7 @@ There are three tasks in this sub-experiment. alt text -### 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.
alt text
diff --git a/experiment/simulation/binary_erasure_channel.html b/experiment/simulation/binary_erasure_channel.html index 8caec90..6b80563 100644 --- a/experiment/simulation/binary_erasure_channel.html +++ b/experiment/simulation/binary_erasure_channel.html @@ -30,7 +30,7 @@
-
-
-
@@ -108,14 +118,15 @@
- - + +
-

A codeword needs to be sent through a Binary Symmetric Channel \( (BEC(\epsilon)) \) as shown below. Select the possible vectors that could be received through this channel.

+

A codeword needs to be sent through a Binary Symmetric Channel \( (BEC(\epsilon)) \) as shown + below. Select the possible vectors that could be received through this channel.

\( {x} =\) [] →

Binary Erasure Channel @@ -126,122 +137,124 @@
-
-
-
- - -
- - - - - - - - - - - - - - - - - - - - - -
- -
- -
- -
- -
- -
- -
- -
- -
-
-
- - - -
-
-
-
-
Observations
-
- -
-
- +
+
+
+ + +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ + + +
+
+
+
+
Observations
+
+ +
+
+
-
+
+ - + diff --git a/experiment/simulation/binary_symmetric_channel.html b/experiment/simulation/binary_symmetric_channel.html index f8a7b3d..43c31c5 100644 --- a/experiment/simulation/binary_symmetric_channel.html +++ b/experiment/simulation/binary_symmetric_channel.html @@ -36,7 +36,7 @@ -
  • +
  • Binary Symmetric Channel @@ -75,26 +75,34 @@
  • - In the first exercise, you are given a codeword, and you have to identify what are the possible outputs of the Binary Symmetric Channel. + In the first exercise, you are given a codeword, and you have to identify what are the + possible outputs of the Binary Symmetric Channel.
  • - After selecting the output vectors accordingly, click on the Submit button. Observations will be displayed accordingly. + After selecting the output vectors accordingly, click on the Submit button. + Observations will be displayed accordingly.
  • - Only after you have selected all the correct output vectors will the Next button appear to go to the next exercise. + Only after you have selected all the correct output vectors will the Next button + appear to go to the next exercise.
  • - Click on the Reset button to reset all your selected choices and restart the exercise. + Click on the Reset button to reset all your selected choices and restart the + exercise.
  • - For the next exercise you must enter the probability of receiving each of the previously selected output vectors, from the input codeword, in the boxes given. + For the next exercise you must enter the probability of receiving each of the previously + selected output vectors, from the input codeword, in the boxes given.
  • - Once you have entered all the values, click on the Submit button. Observations will be displayed accordingly. + Once you have entered all the values, click on the Submit button. Observations + will be displayed accordingly.
  • - Click on the Previous button to go back to the first exercise or the Reset button to reset all your selected choices and restart the experiment from the first exercise. + Click on the Previous button to go back to the first exercise or the Reset + button to reset all your selected choices and restart the experiment from the first + exercise.
    • @@ -105,140 +113,145 @@
    - - + +
    -
    -

    A codeword needs to be sent through a Binary Symmetric Channel \( (BSC(p)) \) as shown below. Select the possible vectors that could be received through this channel.

    -
    -

    \( {x} =\) [] →

    - Binary Symmetric Channel -

    → \( {y} \)

    +
    +

    A codeword needs to be sent through a Binary Symmetric Channel \( (BSC(p)) \) as shown below. + Select the possible vectors that could be received through this channel.

    +
    +

    \( {x} =\) [] →

    + Binary Symmetric Channel +

    → \( {y} \)

    +
    -
    -
    -
    -
    - - -
    - - - - - - - - - - - - - - - - - - - - - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    - -
    -
    -
    - - - -
    -
    -
    -
    -
    Observations
    -
    - -
    -
    - +
    +
    +
    + + +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    + + + +
    +
    +
    +
    +
    Observations
    +
    + +
    +
    +
    -
    +
    + - diff --git a/experiment/simulation/css/binary_erasure_channel.css b/experiment/simulation/css/binary_erasure_channel.css index 6c8a6e8..80849e0 100644 --- a/experiment/simulation/css/binary_erasure_channel.css +++ b/experiment/simulation/css/binary_erasure_channel.css @@ -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; +} + +