Added TRASH CAN

I have been away from my project for a couple of weeks because I needed to focus on closing out the school year. I now have my students working on balloon cars and catapults....and it is a 3-day weekend, so I have a bit of time to get back to this project.

Today I worked on creating a second puzzler question... but this question had a couple aspects that have added a few tools to my tool bag.

First: Most significantly, I have added a TRASH CAN to the "dots" list.... (You can see it in the bottom/right corner) This will be a location where some draggers might have to be placed.... for the students to get the answer correct. In other words: I can now include EXTRA draggers/answers and the students have to decide if they are extra or not.... They have to make the decision to throw away some answers. This makes it harder to just guess there way through the problem.

Second: I have added a new dragger object called "F" which includes a chalk-font subscript word. I can alter the word when each "F" object is created. In this scene you can see Force of Gravity (F of "g")... Force of Ice (F of "ice") and Force of Push (F of "push")...   There will be many times when I can use this object.

Third: I made the clicker-drag engine able to work in STAGES..... Instead of just ONE big set of answers, the students in this scene will FIRST set up the vectors, then progress on to the second set of click-drags where they have to set up the labels on the vectors. Only after the student has gotten BOTH stages correct do they get the entire problem correct. This required a bit of adjustment in the program. (Again, I can use this in future questions)

Time: 7 hours

Puzzler - Lights & Sounds

I took a few days off, away from programming.

Then, the past couple of days I worked on refining the Puzzler. I mainly added more feedback mechanisms for the student... basically making it more "video game like".... I added sound and some animations... These are best seen by USING the program, but here are some photos to give you an idea:

First I worked on something I am going to call a SKIP. This is the ability of the student to SKIP a question if they feel it is too difficult for them. How do "skips" work? The student is given ONE skip at the start of the Puzzler. They then earn ONE MORE skip after completing each level. If a student never uses their skips they will have FOUR skips available to them by the time they get to level four. When the student USES a skip (by pressing the "fast forward" button) they also lose a nominal amount of points. In the image above the student has ONE SKIP LEFT, as indicated by the red "1" in the circle. This is what the circle looks like when the student hovers the mouse pointer over the fast forward button. (Adding the red number to track the number of skips took some time.)

Then I added some animation/visual effects to let the student know when they lose and gain points. When they lose points a dark cloud quickly appears at the location of their mouse pointer, with a number indicating how many points the just lost.

In the picture above the student just lost 1 point, and the screen has reset.

I also added a visual for when the student completes a question and earns points:

Here the student has just earned 25 points. The animations are a bit different from each other in that the ADD points gets larger and brighter, while the SUBTRACT points look more like a chalk dust cloud and get dimmer. In general it takes 100 points to clear one level of the Puzzler.

All three of these effects were fairly complicated additions to my program, requiring multiple interactions from different areas of the program. (It turns out that ENTERFRAME HANDLERS are needed for any sort of animation... plus some sort of calculations to determine the change of various properties such as alpha, and scale.)

To give you an idea, here is the updateCloud function that is initiated with an enter frame handler (every time the game updates its frame, at about 30 fps, it will trigger this function). Here you can see that the explodeCloud alpha is DECREASED and then the "flicker" function is called. (see next image). For the circleCloud (which is the blue ring that occurs when the student scores points) the alpha is INCREASED by the equation shown. I wanted the rate of increase to DECREASE over time so that it would quickly get bright and then stay bright for a while, before disappearing. (The formula I came up with was just a combination of trial-and-error, algebra, and logic.)

Here is the "flicker" function that is within the explodeCloud object. Once the alpha value (which determines how dim the cloud is) is changed, the flicker function will set the scale values to cause the cloud to get larger as it gets dimmer. Then I use the alpha value to determine WHICH of the three cloud images (explode1, 2, or 3) are displayed so that it appears to change shape as it gets dimmer.

 

I also spent much time implementing SOUND EFFECTS and LOOPING BACKGROUND SOUND. As a student progresses through the levels there will be a different looping background sound. There are various sounds to indicate success and loss of points as well.

Time: 8 hours

PUZZLER ACTIVITY - Main pieces done

A "Puzzler" will be the final activity of each Unit that a student can do at home. They log in with their username, four-digit number that they got from their note-taking, and the unique 2-letter code that goes with their username (that they earned by completing two Unit activities.)

The Puzzler is sort of a... game.... at the end of which the student is given a score of 1, 2, 3, or 4. I call it a game but it is also like a quiz/test. The student is given a series of tasks to perform. In general: when they make mistakes they lose a little bit of score... when they complete the tasks they gain score. As they proceed through the activity their points go up. It may take 4 or 5 puzzles to earn a "1" and then another handful to earn a "2"...

This is just PRACTICE for the actual activity, called a "Quizzler," which the students will be taking DURING CLASS TIME while we are in the COMPUTER LAB. The student will do the Quizzler, which is similar to the Puzzler that they practiced on, and they will EARN POINTS on their actual grade.

This weekend I spent time creating the basic, functioning framework for the Puzzler. The Scorebar is a big part of this.

After logging in (the log in is basically the same as before, but the student MUST have ALL THREE parts of the log in to gain access to the Puzzler) there is an introduction scene that describes the Puzzler. It ends with the option of the student simulating a Quizzler, or just staying in "Easy" mode. Easy mode means that the Puzzler will give the student access to the Help screens that will continue to tutor the students during the activity. (During the later Quizzler there will be very limited Help... It will be more like a Quiz)

In the next screen the student is working on the first "puzzle." You can see that this one is very similar to the bowling ball/bowling pin from the actual Unit 3 activity. Some main differences apparent here are: (a) there is no page number in the upper left corner, (b) in place of page number is a score bar in the upper left (it is all white at the moment because the student has earned no points.) and (c) their are some control buttons (upper right) that are missing (the Fast Forward and Jump Back buttons)

In this next picture the student has just completed the first puzzle, earning them some score towards gaining 1 point on this assignment. You can see that the score bar has a little bit of yellow in the far left edge. This is the image for about five seconds while the puzzler is moving on to the next puzzle.

So far I only have ONE SINGLE puzzle to repeatedly complete, but it is good enough to test out the code used to run Puzzler. After completing the puzzle a few more times you can see that the student has enough score to earn 1 point. The score bar shows a "1" in yellow, plus a little bit in orange is shown, working towards earning a "2" on the assignment.

At first it appears that I just cut-and-pasted the code from the Bowling Ball activity. However, I have made SOME MAJOR CHANGES to that original code in order to be able to more easily replicate the "click-n-drag" puzzles for a wide range of questions/topics. The Bowling Ball activity was done one-piece at a time as I learned how to create that code.

Here is an example of the code required to just check 1 arrow placed on 1 dot:

In contrast, the new code uses arrays instead of SINGLE OBJECTS. Here is an example of one of the arrays: _legitMoves. (Just ONE LINE of this array takes the place of all of the lines of code you see above!)

The first element in this array contains the following information:

• 1,1 means that dragger#1 (which happens to be an 4N Up arrow) is allowed to be placed on dot#1 (which is the dot that is on the car).

• "4000N force of ROAD pushing up ON CAR" - is the text that is displayed in yellow when the student correctly places this object in that location.

• -100, -100  tells where to locate the text relative to the mouse pointer position

The result:

The original Bowling Ball level code was 1010 lines long... In comparison, the newer Car Crash code is only 650 lines of code! Also, I can more easily repeat this newer code my (mainly) changing the arrays. I won't have to re-program every single level. This will be VERY IMPORTANT when programming the Puzzlers/Quizzlers, which are likely to have 10, 20 or even more puzzles/scenes per activity!

Time: 10 hours

Score Bar (for Puzzler and Quizzler activities)

The past two days I worked on creating a score bar for certain activities.

This will be linked to the grade that the student earns for the unit.

At the conclusion of each "online unit" the student will have been given the passwords to allow them to take a "quizzler" activity at school. The quizzler will be sort of a game but it will be quiz-type questions for the student to solve. There will be a score bar displayed at the top of the quizzler. As the student progresses through the quizzler (and succeeds) the score bar will increase. The student will then earn 1, 2, 3, or 4 points for the activity as his score increases. The score bar will show the students progress. I anticipate a single quizzler activity to take about 20 minutes. Think of it as a video-game/quiz.

BEFORE the student actually takes the quizzler at school they have the option of doing a similar activity at home: a "puzzler." The puzzler will basically be a practice quizzler (but the student will not earn an actual grade for it.) The student can practice playing at home to get a practice score. (I will use a "score bar" for that activity as well, to help the student "practice" at earning a 3 or 4 in class.)

Here is a 10-series snapshot of the score bar...

You can see the four colored regions... This hypothetical student is progressing along the levels... the first two snapshots show a student in level 1. The third snapshot shows a student who has competed level 1 and earned (at least) a "1" on this assignment grade. They then continue on through level 2, and 3. The last four images show the student progressing along level 4 (purple) until they finally (last image) complete level 4 and earn 4 points on the assignment.

Programming information: The score bar is just another "class" element in actionscript 3, similar to a button element. I can just insert the score bar at the top of any frame. (I had to create eight separate images to construct the score bar.)

Time: 4 hours