<!DOCTYPE html>
<html>
  <head>
    <title>CircuitBots</title>

<!-- ==== STYLE.CSS ==== -->
<link rel="stylesheet" href="lesson3.css" />

<!-- ====  REMIXICON CDN ==== -->
<link
  href="https://cdn.jsdelivr.net/npm/remixicon@3.0.0/fonts/remixicon.css"
  rel="stylesheet"
/>
<!-- ==== ANIMATE ON SCROLL CSS CDN  ==== -->
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css"
/>
</head>
<body>
<!-- ======
  HEADER
  ====== -->
<header class="container header">
  <!-- ======  NAVBAR  ====== -->
  <nav class="navbar">
    <!-- ==== LOGO  ==== -->
    <div class="logo">
      <a >Circuit<span>Bots</span></a>
    </div>
    <!-- ==== NAV-MENU ==== -->
    <div class="nav__menu">
      <ul class="nav__menu_list">
        <li class="nav_menu_list_item">
          <a href="index.html" class="nav__link active">Home</a>
        </li>

    
        <li class="nav_menu_list_item">
          <a href="tech.html" class="nav__link">Technology</a>
        </li>

       
        <li class="nav_menu_list_item">
          <a href="kit.html" class="nav__link">Arduinokit</a>
        </li>

        <li class="nav_menu_list_item">
          <a href="lessons.html" class="nav__link">Lessons</a>
           
          </a>
        </li>
    
  </nav>
</header>


      <div><h3 id="lsn-nb">Lesson 3 : </h3>
        <h4 id="lsn-title">Discovering Arduino's Tricks</h4>
     </div>

     <ul class="sidebar">
      <li class="sidebar-brand"><a href=""><b>Summary</b></a></li>
      <li><a href="#section1">Explanation</a></li>
      <li><a href="#section2">Quiz</a></li>
      <li><a href="#section3">Game</a></li>
      </ul>  


     <div>
        <img id='rbt-img1' src="https://raw.githubusercontent.com/OutRed/outred.github.io/main/img/essayimg.jpg" alt="img1">
       <p id="text1">Hey future coders, get ready to make some digital magic happen! <br> Let's discover the ServoMotor, the Ultrasonic and the Potentiometers.</p>
      </div>

<div id="section1">
      <div class="img-container">
        <div class="img-background">
        <img class='imgs' src="https://th.bing.com/th/id/R.826b4e4b0edbfce3ab7dc994b51eaaa2?rik=RigjsjwSVWpA%2bg&pid=ImgRaw&r=0" alt="servomotor">
      </div>
      <div class="img-background">
        <img class="imgs" src="https://th.bing.com/th/id/OIP.4NWDkj9jLwgUM9MbZ9eRgwHaHa?pid=ImgDet&rs=1" alt="ultrasonic">
      </div>
      <div class="img-background">
        <img class="imgs" src="https://th.bing.com/th/id/OIP.e1az_dm6RhQPUfhpLOI0qgHaHa?pid=ImgDet&rs=1" alt="pt">
      </div>
    </div>

   <div class="box-container">
    <p class="boxs"> <b> Servo motors</b> can move like robot arms. <br> it's used to move things to specific positions. Imagine you have a toy car and you want to turn its wheels. You can use a servo motor to do that.</p>
    <p class="boxs"> <b> Ultrasonic </b>sensors measure distance like magic rulers. <br> Imagine having a tiny bat that helps your Arduino "see" objects around it without using eyes. That's what an ultrasonic sensor does!</p>
  <p class="boxs"> <b>Potentiometers</b> adjust things with a twist. <br> Imagine having a volume knob on a radio that you can turn to make the sound louder or softer. A potentiometer, or "pot" for short, is like a knob you can turn to control things in your Arduino projects.</p>
  </div>
  </div>

  <div id="section2">
  <div class="quiz-container">
  <h2 id="quiz-exprsn">Now let's test our knowledge!</h2>
  <a href="quiz3.html">  
    <button id='quiz-btn' onclick="openfile()">Start your Quiz!</button> </a>
</div>
 <img id="gif" src='https://th.bing.com/th/id/R.e6a575738250dfbc0d68b38d3f137aaf?rik=55YEzS726TqmMA&pid=ImgRaw&r=0' alt="gif"> 
</div>

<div id="section3">
<h2 id="pre-game">Let's have some fun!</h2>

<div class="body-game">
  <div class="game-container">
    <h2 id="game-title">Memory Game</h2>
    <div class="game">
      <button class="reset" onclick="window.location.reload();">Reset game</button>

    </div>
  </div>
</div>
</div>
  
<a href="lesson4.html">  
  <button  id='nxt-btn' onclick="openfile()">Next Lesson</button> </a>

     

  </body>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  <script src="lesson3.js"></script>
  </html>