P4-M 4/28 Binary Lesson HACKS

• Lesson Note Taker
  • Binary
  • Boolean Expressions
  • Truth Tables
    • Real Life Example using Boolean Expressions
  • Binary Conversions
    • Binary to Decimal
    • Binary Search
• Hacks
  • Note Taker
  • Lesson Quiz
  • Binary Game
  • Binary Conversions Practice
  • Binary Search Questions
  • Extra Credit:
• Hacks Scoring

Home

API

Notes

Lesson Note Taker

Fill in the blanks below during the binary presentation. You can visit our website here!^ Due to last minute deployment issues, may need to run a local server

1. git clone https://github.com/TheoH32/Runtime_Terror.git
2. run:

• bundle install
• bundle exec jekyll serve

Binary

1. Binary is a base number system.
2. 0 represents off and 1 represents on.
3. A bit is the minimum unit of binary information stored in a computer system.

Boolean Expressions

1. A Boolean expression is a logical statement that is either TRUE or FALSE and compares data.

Truth Tables

1. The logical operations shown in truth tables are AND, OR, XOR, and NOT.

# AND
5 > 3 and 5 == 3 + 2

True

5 < 3 and 5 == 5

False

5 == 5 or 5 != 5

True

5 < 3 or 5 != 5

False

Real Life Example using Boolean Expressions

Try changing the conditions and/or the logical operation below! Run the code to see if you are eligible to vote.

age = 18
citizen = True

if age >= 18 and citizen:
    print("You are eligible to vote.")
else:
    print("You are not eligible to vote.")

You are eligible to vote.

Binary Conversions

Binary to Decimal

1. We can count in binary by using powers of 2.
2. In binary, we read from right to left.
3. 0111 has a value of 7.

Binary Search

1. For a binary search, the list must be SORTED.
2. In a binary search, computers start at the middle(front,middle,end)/
3. The number of steps required in a binary search follows the equation: log(n).
4. Binary searches also work with a list of strings. We can sort them alphabetically.
5. Binary searches can be represented in tree diagrams.

Hacks

You will NOT be awarded any points for sections that are INCOMPLETE

Note Taker

1. Fill in all of the blanks above.

Lesson Quiz

1. Complete the lesson quiz
2. SCREENSHOT SCORE and paste it here (or paste screenshot with submission)

• Does not work!

Binary Game

1. Complete the Binary game and reach a minimum score of 10!
2. SCREENSHOT SCORE and paste it here (or with submission)

• Does not work!

Binary Conversions Practice

1. Convert the decimal number "17" into binary.

• 10001

1. Convert the binary number 1010 into decimal.

• 10

1. Convert the decimal number "122" into hexadecimal.

• 7A

1. Convert the hexadecimal number "09" into binary.

• 1001

Binary Search Questions

1. Make a binary search tree of different the list [1,2,4,15,25,30,31]

   31 / \ 25 30 / \ / \ 15 20 31 / \ / \ 4 18 27 / 2

2. Put this list of strings in a order that can be used for binary search ["Donut”,"Cake”,"Soda”,"Banana”,"Fruit”]

Here is the list in alphabetical order: ["Banana", "Cake", "Donut", "Fruit", "Soda"].

1. Explain why Binary Search is more efficient than Sequential Search.

Binary search is more efficient than sequential search because it can find a target value in a sorted list in logarithmic time. Sequential search, on the other hand, can only find a target value in linear time.

Extra Credit:

Translate the binary number, 1001010, into octal (base 8). SHOW YOUR WORK AND EXPLAIN YOUR THINKING.

• Octal is a base-8 number system, which means that it uses the digits 0 to 7.
• Binary is a base-2 number system, which means that it uses the digits 0 and 1.
• To convert a binary number to octal, we can group the binary digits into groups of three, starting from the right.
• We can then replace each group of three binary digits with the corresponding octal digit.

Steps:

1. 1001010

Group the binary digits into groups of three, starting from the right.

1. 1 001 010

Replace each group of three binary digits with the corresponding octal digit.

1. 1 001 010

2. 1 1 2

The octal equivalent of the binary number 1001010 is 112.

Hacks Scoring

Hack	Comments	Grade
Note Taker	fill in the blanks above	0.1
Lesson Quiz	under 100% = 0.1 only	0.2
Binary Game	must score at least 10 points	0.2
Binary Conversions Practice	if incorrect= 0.2 awarded	0.2
Binary Search Questions	if incorrect= 0.2 awarded	0.2
Extra Credit	MUST SHOW WORK	0.1
Total	expected= 0.9/1	1/1

<html><head>
	<title>Final Quiz | Learn Binary</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<!--[if lte IE 8]><script src="/Runtime_Terror/assets/js/ie/html5shiv.js"></script><![endif]-->
	<link rel="stylesheet" href="/Runtime_Terror/assets/css/main.css">
	<!--[if lte IE 9]><link rel="stylesheet" href="/Runtime_Terror/assets/css/ie9.css" /><![endif]-->
	<!--[if lte IE 8]><link rel="stylesheet" href="/Runtime_Terror/assets/css/ie8.css" /><![endif]-->
</head>


<body class="">
    <script type="text/javascript">document.body.classList.add("is-loading");</script>

    <!-- Wrapper -->
<div id="wrapper">

<!-- Header -->
<header id="header">
	<a href="/Runtime_Terror/" class="logo"><strong>Learn Binary</strong> <span>by Runtime Terror</span></a>
	<nav>
		<a href="#menu">Menu</a>
	</nav>
</header>

<!-- Menu -->

 
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Binary Quiz</title>



    <div class="container">
        <div id="game" class="justify-center flex-column">
          <div id="hud">
            <div id="hud-item">
              <p class="hud-prefix">
              </p>
              <h1 class="hud-main-text" id="questionCounter">Question: 1/6</h1>
            </div>
          </div>
            <h2 id="question">What option is NOT an example of a logical operation used in a truth table?</h2>
            <div class="choice-container">
                <small class="choice-prefix">A</small>
                <small class="choice-text" data-number="1">AND</small>
            </div>
            <div class="choice-container">
                <small class="choice-prefix">B</small>
                <small class="choice-text" data-number="2">XOR</small>
            </div>
            <div class="choice-container">
                <small class="choice-prefix">C</small>
                <small class="choice-text" data-number="3">NONE</small>
            </div>
            <div class="choice-container">
                <small class="choice-prefix">D</small>
                <small class="choice-text" data-number="4">OR</small>
            </div>
        </div>
    </div>


<style>

  .choice-container {
    display: flex;
    margin-bottom: 0.5rem;
    width: 100%;
    font-size: 1.8rem;
    border: 0.1rem solid rgb(86, 165, 235, 0.25);
    background-color: white;
  }

  .choice-container:hover {
    cursor: pointer;
    box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
    transform: translateY(-0.1rem);
    transition: transform 150ms;
  }

  .choice-prefix {
    padding: 1.5rem 2.5rem;
    background-color: #380df2;
    color: white;
  }

  .choice-text {
    padding: 1.5rem;
    width: 100%;
	color: black;
  }

  #hud {
    display: flex;
    justify-content: space-between;
  }

  .hud-prefix {
    text-align: center;
    font-size: 2rem;
  }

  .hud-main-text {
    text-align: center;
    margin: 10px 0px 10px;
  }

  #hud-item {
    display: flex;
    text-align: center;
  }

  #game {
    padding: .5rem 2.25rem;
  }

  #question {
    font-size: 2rem;
    margin: 30px 0px 18px;
  }

  h1,
  h2,
  h3,
  h4 {
  }

  h1 {
    font-size: 1.5rem;
    color: #380df2;
  }

  h1 > span {
    font-size: 1.5rem;
    font-weight: 500;
  }

  h2 {
    font-size: 4.2rem;
    font-weight: 700;
  }

  h3 {
    font-size: 2.8rem;
    font-weight: 500;
  }

</style>

<script>
  // defining variables
  const question = document.getElementById('question');
  const choices = Array.from(document.getElementsByClassName('choice-text'));
  const progressText = document.getElementById('progressText');
  const scoreText = document.getElementById('score');
  const progressBarFull = document.getElementById('progressBarFull');
  const loader = document.getElementById('loader');
  const game = document.getElementById('game');
  const MAX_QUESTIONS = 6;
  const questionCounterText = document.getElementById('questionCounter');
  let currentQuestion = {};
  let acceptingAnswers = false;
  let score = 0;
  let questionCounter = 0;
  let availableQuestions = [];
  let questionTotal = 0

  let questions = [
    // Update MAX_QUESTIONS when adding more
    // all questions and choices
      {
          question: "What is a bit?",
          choice1: "a food",
          choice2: "a binary digit",
          choice3: "a cool dude that surfs",
          choice4: "a variable that holds 3 possible values",
          choiceAnswer: 2
      },
      {
          question: "Decimal is a base 10 system, while binary is a ____ system",
          choice1: "base 2",
          choice2: "base 3",
          choice3: "base 4",
          choice4: "object oriented",
          choiceAnswer: 1
      },
      {
          question: "What is the number(s) used in the binary system?",
          choice1: "1 and 0.1",
          choice2: "0 only",
          choice3: "1 and 2",
          choice4: "0 and 1",
          choiceAnswer: 4
      },
      {
          question: "What option is NOT an example of a logical operation used in a truth table?",
          choice1: "AND",
          choice2: "XOR",
          choice3: "NONE",
          choice4: "OR",
          choiceAnswer: 3
      },
      {
          question: "A byte is how many bits?",
          choice1: "2",
          choice2: "6",
          choice3: "4",
          choice4: "8",
          choiceAnswer: 4
      },
      {
          question: "In order for a binary search to be possible,the list must be ___",
          choice1: "integers",
          choice2: "sorted",
          choice3: "have exactly 7 items",
          choice4: "under 10 items",
          choiceAnswer: 2
      }
  ];

  startGame = () => {
    questionCounter = 0;
    score = 0;
    availableQuestions = [...questions];
    console.log(availableQuestions)
    getNewQuestion();
  }; 
  // plus minus which finds middle point score for each user
   getNewQuestion = () => {
    // ends if no more questions
    if (availableQuestions.length === 0 || questionCounter >= MAX_QUESTIONS) {
      const resultContainer = document.getElementById("result");
      // redirects window
      return window.location.assign('/Runtime-Terror/quizfinalscore.html'); 
    }
    questionCounter++;
    questionCounterText.innerText = `Question: ${questionCounter}/${MAX_QUESTIONS}`;
    const questionIndex = Math.floor(Math.random() * availableQuestions.length);
    currentQuestion = availableQuestions[questionIndex];
    question.innerHTML = currentQuestion.question;

    choices.forEach((choice) => {
        const number = choice.dataset["number"];
        choice.innerHTML = currentQuestion["choice" + number];
    });
    // removes a question/ also determines when it ends
    availableQuestions.splice(questionIndex, 1);

    acceptingAnswers = true;
  };

  // this determines score for each choice, ex: choice3 = +3 for questionTotal
  choices.forEach((choice) => {
      choice.addEventListener('click', (e) => {
      
          if (!acceptingAnswers) return;

          acceptingAnswers = false;
          const selectedChoice = e.target;
          const selectedAnswer = selectedChoice.dataset['number'];
          const choiceAnswer = currentQuestion.choiceAnswer;
          console.log("Selected Answer: " + selectedAnswer);

          if (selectedAnswer == choiceAnswer)  {
            questionTotal = questionTotal + 1
            console.log("Score: " + questionTotal)
          }

          localStorage.setItem("finalScore", questionTotal)
          getNewQuestion(); 
    });
  });
  
  //starts game/quiz and will console the array of choices that the user has. IE 1-4
  startGame();
  console.log(choices)
  
</script>

 <!-- COMMENTED OUT BECAUSE I DONT LIKE THE FOOTER, -THEO -->

<!-- Contact 
<section id="contact">
	<div class="inner">
		<section>
			<form action="https://formspree.io/theo.h131@gmail.com" method="POST">
				<div class="field half first">
					<label for="name">Name</label>
					<input type="text" name="name" id="name" />
				</div>
				<div class="field half">
					<label for="email">Email</label>
					<input type="text" name="_replyto" id="email" />
				</div>
				<div class="field">
					<label for="message">Message</label>
					<textarea name="message" id="message" rows="6"></textarea>
				</div>
				<ul class="actions">
					<li><input type="submit" value="Send Message" class="special" /></li>
					<li><input type="reset" value="Clear" /></li>
				</ul>
			</form>
		</section>
		<section class="split">
			<section>
				<div class="contact-method">
					<span class="icon alt fa-envelope"></span>
					<h3>Email</h3>
					<a href="mailto:theo.h131@gmail.com">theo.h131@gmail.com</a>
				</div>
			</section>
			<section>
				<div class="contact-method">
					<span class="icon alt fa-phone"></span>
					<h3>Phone</h3>
					<a href="tel:"></a>
				</div>
			</section>
			<section>
				<div class="contact-method">
					<span class="icon alt fa-home"></span>
					<h3>Address</h3>
					<span>
					
					
					
					
					
					</span>
				</div>
			</section>
		</section>
	</div>
</section>
-->

<!-- Footer
	<footer id="footer">
		<div class="inner">
			<ul class="icons">
				
					
						<li>
							<a href="https://github.com/TheoH32/Runtime_Terror" class="icon alt fa-github" target="_blank" rel="noopener noreferrer" aria-label="GitHub">
								<span class="label">GitHub</span>
							</a>
						</li>
					
				
					
				
					
				
					
				
					
				
					
				
					
				
					
				
			</ul>
			<ul class="copyright">
				<li>&copy; Learn Binary by Runtime Terror</li>
				<li>Design: <a href="https://html5up.net" target="_blank">HTML5 UP</a></li>
				<li>Jekyll integration: <a href="http://andrewbanchi.ch" target="_blank">Andrew Banchich</a></li>

			</ul>
		</div>
	</footer>

</div>
-->

<!-- Scripts -->
	<script src="/Runtime_Terror/assets/js/jquery.min.js"></script>
	<script src="/Runtime_Terror/assets/js/jquery.scrolly.min.js"></script>
	<script src="/Runtime_Terror/assets/js/jquery.scrollex.min.js"></script>
	<script src="/Runtime_Terror/assets/js/skel.min.js"></script>
	<script src="/Runtime_Terror/assets/js/util.js"></script>
	<!--[if lte IE 8]><script src="/Runtime_Terror/assets/js/ie/respond.min.js"></script><![endif]-->
	<script src="/Runtime_Terror/assets/js/main.js"></script>





</div><nav id="menu"><div class="inner">
	<ul class="links">
        
		    
		
		    
		
		    
		
		    
		
		    
		
		    
		
		    
		
		    
		        <li><a href="/Runtime_Terror/">Home</a></li>
	    	
		
		    
		
		    
		
		    
		
		    
		
		
		    
		        <li><a href="/Runtime_Terror/2023-03-21-extraresources.html">Extra Resources</a></li>
		    
		
		    
		        <li><a href="/Runtime_Terror/2023-04-16-imagelesson.html">Pixel Art Image Lesson</a></li>
		    
		
		    
		        <li><a href="/Runtime_Terror/2023-04-18-Binary%20Search.html">Binary Search Lesson</a></li>
		    
		
		    
		        <li><a href="/Runtime_Terror/2023-3-30-mainlesson.html">Main Binary Lesson</a></li>
		    
		
		    
		
		    
		        <li><a href="/Runtime_Terror/all_posts.html">All Posts</a></li>
		    
		
		    
		        <li><a href="/Runtime_Terror/elements.html">Binary Guessing Game</a></li>
		    
		
		    
		
		    
		        <li><a href="/Runtime_Terror/quiz.html">Final Quiz</a></li>
		    
		
		    
		        <li><a href="/Runtime_Terror/quizfinalscore.html">Quiz Score</a></li>
		    
		
	</ul>
	<ul class="actions vertical">
		<li><a href="/Runtime-Terror/2023-3-30-mainlesson.html" class="button special fit">Get Started</a></li>
		<li><a href="/Runtime-Terror/login.html" class="button fit">Log In</a></li>
	</ul>
</div><a class="close" href="#menu">Close</a></nav></body></html>