OnEvents as Functions then Functions inside of Functions


#1

So OnEvents are functions and students love them. Now do they try to put them inside another in order to answer 2c? Is there another way to refer to these onEvent functions or are their names just whatever the name of the element? I am walking around and that’s the main thing I am seeing is lots of onEvents.


#2

@carmichaelc

I told students that the event listeners are part of the API and therefore cannot be written about in Prompt 2C. I used the code in Stage 10’s Color Picker as an example of how the event listener calls a function I wrote which then calls other functions I wrote. BTW, this code could also be used to discuss abstraction.

onEvent(“button1”, “click”, function() {
checkCorrect(“button1”);
});
onEvent(“button2”, “click”, function() {
checkCorrect(“button2”);
});
onEvent(“button3”, “click”, function() {
checkCorrect(“button3”);
});
onEvent(“button4”, “click”, function() {
checkCorrect(“button4”);
});
function checkCorrect(buttonId) {
console.log("Checking: " + buttonId);
if (buttonId == randButtonId) {
console.log(“You got it!”);
updateScoreBy(1);
} else {
console.log(“WRONG”);
updateScoreBy(-3);
}
hideElement(“player1Win_label”);
hideElement(“player2Win_label”);
checkWinner();
setBoard();
switchPlayer();
}
function updateScoreBy(amt) {
if (currentPlayer == 1) {
p1Score = p1Score + amt;
setText(“score1_label”, p1Score);
} else {
p2Score = p2Score + amt;
setText(“score2_label”, p2Score);
}
}

Andrea


#3

I would remind students/clarify the directions for prompt 2c. They must paste their most complex algorithm, and it must integrate several mathematical and logical concepts.


#4

Could someone take a look at this code? https://studio.code.org/projects/applab/UTMvIF53n3vXDVlArBtVXg He has onEvents inside a Function (Startover) I know this one doesn’t have logic. He has another - button1 where he combined a bunch of buttons, several with logic and math. Could this one be both his answer to 2C and 2D? Many of my students have one main algorithm that has it all. @baker


#5

My suggestion would be to ask the student to create some functions and put the code that he has for updating the score or checking for game over in functions and call the functions from the event handlers. Questions 2c asks students to include an algorithm that integrates other algorithms and integrates mathematical and/or logical concepts. So it sounds to me that they need to have some math or logic and a function call inside a function. Then the same piece of code could be used to answer both 2c and 2d.


#6

Quick technical note. We don’t address it directly in the curriculum, but you can’t really embed event handlers inside a function. The event handlers are triggered no matter what. For the startover funciton in that student’s code, they’ve actually got it inverted. They should break out the code to startover into a separate function and then have two event handlers for the buttons that call the function. Here’s the diff…

Student’s code:

function startOver() {
  onEvent("playagainBtn", "click", function() {
    setScreen("startScrn");
    score = 0;
    lives = 3;
    setText("total_score", 0);
    setText("total_lives", 3);
  });
  onEvent("retryBtn", "click", function() {
    setScreen("startScrn");
    score = 0;
    lives = 3;
    setText("total_score", 0);
    setText("total_lives", 3);
  });
}

What it should be:

function startOver() {
 setScreen("startScrn");
    score = 0;
    lives = 3;
    setText("total_score", 0);
    setText("total_lives", 3);
}

onEvent("playagainBtn", "click", function() {
   startOver();   
});

onEvent("retryBtn", "click", function() {
  startOver();
});

The latter solution is “better” because you don’t have duplicate code to the startOver(). BTW this would be a GREAT example for abstraction.


#7

Thank you both for clarifying. The students have gone crazy with buttons and are building amazing apps. I think they will get it. I know I do now!


#8

First I think this totally counts as math and logic:

 onEvent("hitter", "click", function(event) {
    score = score - 1;       <----- MATH!
    setText("total_score", score);
    
    if (score == -3) {       <------ LOGIC!
      setScreen("lostScrn");
      setText("label9", score);
    }
  });

Second, I agree with @bhatnagars. Some of this code could be refactored and broken out into functions which would support abstraction along with algorithms. See the ColorSleuth project for similar examples. Exemplars are in (U5 L10 puzzle 23).

If you can break code that repeats out into a named function, that function is sort of like a little mini algorithm that you combine in your code. For example, Take the code above and break into:

 onEvent("hitter", "click", function(event) {
    changeScoreBy(-1);
    checkIfLost();
  });

 function changeScoreBy(amt){
     score = score + amt;   
    setText("total_score", score);
}

function checkIfLost(){    // would be better if this actually checked for both 
                                       // win and loss conditions and acted accordingly.  
                                      // I just refactored the student's code.
   if (score == -3) {   
      setScreen("lostScrn");
      setText("label9", score);
    }
}

To pseudo-quote Donald Knuth: “There may be bugs in the code above. I have only proved it correct, not tried it”

In some other forum post I also remarked on (1) the difficulty of identifying algorithms in event-driven programs, because any control flow logic, which is a typical candidate because it involves loops and if-statemetns, is embedded in the event-handling and (2) that it’s likely what you’ll want to identify as the algorithm and the abstraction may be the same piece of code, you just write about it differently. Again, I point to the ColorSleuth project as a perfectly acceptable low bar that meets the algorithm requirements


#9

Thanks Baker. This is making it easier to explain.


#10

@baker I am starting to go through the 79 projects to check code segments for citations. I am also using their projects for a 4th mp grade. I am still struggling with abstraction. I am pretty sure this student did not use abstraction. I hate to give them no credit at all. Could you look at their responses. What do you think? I repeated said no onEvents for algorithms too but they were too into making apps and could not understand they couldn’t use on events. See https://docs.google.com/document/d/1DTBhQlpkXFcTX26u2FdMtZtsuuMnCTnfuHxl3kLWAVk/edit


#11

Hi, sorry. didn’t see this. Briefly, your student is using abstractions there (calling system functions) but they didn’t really develop any by my book. Fortunately, or unfortunately, I think the jury is out on whether/how this will be scored as abstraction by the college board. Argument for: the callback function of an event handler is (a) a function (b) does get repeated use because it can handle every occurrence of an event. Argument against: the student didn’t have to apply any abstract thinking skills to produce this solution - the callback function of an event handler is just how you have to do it to get interactivity in your app. I would want to see clearer demonstration that the student recognized an abstraction was needed and developed something beyond what’s built into the system.

Any easy example that I just personally ran into: I want two different events (let’s say two different buttons) to do the same thing. Rather than copy/paste my code once into each event handler, I should move that code into a new function, and then just have each event handler call that function. Make sense?

–B


#12

Yeah, I thought so. So many of my students did this. I almost don’t want to use the design mode for next year unless I can get through to them. I am grading these after the 30th. I will probably be pretty lenient compared to the college board.