teaching machines

CS 347: Lab 11 – Sigmatic

October 1, 2020 by Chris Johnson. Filed under fall-2020, labs, webdev.

Welcome to lab. By now you have already watched the lecture videos on your own. Now we will apply the ideas from those videos in a handful of exercises, which you will complete in small groups.

Within your breakout room, designate one of your team to be the screen sharer. Screen sharer, share your screen and claim your group’s task on Crowdsource. Make sure to enter every group member’s JMU eID so that they receive credit. Your group will be assigned a task number.

Team, complete the assigned task below. Screen sharer, be careful not to dominate. All members should contribute ideas.

Task

Reverse engineer the following page using an internal stylesheet and an internal script:

This is a little arithmetic game that I call Sigmatic. A random number is visible in the center cell. In the surrounding inputs, the player enters a consecutive sequence of integers that sums to the central number. When the correct numbers are entered and the player clicks Check, a new number is generated. Your task is to write the HTML and CSS. I’ll provide the JavaScript.

Follow these guidelines in your solution:

• Use a simple HTML structure: a shallow div with seven children.
• Use a 3×3 grid that fills the viewport to construct the layout.
• Consult A Complete Guide to Grid.
• Use auto to specify the grid’s track sizes.
• Center the grid cells in their container.
• Use this JavaScript source:

  const feedbackBox = document.getElementById('feedback-box');
  const checkButton = document.getElementById('check-button');
  const sumBox = document.getElementById('sum-box');
  const numberInputs = [
    document.getElementById('north'),
    document.getElementById('east'),
    document.getElementById('south'),
    document.getElementById('west'),
  ];
  
  let least = null;
  const clearFeedback = () => feedbackBox.innerText = '';
  
  function newRound() {
    clearFeedback();
    for (let numberInput of numberInputs) {
      numberInput.value = '';
    }
    least = Math.floor(Math.random() * 20);
    const sum = least + (least + 1) + (least + 2) + (least + 3);
    sumBox.innerText = sum;
    numberInputs[0].focus();
  }
  
  for (let numberInput of numberInputs) {
    numberInput.addEventListener('input', clearFeedback);
  }
  
  checkButton.addEventListener('click', () => {
    const numbers = numberInputs.map(numberInput => parseInt(numberInput.value));
    numbers.sort((a, b) => a - b);
    if (numbers[0] === least &&
        numbers[0] + 1 === numbers[1] &&
        numbers[0] + 2 === numbers[2] &&
        numbers[0] + 3 === numbers[3]) {
      feedbackBox.innerText = '👍🏾';
      setTimeout(newRound, 1000);
    } else {
      feedbackBox.innerText = '👎🏾';
    }
  });
  
  newRound();
  

Screen sharer, when your group is done or when time is up, submit your group’s solution on Crowdsource.

Peer Review

After you have submitted the exercise, transition into your peer review for project 1. The following things should happen:

• One individual volunteers to be a notetaker, summarizing each individual’s situation in 3-5 sentences.
• A different individual volunteers to be a timer. This person ensures that everyone has a full 5 minutes to share before the end of class.
• Each group member shares for 5 minutes on their progress. Include a live demonstration, a discussion of challenges overcome and not overcome, a plan for the work to be completed in the next week, and an estimation of how many of the requirements have been met.
• Peers critique each other’s work. Constructively shape and challenge each other as you would if you were going to be employed by the same company for your entire careers.
• The notetaker submits the group’s notes on a direct message in Slack. Address the direct message to all group members and your instructor. Your instructor will read this report to stay informed and to grant credit for this week’s review.

Reference Implementation

…