Computation Layer Building Challenges

Resources
1

Years ago the CL team put together a collection of challenges to help people improve their understanding of Computation Layer. We wanted to extend this opportunity to everyone and decided to package these challenges into this article. As you work through challenges, projects, and bonuses don't hesitate to share your creations in the examples category or ask questions in the questions category.

Instructions

  1. Pick a challenge from the list.
  2. Click on the link below and find the matching activity in the list.
  3. Make a copy of the matching activity and complete the prompt.

Open Collection

Basic
  1. Connect the two graphs so that the x and y coordinates of the movable point correspond with the radii of the ellipse.
    ★ Bonus: Color the ellipse based on its area using the gradient provided in the graph.
  2. Connect the math input and the graph so that the number entered fills the corresponding amount in the rectangle.
    ★ Bonus: Use timeSinceSubmit to animate the fill.
  3. Connect the table and the sketch so that the corresponding cells label the x and y axes of the graph.
    ★ Bonus: Label the title of the screen "[x-axis Label] vs [y-axis Label]" using the student inputs.
  4. Connect the table and the graph so that the first cell labels "line 1" and the second cell labels "line 2".
    ★ Bonus: Add initialCellContent so that the labels initially say "Line 1" and "Line 2".
  5. Connect the table and the graph so that the corresponding cells set the radius and the height of the quarter cylinder.
    ★ Bonus: Add correctness so that students are marked correct if their quarter cylinders match the target.
  6. Allow students to create a scatter plot by entering x and y values into the table.
    ★ Bonus: Also graph the line of best fit.
  7. Mark the student correct when they enter a value equal to 64.
    ★ Bonus: Show the value of their number or expression when they submit their response.
  8. Mark the student correct when they enter the correct volume.
    ★ Bonus: Animate the volume that the student entered (using the existing graph elements) when they submit their response.
  9. Show a linear, quadratic, or exponential graph based on the student's selection.
    ★ Bonus: Set the multiple choice component so that there is always a selected option.
  10. Display the note that says "You don't have enough fencing!" when the perimeter of the rectangle is greater than 24.
    ★ Bonus: Add a lower restriction and display the note "You have too much extra fencing!" when the perimeter is below that lower restriction.

Project: Create a screen that progressively reveals information, instructions, or tasks. Use whatever method you want to hide and reveal each step.

Project: Give students a table to enter different quantities. Use those quantities to make some data representations (bar graph, dot plot, pie chart, etc.) and add a multiple choice component to switch between representations.

Intermediate
  1. Connect the math input and the graph so that the function entered is shown in the graph.
    ★ Bonus: Use timeSinceSubmit to animate the function.
  2. Set the initial color of the sketch to red and the initial tool to the line tool.
    ★ Bonus: Add an action button that will reveal the target graph when pressed.
    ⬡ Advanced: Reset the sketch every time a new line is drawn.
  3. Limit the colors that students can use to red, blue, and green.
    ★ Bonus: Add in a fourth color of your choice and use rgb to customize it.
  4. Use currentX and currentY to center the point P on the sketch cursor.
    ★ Bonus: Calculate the point on the function that is closest to point P.
  5. Disable the button so that it can't be pressed while the animation is playing and change the button label to say "Play" when clickable and "Wait" when disabled.
    ★ Bonus: Change the color of the button to red when it's disabled.
  6. Add a resetLabel to your button that only appears after the animation has finished.
    ★ Bonus: Change the style of the reset label to white (for better visibility).
  7. Add an animation cover to this graph so that it plays the 10 second animation.
    ★ Bonus: Use a regression to indicate if the animation has been played at least once.
  8. Set the bounds of the graph using CL so that the cat is in the frame regardless of how you leave the graph window after editing.
    ★ Bonus: Make the bounds dynamic (you can choose what controls it).
  9. Use parseOrderedPair to have students plot the image of a point under a transformation.
    ★ Bonus: Use parseOrderedPair to plot the location of the entire polygon under a coordinate transformation of their choice.
  10. Use sketchLayer to copy the student sketch from the sketch component to the graph.
    ★ Bonus: Use dynamic bounds to allow students to zoom in on the sketchable area (so that they can add detail).

Project: Add polished button behavior to an animation. The button should at least be disabled during the animation and change to a reset label after the animation has completed.

Project: Create a fancy sketch cursor (maybe animated?) using images or graphs.

Advanced
  1. Reorder the images in the graph to correspond with the order they're placed in using the ordered list component.
    ★ Bonus: Add some emojis to the list items to indicate their positions in the list.
  2. Capture the x and y coordinates of a movable point when the button is pressed. Display the captured points in the graph.
    ★ Bonus: Disable the button when the movable point is not equidistant from A and B.
    ★★ Bonus x2: After 5 points have been captured, draw the parabola passing through the 5 points.
  3. Graph an inequality (in two variables) entered by a student.
    ★ Bonus: Use a table or add another input to graph the solution set bound by two inequalities.
  4. Use randomGenerator to display a random set of data that shuffles on every press of an action button.
    ★ Bonus: Create a sketch component that provides a visual of the data so students can label the key points.
  5. Use filterByColor and a sketch background in the graph to only show strokes made in the color selected.
    ★ Bonus: Instead of hiding the other colors, display them with reduced opacity.
  6. Find the y values of the sketch at the points where it intersects the movable vertical line. Use this to plot a point at the intersection.
    ★ Bonus: Change the color or size of the point based on its distance from the origin.
  7. Make a copy of the student's sketch in the background of the sketch component. Make this copy twice the size of the original.
    ★ Bonus: Layer a few more transformations to make a pattern.
  8. Use parseEquation to allow students to graph any equation.
    ★ Bonus: Use xyLine to mark the students correct if they graph a line that matches the line in the graph.
  9. Create a table for students to add x and y values. Use the button to add rows to the table. Make only the bottom row editable.
    ★ Bonus: Disable the button if either x or y is invalid.
  10. Use the conic function to graph and label an ellipse (entered in a math input) with its center and radii.
    ★ Bonus: Animate the ellipse by transforming it from the unit circle when a student submits their response.

Project: Ask students to sketch a graph comparing two quantities and interpret that sketch in context (think Function Carnival).

Project: Create a series of randomized questions for students to answer. Deliver the questions one at a time and keep track of the number of correct answers.