Completed first draft

Author: Gammerdinger

_quarto.yml

@@ -44,7 +44,7 @@ website:
         contents:
           - lessons/05_uploading_downloading_data.qmd
           - lessons/06_layouts.qmd
-          - lessons/07_hosting.qmd
+          - lessons/07b_hosting.qmd
           - lessons/08_layout_practical.qmd
 
 format:

docs/lessons/01_syntax_and_structure.html

@@ -228,14 +228,14 @@
 </li>
           <li class="sidebar-item">
   <div class="sidebar-item-container"> 
-  <a href="../lessons/07_hosting.html" class="sidebar-item-text sidebar-link">
+  <a href="../lessons/07b_hosting.html" class="sidebar-item-text sidebar-link">
  <span class="menu-text">Hosting Options for RShiny Apps</span></a>
   </div>
 </li>
           <li class="sidebar-item">
   <div class="sidebar-item-container"> 
   <a href="../lessons/08_layout_practical.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">Practical Exercise</span></a>
+ <span class="menu-text">Layout Practical</span></a>
   </div>
 </li>
       </ul>

docs/lessons/02_inputs.html

@@ -228,14 +228,14 @@
 </li>
           <li class="sidebar-item">
   <div class="sidebar-item-container"> 
-  <a href="../lessons/07_hosting.html" class="sidebar-item-text sidebar-link">
+  <a href="../lessons/07b_hosting.html" class="sidebar-item-text sidebar-link">
  <span class="menu-text">Hosting Options for RShiny Apps</span></a>
   </div>
 </li>
           <li class="sidebar-item">
   <div class="sidebar-item-container"> 
   <a href="../lessons/08_layout_practical.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">Practical Exercise</span></a>
+ <span class="menu-text">Layout Practical</span></a>
   </div>
 </li>
       </ul>

docs/lessons/03_visuals.html

@@ -228,14 +228,14 @@
 </li>
           <li class="sidebar-item">
   <div class="sidebar-item-container"> 
-  <a href="../lessons/07_hosting.html" class="sidebar-item-text sidebar-link">
+  <a href="../lessons/07b_hosting.html" class="sidebar-item-text sidebar-link">
  <span class="menu-text">Hosting Options for RShiny Apps</span></a>
   </div>
 </li>
           <li class="sidebar-item">
   <div class="sidebar-item-container"> 
   <a href="../lessons/08_layout_practical.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">Practical Exercise</span></a>
+ <span class="menu-text">Layout Practical</span></a>
   </div>
 </li>
       </ul>

docs/lessons/04_input_output_practical.html

@@ -228,14 +228,14 @@
 </li>
           <li class="sidebar-item">
   <div class="sidebar-item-container"> 
-  <a href="../lessons/07_hosting.html" class="sidebar-item-text sidebar-link">
+  <a href="../lessons/07b_hosting.html" class="sidebar-item-text sidebar-link">
  <span class="menu-text">Hosting Options for RShiny Apps</span></a>
   </div>
 </li>
           <li class="sidebar-item">
   <div class="sidebar-item-container"> 
   <a href="../lessons/08_layout_practical.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">Practical Exercise</span></a>
+ <span class="menu-text">Layout Practical</span></a>
   </div>
 </li>
       </ul>
@@ -312,7 +312,10 @@ <h2 id="toc-title">On this page</h2>
 <section id="input-and-output-practical" class="level1">
 <h1>Input and Output Practical</h1>
 <p>In this practical we are going to create the app below:</p>
-<p><strong>Create app</strong></p>
+<p align="center">
+<iframe src="https://hcbc.connect.hms.harvard.edu/input_output_practical_demo/" width="800" height="600px" data-external="1">
+</iframe>
+</p>
 <p>This app let’s us select the columns that we would like to plot and then allows us to use a brush on our plot select an area of points that we are interested in evaluating.</p>
 <div class="callout callout-style-default callout-tip callout-titled">
 <div class="callout-header d-flex align-content-center">
@@ -833,29 +836,30 @@ <h1>Input and Output Practical</h1>
 <span id="cb1-38"><a href="#cb1-38" aria-hidden="true" tabindex="-1"></a></span>
 <span id="cb1-39"><a href="#cb1-39" aria-hidden="true" tabindex="-1"></a>In this practical we are going to create the app below:</span>
 <span id="cb1-40"><a href="#cb1-40" aria-hidden="true" tabindex="-1"></a></span>
-<span id="cb1-41"><a href="#cb1-41" aria-hidden="true" tabindex="-1"></a>**Create app**</span>
+<span id="cb1-41"><a href="#cb1-41" aria-hidden="true" tabindex="-1"></a><span class="dt">&lt;</span><span class="kw">p</span><span class="ot"> align</span><span class="op">=</span><span class="st">"center"</span><span class="dt">&gt;&lt;</span><span class="kw">iframe</span><span class="ot"> src</span><span class="op">=</span><span class="st">"https://hcbc.connect.hms.harvard.edu/input_output_practical_demo/"</span><span class="ot"> width</span><span class="op">=</span><span class="st">"800"</span><span class="ot"> height</span><span class="op">=</span><span class="st">"600px"</span><span class="ot"> data-external</span><span class="op">=</span><span class="st">"1"</span><span class="dt">&gt;&lt;/</span><span class="kw">iframe</span><span class="dt">&gt;&lt;/</span><span class="kw">p</span><span class="dt">&gt;</span></span>
 <span id="cb1-42"><a href="#cb1-42" aria-hidden="true" tabindex="-1"></a></span>
-<span id="cb1-43"><a href="#cb1-43" aria-hidden="true" tabindex="-1"></a>This app let's us select the columns that we would like to plot and then allows us to use a brush on our plot select an area of points that we are interested in evaluating.</span>
-<span id="cb1-44"><a href="#cb1-44" aria-hidden="true" tabindex="-1"></a></span>
-<span id="cb1-45"><a href="#cb1-45" aria-hidden="true" tabindex="-1"></a>:::{.callout-tip}</span>
-<span id="cb1-46"><a href="#cb1-46" aria-hidden="true" tabindex="-1"></a><span class="fu"># [**Exercise 1**](04_input_output_practical-Answer_key.qmd#exercise-1)</span></span>
-<span id="cb1-47"><a href="#cb1-47" aria-hidden="true" tabindex="-1"></a></span>
-<span id="cb1-48"><a href="#cb1-48" aria-hidden="true" tabindex="-1"></a>Let's focus on creating this app in several parts:</span>
-<span id="cb1-49"><a href="#cb1-49" aria-hidden="true" tabindex="-1"></a></span>
-<span id="cb1-50"><a href="#cb1-50" aria-hidden="true" tabindex="-1"></a><span class="ss">1.  </span>Create two <span class="in">`selectInput()`</span> menus to choose the x- and y-axis to plot along with the resulting output plot.</span>
-<span id="cb1-51"><a href="#cb1-51" aria-hidden="true" tabindex="-1"></a></span>
-<span id="cb1-52"><a href="#cb1-52" aria-hidden="true" tabindex="-1"></a><span class="ss">2. </span>Add to our app the ability to brush over the plot and select points to place in a table beneath the plot.</span>
-<span id="cb1-53"><a href="#cb1-53" aria-hidden="true" tabindex="-1"></a>:::</span>
-<span id="cb1-54"><a href="#cb1-54" aria-hidden="true" tabindex="-1"></a></span>
-<span id="cb1-55"><a href="#cb1-55" aria-hidden="true" tabindex="-1"></a>***</span>
-<span id="cb1-56"><a href="#cb1-56" aria-hidden="true" tabindex="-1"></a></span>
-<span id="cb1-57"><a href="#cb1-57" aria-hidden="true" tabindex="-1"></a><span class="co">[</span><span class="ot">Next Lesson &gt;&gt;</span><span class="co">](05_uploading_downloading_data.qmd)</span></span>
-<span id="cb1-58"><a href="#cb1-58" aria-hidden="true" tabindex="-1"></a></span>
-<span id="cb1-59"><a href="#cb1-59" aria-hidden="true" tabindex="-1"></a><span class="co">[</span><span class="ot">Back to Schedule</span><span class="co">](../schedule/schedule_AZ.qmd)</span></span>
-<span id="cb1-60"><a href="#cb1-60" aria-hidden="true" tabindex="-1"></a></span>
-<span id="cb1-61"><a href="#cb1-61" aria-hidden="true" tabindex="-1"></a>*** </span>
-<span id="cb1-62"><a href="#cb1-62" aria-hidden="true" tabindex="-1"></a></span>
-<span id="cb1-63"><a href="#cb1-63" aria-hidden="true" tabindex="-1"></a>*This lesson has been developed by members of the teaching team at the [Harvard Chan Bioinformatics Core (HBC)](http://bioinformatics.sph.harvard.edu/). These are open access materials distributed under the terms of the [Creative Commons Attribution license](https://creativecommons.org/licenses/by/4.0/) (CC BY 4.0), which permits unrestricted use, distribution, and reproduction in any medium, provided the original author and source are credited.*</span></code><button title="Copy to Clipboard" class="code-copy-button" data-in-quarto-modal=""><i class="bi"></i></button></pre></div>
+<span id="cb1-43"><a href="#cb1-43" aria-hidden="true" tabindex="-1"></a></span>
+<span id="cb1-44"><a href="#cb1-44" aria-hidden="true" tabindex="-1"></a>This app let's us select the columns that we would like to plot and then allows us to use a brush on our plot select an area of points that we are interested in evaluating.</span>
+<span id="cb1-45"><a href="#cb1-45" aria-hidden="true" tabindex="-1"></a></span>
+<span id="cb1-46"><a href="#cb1-46" aria-hidden="true" tabindex="-1"></a>:::{.callout-tip}</span>
+<span id="cb1-47"><a href="#cb1-47" aria-hidden="true" tabindex="-1"></a><span class="fu"># [**Exercise 1**](04_input_output_practical-Answer_key.qmd#exercise-1)</span></span>
+<span id="cb1-48"><a href="#cb1-48" aria-hidden="true" tabindex="-1"></a></span>
+<span id="cb1-49"><a href="#cb1-49" aria-hidden="true" tabindex="-1"></a>Let's focus on creating this app in several parts:</span>
+<span id="cb1-50"><a href="#cb1-50" aria-hidden="true" tabindex="-1"></a></span>
+<span id="cb1-51"><a href="#cb1-51" aria-hidden="true" tabindex="-1"></a><span class="ss">1.  </span>Create two <span class="in">`selectInput()`</span> menus to choose the x- and y-axis to plot along with the resulting output plot.</span>
+<span id="cb1-52"><a href="#cb1-52" aria-hidden="true" tabindex="-1"></a></span>
+<span id="cb1-53"><a href="#cb1-53" aria-hidden="true" tabindex="-1"></a><span class="ss">2. </span>Add to our app the ability to brush over the plot and select points to place in a table beneath the plot.</span>
+<span id="cb1-54"><a href="#cb1-54" aria-hidden="true" tabindex="-1"></a>:::</span>
+<span id="cb1-55"><a href="#cb1-55" aria-hidden="true" tabindex="-1"></a></span>
+<span id="cb1-56"><a href="#cb1-56" aria-hidden="true" tabindex="-1"></a>***</span>
+<span id="cb1-57"><a href="#cb1-57" aria-hidden="true" tabindex="-1"></a></span>
+<span id="cb1-58"><a href="#cb1-58" aria-hidden="true" tabindex="-1"></a><span class="co">[</span><span class="ot">Next Lesson &gt;&gt;</span><span class="co">](05_uploading_downloading_data.qmd)</span></span>
+<span id="cb1-59"><a href="#cb1-59" aria-hidden="true" tabindex="-1"></a></span>
+<span id="cb1-60"><a href="#cb1-60" aria-hidden="true" tabindex="-1"></a><span class="co">[</span><span class="ot">Back to Schedule</span><span class="co">](../schedule/schedule_AZ.qmd)</span></span>
+<span id="cb1-61"><a href="#cb1-61" aria-hidden="true" tabindex="-1"></a></span>
+<span id="cb1-62"><a href="#cb1-62" aria-hidden="true" tabindex="-1"></a>*** </span>
+<span id="cb1-63"><a href="#cb1-63" aria-hidden="true" tabindex="-1"></a></span>
+<span id="cb1-64"><a href="#cb1-64" aria-hidden="true" tabindex="-1"></a>*This lesson has been developed by members of the teaching team at the [Harvard Chan Bioinformatics Core (HBC)](http://bioinformatics.sph.harvard.edu/). These are open access materials distributed under the terms of the [Creative Commons Attribution license](https://creativecommons.org/licenses/by/4.0/) (CC BY 4.0), which permits unrestricted use, distribution, and reproduction in any medium, provided the original author and source are credited.*</span></code><button title="Copy to Clipboard" class="code-copy-button" data-in-quarto-modal=""><i class="bi"></i></button></pre></div>
 </div></div></div></div></div>
 </div> <!-- /content -->
 <footer class="footer">

docs/lessons/05_uploading_downloading_data.html

@@ -228,14 +228,14 @@
 </li>
           <li class="sidebar-item">
   <div class="sidebar-item-container"> 
-  <a href="../lessons/07_hosting.html" class="sidebar-item-text sidebar-link">
+  <a href="../lessons/07b_hosting.html" class="sidebar-item-text sidebar-link">
  <span class="menu-text">Hosting Options for RShiny Apps</span></a>
   </div>
 </li>
           <li class="sidebar-item">
   <div class="sidebar-item-container"> 
   <a href="../lessons/08_layout_practical.html" class="sidebar-item-text sidebar-link">
- <span class="menu-text">Practical Exercise</span></a>
+ <span class="menu-text">Layout Practical</span></a>
   </div>
 </li>
       </ul>

docs/lessons/06_layouts-Answer_key.html

@@ -1102,8 +1102,7 @@ <h1>Exercise 1</h1>
 <span id="cb5-247"><a href="#cb5-247" aria-hidden="true" tabindex="-1"></a></span>
 <span id="cb5-248"><a href="#cb5-248" aria-hidden="true" tabindex="-1"></a><span class="co"># Run the app</span></span>
 <span id="cb5-249"><a href="#cb5-249" aria-hidden="true" tabindex="-1"></a><span class="fu">shinyApp</span>(<span class="at">ui =</span> ui, <span class="at">server =</span> server)</span>
-<span id="cb5-250"><a href="#cb5-250" aria-hidden="true" tabindex="-1"></a></span>
-<span id="cb5-251"><a href="#cb5-251" aria-hidden="true" tabindex="-1"></a><span class="in">```</span></span>
+<span id="cb5-250"><a href="#cb5-250" aria-hidden="true" tabindex="-1"></a><span class="in">```</span></span>
 </code><button title="Copy to Clipboard" class="code-copy-button" data-in-quarto-modal=""><i class="bi"></i></button></pre></div>
 </div></div></div></div></div>
 </div> <!-- /content -->