Use CSS to control whether emulator instructions appear

Change-Id: I5aa36e702d52b28b499b09b67558f90faa1963b3
SusanRatiLane · Sep 10, 2020 · 583f4c1 · 583f4c1
1 parent 8c10c0a
commit 583f4c1
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 8 deletions.
diff --git a/AI/tutorials/howtos/connect_app.html b/AI/tutorials/howtos/connect_app.html
@@ -2,9 +2,9 @@
       <div class="tutorialNavigationHeader"></div>
       <div class="tutorialContentPage">
         <h4>Which way will you connect?</h4>
-        <p>You have three ways to run your app.</p>
+        <p>You have <span class="emulator">three</span><span class="noemulator">two</span> ways to run your app.</p>
         <ol>
-          <li>Use the <b>emulator</b>, which runs your app in a window in your browser. Click <a href="http://appinventor.mit.edu/explore/ai2/setup-emulator.html" target="_blank">here</a> for instructions to set up your computer to run the emulator.</li>
+          <li class="emulator">Use the <b>emulator</b>, which runs your app in a window in your browser. Click <a href="http://appinventor.mit.edu/explore/ai2/setup-emulator.html" target="_blank">here</a> for instructions to set up your computer to run the emulator.</li>
           <li>If you have a phone or tablet but do not have wifi access, you can <b>connect your device to your computer with a USB cable</b>. Instructions to set up your computer to use the USB connection, click <a href="http://appinventor.mit.edu/explore/ai2/setup-device-usb.html" target="_blank">here</a>.</li>
           <li><b>Connect your device over wifi</b>. If you choose this option, click the "Next Step" button below to follow instructions to set up your computer.</li>
         </ol>

diff --git a/css/style.css b/css/style.css
@@ -271,3 +271,16 @@ body.md img.iconImg {
 body.md img.enlargeImage, body.md img.zoom {
   max-width: 100%;
 }
+
+.noemulator {
+  display: none;
+}
+.noemulator.setup {
+  display: block;
+}
+.noemulator .emulator {
+  display: none;
+}
+.noemulator span.noemulator {
+  display: inline;
+}
diff --git a/ct/tutorials/howtos/connect_app.html b/ct/tutorials/howtos/connect_app.html
@@ -2,9 +2,9 @@
       <div class="tutorialNavigationHeader"></div>
       <div class="tutorialContentPage">
         <h4>Which way will you connect?</h4>
-        <p>You have three ways to run your app.</p>
+        <p>You have <span class="emulator">three</span><span class="noemulator">two</span> ways to run your app.</p>
         <ol>
-          <li>Use the <b>emulator</b>, which runs your app in a window in your browser. Click <a href="http://appinventor.mit.edu/explore/ai2/setup-emulator.html" target="_blank">here</a> for instructions to set up your computer to run the emulator.</li>
+          <li class="emulator">Use the <b>emulator</b>, which runs your app in a window in your browser. Click <a href="http://appinventor.mit.edu/explore/ai2/setup-emulator.html" target="_blank">here</a> for instructions to set up your computer to run the emulator.</li>
           <li>If you have a phone or tablet but do not have wifi access, you can <b>connect your device to your computer with a USB cable</b>. Instructions to set up your computer to use the USB connection, click <a href="http://appinventor.mit.edu/explore/ai2/setup-device-usb.html" target="_blank">here</a>.</li>
           <li><b>Connect your device over wifi</b>. If you choose this option, click the "Next Step" button below to follow instructions to set up your computer.</li>
         </ol>

diff --git a/yr/tutorials/howtos/connect_app.html b/yr/tutorials/howtos/connect_app.html
@@ -2,9 +2,9 @@
       <div class="tutorialNavigationHeader"></div>
       <div class="tutorialContentPage">
         <h4>Which way will you connect?</h4>
-        <p>You have three ways to run your app.</p>
+        <p>You have <span class="emulator">three</span><span class="noemulator">two</span> ways to run your app.</p>
         <ol>
-          <li>Use the <b>emulator</b>, which runs your app in a window in your browser. Click <a href="http://appinventor.mit.edu/explore/ai2/setup-emulator.html" target="_blank">here</a> for instructions to set up your computer to run the emulator.</li>
+          <li class="emulator">Use the <b>emulator</b>, which runs your app in a window in your browser. Click <a href="http://appinventor.mit.edu/explore/ai2/setup-emulator.html" target="_blank">here</a> for instructions to set up your computer to run the emulator.</li>
           <li>If you have a phone or tablet but do not have wifi access, you can <b>connect your device to your computer with a USB cable</b>. Instructions to set up your computer to use the USB connection, click <a href="http://appinventor.mit.edu/explore/ai2/setup-device-usb.html" target="_blank">here</a>.</li>
           <li><b>Connect your device over wifi</b>. If you choose this option, click the "Next Step" button below to follow instructions to set up your computer.</li>
         </ol>

diff --git a/yr/tutorials/voicecalculator.md b/yr/tutorials/voicecalculator.md
@@ -11,7 +11,7 @@ Have you ever wondered how conversational AI agents such as Alexa and Siri work?
 
 # Setup your computer
 
-<div class="setup" id="connect_app"></div>
+<div class="setup noemulator" id="connect_app"></div>
 
 # Voice Calculator (Level: Intermediate)
 
@@ -314,4 +314,4 @@ Essentially: get inspired by the story, get busy making your own app!
 
  The YR + MIT collaboration is supported in part by the National Science Foundation. This material is based upon work supported by the National Science Foundation under Grant No. (1906895, 1906636).   Any opinions, findings and conclusions or recommendations expressed in this material are those of the author(s) and do not necessarily reflect the views of the National Science Foundation.
 
- Check out more apps and interactive news content created by YR <a href="https://yr.media/category/interactive/" target="_blank">here</a>.
+ Check out more apps and interactive news content created by YR <a href="https://yr.media/category/interactive/" target="_blank">here</a>.