In this section, we first describe how a teacher creates and manages a lecture. Then we show how to develop and control the animation.
EduTalk provides a lecture creation page (Figure 3.13) for teachers to create new lectures. The Name field (Figure 3.13 (a)) specifies the lecture name. The URL field (Figure 3.13 (b)) implements the material URL, which links to the materials to be shown in a
dedicated page. The Program Name field (Figure 3.13 (c)) defines the program name, which should follow the Python variable naming rules. As illustrated in Section 2.2, when a user accesses a lecture for the first time, EduTalk makes a copy of the default code for him/her.
Based on the default code, he/she can easily start programming. The Code field (Figure 3.13 (d)) allows the specification of the template for the default code, where either “New” or
“BallFreeFall” should be selected. If the “New” item (Figure 3.13 (e)) is selected, the default code shows data sent from the smartphone. Compared to the “New” item, if the
“BallFreeFall” item (Figure 3.13 (f)) is selected, the default code will render a falling ball animation additionally.
Figure 3.12 Home Page (A teacher has logged in.)
16
The Input field (Figure 3.13 (g)) allows teachers to choose the desired features, which are the data that the animation receives from the smartphone. Once a feature is selected, the corresponding data source options will show below (Figure 3.14 (a)). For example, if the teacher clicks a checkbox in Figure 3.14 (b), the data source has two options: “range slider”
and “input box.” If the teacher chooses the “range slider” (Figure 3.14 (c)) item for gravity, users can simulate the gravity data through a range slider in a dedicated webpage. The “Min”
(Figure 3.14 (d)), “Max” (Figure 3.14 (e)), and the “Default” field (Figure 3.14 (f)) customize the range and default value of the range slider. If the “input box” item (Figure 3.14 (g)) is selected for the radius, users can type a number in the input box to generate a radius data. The teacher can also create new features through Figure 3.14 (h), and choose to simulate each new feature data using a range slider or an input box. If the teacher selects Acceleration,
Gyroscope, Orientation, or Magnetometer item (Figure 3.14 (i)), the animation will get raw data from corresponding smartphone sensors (Figure 3.14 (j)). If the teacher selects Humidity, UV, or Alcohol (Figure 3.14 (k)), the smartphone will use the MorSensor (Figure 3.14 (l)) to collect the intensity of humidity, ultraviolet, or alcohol. Once all required fields were set, the
Figure 3.13 Lecture Creation Page
17
teacher may click the “Add” button (Figure 3.14 (m)) to save the new lecture. Then the browser will automatically redirect to the lecture page of this new lecture (Figure 3.15).
In the lecture page (Figure 3.15), the lecture editing window (Figure 3.15 (a)) allows the teacher to rename the lecture (Figure 3.15 (b)). Figure 3.15 (c) identifies the material URL and shows the content linked by this URL (Figure 3.15 (d)). Figure 3.15 (e) shows the
program name, which the teacher set when he/she created this lecture. ODFs (Figure 3.15 (f)) to receive data are listed next to the program name. Teachers (or the administrator) can delete the lecture through the “Delete Lecture” button (Figure 3.15 (g)). The “View” button (Figure 3.15 (h)) is a toggle button. When the “View” mode is selected in the toggle button (Figure 3.15 (h)), the lecture editing window is activated, where the teacher can edit this lecture. If the
“Edit” mode is selected through the toggle button, the lecture editing window is hidden. The
“Add New Lecture” button (Figure 3.15 (i)) allows teachers to access the lecture creation page (Figure 3.13) quickly.
Figure 3.14 Lecture Creation Page (cont.)
18
On the other hand, if a student accesses a lecture, the lecture page (Figure 3.16) only shows the lecture material (Figure 3.16 (a)). Students can not add a new lecture or modify the lecture information. In the lecture page, all users can click the “Program” button (Figure 3.15 (j) or Figure 3.16 (b)) to start programming. In the program page (Figure 3.17), there is a code editor (Figure 3.17 (a) and (b)) that allows the user to write the VPython program. If the
“Save” button (Figure 3.17 (c) and (d)) is clicked, the current code will be checked and saved into the EduTalk database. Detected syntax errors (Figure 3.17 (e)) will show on top of the editor. If the “Reset” button (Figure 3.17 (f) and (g)) is clicked, the user’s current code will be replaced by the default code of the lecture. Teachers and the administrator can click the “Set as Default” button (Figure 3.17 (h)) to release his/her code as the default code of this lecture.
Figure 3.15 Lecture Page of the new lecture (from a teacher’s perspective)
Figure 3.16 Lecture Page of the new lecture (from a student’s perspective)
19
(1) From a teacher’s perspective (2) From a student’s perspective
After programming, the user can click the “Animation” button (Figure 3.17 (i) and (j)) to execute his/her program and watch the animation. In the animation page (Figure 3.18), Figure 3.18 (a) shows the animation generated from the user’s program. If the scanning icon (Figure 3.18 (b)) is clicked, the window pops up a QR Code (Figure 3.19). Then everyone can scan the QR Code to access the remote control page (Figure 3.20). If multiple people scan the QR Code at the same time, only the last person can control the animation.
Figure 3.17 Program Page
Figure 3.18 Animation Page
20
The remote control page contains components to control the animation, which are generated based on the teacher’s setting when he/she created this lecture (see Figure 3.14).
Figure 3.20 (a) is the range slider to simulate gravity (Figure 3.20 (b)) data. To generate the radius data, the user can type in a number in the input box (Figure 3.20 (c)) and click the
“OK” button (Figure 3.20 (d)). Sensors automatically start collecting data when the user visits this page. For example, the accelerometer in the smartphone collects acceleration data and shows in Figure 3.20 (e). The “on” button (Figure 3.20 (f)) is a toggle button. When the “on”
mode is selected in the toggle button (Figure 3.20 (f)), corresponding sensor data keep transmitting to the animation. To stop the data transmission, the user toggles the “on” button to the “off” mode (Figure 3.20 (g)).
Figure 3.19 QR Code
21
Figure 3.20 Remote Control Page
22