<!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>