![image.png](https://files.peakd.com/file/peakd-hive/wwwiebe/23yTz7VmruzQm361fkY7Cir1JZP6A8yNX7jysewAvDRVR3ovipBMPQWpCnWVrTnrS5qnq.png)

I have been helping my son catch up on some computer science work (basically, I'm helping him catch up on the entire trimester's work), and the recent project has been to build an app on code.org.

The code.org platform is designed to help teach students computer science. It's primary interface of dragging blocks onto a canvas is shared by multiple other drag-and-drop application toolkits, such as MIT App Inventor, Scratch, and Lego Mindstorms:


![image.png](https://files.peakd.com/file/peakd-hive/wwwiebe/EoH49pmecwu6bHLWN54oUV3NvNdmkK45jmE9PHWSyLxLq4Sy4L2fDU7CN8tCT6bB7to.png)
(MIT App Inventor)

For better or worse, I've spent at least a few years of my career writing scripts and working in computer science, so I'm certainly familiar with a lot of the constructs that a grade 10 computer science class will need to know. They're currently working on loops, lists, and querying data sets, which are items that are second, even third, nature to me. Fourth even.

Most work to be performed in code.org can be completed by dragging blocks onto the canvas and filling them out correctly. However, we were beginning to run into an issue where the documentation was listing examples for blocks that did not exist, and by showing examples of actual written code in addition to blocks; this was confusing me greatly, leaving me wondering how to proceed in helping the boy.

Then, lo, I found it: the *Show Text* button:

![image.png](https://files.peakd.com/file/peakd-hive/wwwiebe/23wrA5MRFhJgRD1MhRknsQcQh5ETYzg1Y328sVEug3EtAcRgMf9YyuZEcYs5k5xJ95SAh.png)

This button literally changes the canvas editor from a drag and drop interface to a freeform text interface:

```
onEvent("home_lifespan_button", "click", function( ) {
  setScreen("lifespan");
  setProperty("lifespan_pulldown_cat", "options", getColumn("Cats", "Name"));
});
onEvent("home_temperament_button", "click", function( ) {
	setScreen("attributes");
});
onEvent("attribute_home_button", "click", function( ) {
	setScreen("title_screen");
});
onEvent("lifespan_home_button", "click", function( ) {
	setScreen("title_screen");
});
onEvent("lifespan_pulldown_cat", "change", function( ) {
	console.log("Selected option: " + getText("lifespan_pulldown_cat"));
	var cat_name=getText("lifespan_pulldown_cat");
	readRecords("Cats", {Name:cat_name}, function(cat_records) {
	   var minimum_age=cat_records[0]["Minimum Life Span"];
	   console.log("Minimum Age: " + minimum_age);
	   setText("label_min", minimum_age);
	 });
});
```

This solved so many problems for me! The particular issue I was facing was how to query the data set he had chosen. If it was a database I'd write an SQL statement, but it's not a database and SQL isn't an option; instead the documentation directed us to a "readRecords" function which I couldn't find a block for! Now, with being able to write the code directly, I am in a better position to help him complete his project.

**What I Learned Today**: I learned the code.org web interface for teaching students computer science.

---

(c) All images and photographs, unless otherwise specified, are created and owned by me.
(c) Victor Wiebe

---

**About Me**

```
Sometimes photographer. Wannabe author. Game designer. Nerd. 
General all around problem-solver and creative type.
```

Creator of *What I Learned Today* Hive community: https://peakd.com/c/hive-131257/created

---

**Blind Skeleton**

Online Radio: https://victorwiebe.com/radio_wiebe
Friday Night Concert: 6:00pm EST

![Blind Skeleton.jpeg](https://files.peakd.com/file/peakd-hive/wwwiebe/23tRxJCBUeHLB8LrWVoE5LeWLNN3rsH1xmMu3ZPkLYVr6XWqkMD18gfkMfYTKGFLbNLQ8.jpeg)