JavaScript for interactivity in Intro to Computing - Draw & Build Visually

Draw This - beginner

Draw a flowchart that shows how JavaScript adds interactivity to a webpage by responding to a button click event. The flowchart should start with the user clicking a button, then show JavaScript detecting the click, running a function to change the text on the page, and finally ending when the text is updated.

10 minutes

Hint 1

Hint 2

Hint 3

Hint 4

Hint 5

Grading Criteria

Start and End oval symbols present

User click event represented as input (parallelogram)

JavaScript detecting event shown as a process (rectangle)

Function running to change text shown as a process (rectangle)

Text update shown as output (parallelogram)

Flow direction is clear and logical from start to end

Solution

  _______                 
 /       \                
|  Start  |               
 \_______/                
      |
      v
  ________________        
 / User clicks    \       
| button (event)  |       
 \________________/       
      |
      v
  ____________________    
 / JavaScript detects  \  
| the click event     |  
 \__________________/    
      |
      v
  ____________________    
 / Run function to     \  
| change text on page |  
 \__________________/    
      |
      v
  ____________________    
 / Text on page is    \  
| updated            |  
 \__________________/    
      |
      v
  _______                 
 /       \                
|   End   |               
 \_______/                

This flowchart starts with the user clicking a button on the webpage, which is the input event. JavaScript detects this click event and then runs a function. The function changes the text on the page, which is the output. Finally, the flowchart ends after the text is updated. Each step is represented by standard flowchart symbols: ovals for start/end, parallelograms for input/output, and rectangles for processing steps.

Variations - 2 Challenges

[intermediate] Draw a flowchart showing how JavaScript responds to a user entering text in a textbox and then clicking a submit button to display a greeting message.

[advanced] Draw a flowchart for JavaScript interactivity where a user clicks a button to toggle the visibility of an image on the webpage (show/hide).