alt text

Author: pancakereport

README.md

@@ -95,9 +95,11 @@ A pdf view of how this notebook renders in Quarto can be found [here](https://dr
 
 To give you the most control when inserting images, we use html with the following format to center images/figs and control their size: 
 
-```<center><img src = "IMAGE_NAME" width = "IMAGE_WIDTH_IN_PIXELS"></img></a></center>```
+```<center><img src = "IMAGE_NAME" width = "IMAGE_WIDTH_IN_PIXELS" alt="alt text here"></img></a></center>```
 
-For example, `<center><img src = "images/updated_basic.png" width = "700"></img></a></center>`.
+For example, `<center><img src = "images/updated_basic.png" width = "700" alt="description of image"></img></a></center>`.
+
+In some instances, the images may be completely described in the text of the page. In these cases, you may leave the alt text blank i.e. `alt=""`. BUT THE ALT TEXT MUST STILL BE INCLUDED.
 
 
 ## Generating Output + Rendering Website

autograder_gradescope/autograder_gradescope.md

@@ -34,16 +34,16 @@ jupyter:
 
 When you pass a test, you'll see a nice message and a cute emoji!
 
-<center><img src = "passing_autograder.png" width = "200"></img></a></center>
+<center><img src = "passing_autograder.png" width = "200" alt="Screenshot of a grader cell for question q2a with cell ouput 'q2a passed'"></img></a></center>
 
 When you don't, however, the message can be a little confusing.
 
-<center><img src = "autograder_error.png" width = "600"></img></a></center>
+<center><img src = "autograder_error.png" width = "600" alt="Example of a cell output for a failing autograder test showing what test failed, what the code that was evaluated was, the expected output, and an error that was raised during the course of the test."></img></a></center>
 <br>
 
 The best course of action is to find the test case that failed and use that as a starting point to debug your code.
 
-<center><img src = "autograder_error_annot.png" width = "700"></img></a></center>
+<center><img src = "autograder_error_annot.png" width = "700" alt="An annotated version of the previous image which includes the note 'The most useful error message is usually at the bottom'"></img></a></center>
 
 In the example above, we see that the test case in green, `max_swing in set(bus['name'])`, is not passing. The actual output (in blue) is often hard to parse, so the best course of action is to:
 
@@ -100,11 +100,11 @@ This can happen if you import external packages when you are not instructed to d
 
 If your Gradescope submission page has been stuck running on this page for a while:
 
-<center><img src = "gradescope_loading.png" width = "350"></img></a></center>
+<center><img src = "gradescope_loading.png" width = "350" alt="Autograder Results. The autograder hasn't finish running yet."></img></a></center>
 
 or if it times out:
 
-<center><img src = "gradescope_timeout.png" width = "650"></img></a></center>
+<center><img src = "gradescope_timeout.png" width = "650" alt="Autograder Results. In a red box 'The autograder failed to respond in the expected amount of time. If the autograder continues to fail, contact your course staff for help in debugging this issue. Make sure to include a link to this page so they can help you most effectively.'"></img></a></center>
 
 it means that the Gradescope autograder failed to execute in the expected amount of time. TThis could be due to an inefficiency in your code or an issue on Gradescope's end, so we recommend resubmitting and allowing the autograder to rerun. If the issue persists after a few attempts, you may need to investigate your code for inefficiencies.
 

docs/Data-100-Debugging-Guide.pdf

@@ -228,16 +228,16 @@ <h2 class="anchored" data-anchor-id="autograder">Autograder</h2>
 <h3 class="anchored" data-anchor-id="understanding-autograder-error-messages">Understanding autograder error messages</h3>
 <p>When you pass a test, you’ll see a nice message and a cute emoji!</p>
 <center>
-<img src="passing_autograder.png" width="200">
+<img src="passing_autograder.png" width="200" alt="Screenshot of a grader cell for question q2a with cell ouput 'q2a passed'">
 </center>
 <p>When you don’t, however, the message can be a little confusing.</p>
 <center>
-<img src="autograder_error.png" width="600">
+<img src="autograder_error.png" width="600" alt="Example of a cell output for a failing autograder test showing what test failed, what the code that was evaluated was, the expected output, and an error that was raised during the course of the test.">
 </center>
 <p><br></p>
 <p>The best course of action is to find the test case that failed and use that as a starting point to debug your code.</p>
 <center>
-<img src="autograder_error_annot.png" width="700">
+<img src="autograder_error_annot.png" width="700" alt="An annotated version of the previous image which includes the note 'The most useful error message is usually at the bottom'">
 </center>
 <p>In the example above, we see that the test case in green, <code>max_swing in set(bus['name'])</code>, is not passing. The actual output (in blue) is often hard to parse, so the best course of action is to:</p>
 <ol type="1">
@@ -291,11 +291,11 @@ <h3 class="anchored" data-anchor-id="why-do-i-see-multiple-nameerror-name-___-is
 <h3 class="anchored" data-anchor-id="my-autograder-keeps-runningtimed-out">My autograder keeps running/timed out</h3>
 <p>If your Gradescope submission page has been stuck running on this page for a while:</p>
 <center>
-<img src="gradescope_loading.png" width="350">
+<img src="gradescope_loading.png" width="350" alt="Autograder Results. The autograder hasn't finish running yet.">
 </center>
 <p>or if it times out:</p>
 <center>
-<img src="gradescope_timeout.png" width="650">
+<img src="gradescope_timeout.png" width="650" alt="Autograder Results. In a red box 'The autograder failed to respond in the expected amount of time. If the autograder continues to fail, contact your course staff for help in debugging this issue. Make sure to include a link to this page so they can help you most effectively.'">
 </center>
 <p>it means that the Gradescope autograder failed to execute in the expected amount of time. TThis could be due to an inefficiency in your code or an issue on Gradescope’s end, so we recommend resubmitting and allowing the autograder to rerun. If the issue persists after a few attempts, you may need to investigate your code for inefficiencies.</p>
 <p>For example, if you rerun all cells in your Jupyter notebook and notice that some cells take significantly longer to run than others, you might need to optimize those cells. Keep in mind that the time it takes to run all tests in your Jupyter notebook is not equivalent to the time it takes on Gradescope/Pensieve. However, it is proportional—if your notebook runs slowly on Datahub, it will likely run even more slowly on Gradescope/Pensieve, as the difference in runtime is amplified.</p>

docs/autograder_gradescope/autograder_gradescope.html

@@ -250,7 +250,7 @@ <h2 class="anchored" data-anchor-id="running-cells">Running Cells</h2>
 </ul></li>
 </ul>
 <center>
-<img src="run_all.gif" width="500">
+<img src="run_all.gif" width="500" alt="Gif showing exactly where to click to run all cells">
 </center>
 </section>
 <section id="saving-your-notebook" class="level2">
@@ -266,14 +266,14 @@ <h2 class="anchored" data-anchor-id="restarting-kernel">Restarting Kernel</h2>
 <li><code>Restart Kernel and Run All Cells</code></li>
 </ul>
 <center>
-<img src="kernel.gif" width="500">
+<img src="kernel.gif" width="500" alt="Gif showing exactly where to click to access the mostly frequently used kernel options.">
 </center>
 </section>
 <section id="automatically-closing-brackets" class="level2">
 <h2 class="anchored" data-anchor-id="automatically-closing-brackets">Automatically Closing Brackets</h2>
 <p>Many IDEs like VSCode have a functionality that automatically closes brackets. For example, pressing <code>(</code>, <code>{</code>, or <code>[</code> would automatically add the second bracket at the other end <code>)</code>, <code>}</code>, and <code>]</code>, respectively. Datahub does not have this functionality turned on by default, but you can do so by going into <code>Settings</code> -&gt; <code>Auto Close Brackets</code>. If you see a check mark to the left of <code>Auto Close Brackets</code>, then it’s enabled.</p>
 <center>
-<img src="autoclose_brackets.gif" width="500">
+<img src="autoclose_brackets.gif" width="500" alt="Gif showing how to toggle autoclose bracket">
 </center>
 
 

docs/jupyter101/jupyter101.html

@@ -222,7 +222,7 @@ <h2 class="anchored" data-anchor-id="my-kernel-died-restarted-or-is-very-slow">M
 </ol>
 <p>When you see a message like this:</p>
 <center>
-<img src="kernel_die.png" width="500">
+<img src="kernel_die.png" width="500" alt="Screenshot of dead kernel messaging">
 </center>
 <ol type="1">
 <li>Either press the “Ok” button or reload the page</li>
@@ -241,7 +241,7 @@ <h2 class="anchored" data-anchor-id="i-cant-edit-a-cell">I can’t edit a cell</
 <li>Under “Common Tools”, you can toggle between “Editable” (can edit the cell) and “Read-Only” (cannot edit the cell)</li>
 </ol>
 <center>
-<img src="toggle_edit.gif" width="500">
+<img src="toggle_edit.gif" width="500" alt="Gif showing how to toggle between 'Editable' and 'Read-Only' for a cell">
 </center>
 </section>
 <section id="my-text-cell-looks-like-code" class="level2">
@@ -252,7 +252,7 @@ <h2 class="anchored" data-anchor-id="my-text-cell-looks-like-code">My text cell
 <h2 class="anchored" data-anchor-id="my-text-cell-changed-to-a-code-cell-my-code-cell-changed-to-a-text-cell">My text cell changed to a code cell / My code cell changed to a text cell</h2>
 <p>Sometimes, a text (markdown) cell was changed to a code cell, or a code cell can’t be run because it’s been changed to a text (markdown) or raw cell. To fix this, toggle the desired cell type in the top bar.</p>
 <center>
-<img src="toggle_cell_type.gif" width="700">
+<img src="toggle_cell_type.gif" width="700" alt="Gif showing how to toggle the cell type from code to text and back again.">
 </center>
 </section>
 <section id="why-does-running-a-particular-cell-cause-my-kernel-to-die" class="level2">
@@ -268,26 +268,26 @@ <h2 class="anchored" data-anchor-id="i-accidentally-deleted-something-in-a-cell-
 <h2 class="anchored" data-anchor-id="click-here-to-download-zip-file-is-not-working">“Click <u>here</u> to download zip file” is not working</h2>
 <p>When this happens, you can download the zip file through the menu on the left.</p>
 <center>
-<img src="zip_left_menu.png" width="400">
+<img src="zip_left_menu.png" width="400" alt="Left menu showing files with the zip file highlighted by a red box.">
 </center>
 <p>Right click on the generated zip file and click “Download”.</p>
 <center>
-<img src="zip_download.png" width="500">
+<img src="zip_download.png" width="500" alt="After right/force clicking on the zip file, click 'Download' which is highlighted in this screenshot with a red box.">
 </center>
 </section>
 <section id="autograder-could-not-locate-my-pdf" class="level2">
 <h2 class="anchored" data-anchor-id="autograder-could-not-locate-my-pdf">Autograder could not locate my PDF</h2>
 <p>Sometimes when running the <code>grader.export(run_tests=True)</code> cell at the end of the notebook, you run into an error where the autograder could not locate the PDF:</p>
 <center>
-<img src="pdf_not_located.png" width="700">
+<img src="pdf_not_located.png" width="700" alt="Screenshot showing 'UserWarning: Could not locate a PDF to include'">
 </center>
 <p>To fix this, make sure you have not accidentally converted any cells to <code>raw</code> type. All cells should either be <code>markdown</code> or <code>code</code> cells. You can easily convert cells by following <a href="https://ds100.org/debugging-guide/jupyter_datahub/jupyter_datahub.html#my-text-cell-changed-to-a-code-cell-my-code-cell-changed-to-a-text-cell">these instructions</a> earlier in the debugging guide.</p>
 </section>
 <section id="i-cant-export-my-assignment-as-a-pdf-due-to-a-latexfailed-error" class="level2">
 <h2 class="anchored" data-anchor-id="i-cant-export-my-assignment-as-a-pdf-due-to-a-latexfailed-error">I can’t export my assignment as a PDF due to a <code>LatexFailed</code> error</h2>
 <p>Occasionally when running the <code>grader.export(run_tests=True)</code> cell at the end of the notebook, you run into an error where the PDF failed to generate:</p>
 <center>
-<img src="LatexError.png" width="500">
+<img src="LatexError.png" width="500" alt="Screenshot of a latex error that begins with 'LatexFailed: PDF creating failed, captured latex output:...'">
 </center>
 <p>Converting a Jupyter notebook to a PDF involves formatting some of the markdown text in <a href="https://www.latex-project.org/">LaTeX</a>. However, this process will fail if your free response answers have (unresolved) LaTeX characters like <code>\n</code>, <code>$</code>, or <code>$$</code>. There are several ways to resolve this:</p>
 <ol type="1">

docs/jupyter_datahub/jupyter_datahub.html

@@ -231,7 +231,7 @@ <h1 class="title"><span class="chapter-title">Pandas</span></h1>
 <h2 class="anchored" data-anchor-id="understanding-pandas-errors">Understanding <code>pandas</code> errors</h2>
 <p><code>pandas</code> errors can look red, scary, and very long. Fortunately, we don’t need to understand the entire thing! The most important parts of an error message are at the <strong>top</strong>, which tells you which line of code is causing the issue, and at the <strong>bottom</strong>, which tells you exactly what the error message is.</p>
 <center>
-<img src="pandas_error.png" width="700">
+<img src="pandas_error.png" width="700" alt="A screenshot of an error output by running a pandas command. The screenshot is annotated, with the first annotation reading 'The arrow points to the line of code that is erroring' next to a green arrow in the error output. Also highlighted and annotated is the last line of the error message, 'The most useful error messages are usually at the bottom'">
 </center>
 <p><br></p>
 <p>This note is (mostly) structured around the error messages that show up at the bottom.</p>

docs/pandas/pandas.html

@@ -239,7 +239,7 @@ <h3 class="anchored" data-anchor-id="general-debugging-tips">General Debugging T
 <h3 class="anchored" data-anchor-id="my-training-rmse-is-low-but-my-validationtest-rmse-is-high">My training RMSE is low, but my validation/test RMSE is high</h3>
 <p>Your model is likely overfitting to the training data and does not generalize to the test set. Recall the bias-variance tradeoff discussed in lecture. As you add more features and make your model more complex, it is expected that your training error will decrease. Your validation and test error may also decrease initially, but if your model is too complex, you end up with high validation and test RMSE.</p>
 <center>
-<img src="under_overfit.png" width="500">
+<img src="under_overfit.png" width="500" alt="Plot showing a conceptual understanding of underfitting and overfitting. Model complexity is on the x-axis and Error/Variance is on the y axis. As you increase model complexity, Variance increases and training error decreases. Above the curves that represent Variance and Training Error, a third curve labeled Validtion Error exists in a U-shape. The chosen complexity level is represented by a dashed vertical line that intersections with the lowest y-value for the Validation Error curve. To the left of the dashed line is underfitting and to the right of the dashed line is overfitting.)">
 </center>
 <p>To decrease model complexity, consider visualizing the relationship between the features you’ve chosen with the <code>(Log) Sale Price</code> and removing features that are not highly correlated. Removing outliers can also help your model generalize better and prevent it from fitting to noise in the data. Methods like cross-validation allow you to get a better sense of where you lie along the validation error curve. Feel free to take a look at the <a href="https://ds100.org/fa24/resources/assets/lectures/lec16/lec16.html">code used in Lecture 16</a> if you’re confused on how to implement cross-validation.</p>
 </section>

docs/projA2/projA2.html

@@ -256,7 +256,7 @@ <h2 class="anchored" data-anchor-id="how-to-interpret-regex101">How to Interpret
 <section id="example-1-basic" class="level3">
 <h3 class="anchored" data-anchor-id="example-1-basic">Example 1: Basic</h3>
 <center>
-<img src="images/updated_basic.png" width="700">
+<img src="images/updated_basic.png" width="700" alt="A screenshot of regex101 with five different components of the website highlighted. On the left is region 0. In the upper middle is region 1. In the lower middle is region 3. On the upper right is region 2. On the lower right is region 4.">
 </center>
 <p><br></p>
 <ol start="0" type="1">
@@ -271,7 +271,7 @@ <h3 class="anchored" data-anchor-id="example-1-basic">Example 1: Basic</h3>
 <h3 class="anchored" data-anchor-id="example-2-greedy">Example 2: Greedy</h3>
 <p>For this example, let’s replace the <code>100</code> in our original expression with <code>\d+</code> so that our pattern is <code>Data \d+</code></p>
 <center>
-<img src="images/updated_greedy.png" width="700">
+<img src="images/updated_greedy.png" width="700" alt="Screenshot of regex 101 highlighting part of the explanation, described more below.">
 </center>
 <p><br></p>
 <p><code>\d</code> and <code>+</code> are both special operators, and the explanation on the top right (boxed in red) tells us what they do:</p>
@@ -292,7 +292,7 @@ <h3 class="anchored" data-anchor-id="example-3-capturing-groups">Example 3: Capt
 </ul>
 <p>That’s great! This pattern will match the entirety of <code>DD/Month/YYYY</code>, but what if we want to access <code>DD</code> individually? What about <code>YYYY</code>? This is where <strong>capturing groups</strong> comes in handy. Capturing groups are RegEx expressions surrounded by parenthesis <code>()</code> that are used to remember the text they match so that it can be referenced later. Putting capturing groups around <code>\d+</code> and <code>\w+</code> to get <code>r"(\d+)\/(\w+)\/(\d+)"</code>gives us the following:</p>
 <center>
-<img src="images/updated_capturing_groups.png" width="700">
+<img src="images/updated_capturing_groups.png" width="700" alt="">
 </center>
 <p><br></p>
 <ul>
@@ -351,7 +351,7 @@ <h3 class="anchored" data-anchor-id="the-three-uses-of">The three uses of <code>
 <h3 class="anchored" data-anchor-id="whats-the-difference-between-all-the-re-functions">What’s the difference between all the <code>re</code> functions?</h3>
 <p>The exam reference sheets give a few <code>re</code> functions, but how can you determine which one to use?</p>
 <center>
-<img src="images/ref_sheet_re_methods.png" width="800">
+<img src="images/ref_sheet_re_methods.png" width="800" alt="Screenshot of the exam reference sheet showing re.match(), re.search(), re.findall(), and re.sub()">
 </center>
 <p><br></p>
 <p><code>re.match</code> and <code>re.search</code> only return <em>one</em> instance of a match between string and pattern (or None if there’s no match) - <code>re.match</code> only considers characters at the beginning of a string - <code>re.search</code> considers characters anywhere in the string - For example: ``` pattern = r”Data 100” example1 = “Data 100 is the best!” example2 = “I love Data 100!”</p>