(Verification of my tutoring work is available for professional reference upon request.)
BackTopic | Implementing sorting and searching functions for an array of strings in JavaScript. |
Goals |
|
Outcomes |
The student and I worked together on creating and sorting an array of strings in JavaScript. We created an array containing both lowercase and uppercase letters. The student lacked a clear understanding of callback functions and how sorting is expressed in code. With much guidance, he was able to implement a case-insensitive sort using .sort() with a supplied callback. The second part of the assignment involved creating a function to represent the logic of .indexOf() in a traditional for loop. The student initially struggled with structuring the loop and the return conditions but, with a short lecture, he successfully wrote the loop. In addition, we were able to wrap the loop in a function that took in the array and a search value as parameters. |
Topic | Implementing chord functions in JavaScript to represent an abstract musical chord. |
Goals |
|
Outcomes |
Despite the student's lack of progress with this assignment due to his confusion on certain programming fundamentals, the purpose of the session was to address the learning gaps from a high level as we worked through the problems. The student was able to grasp how separating out functions allowed for him to reuse code and to store/maintain the chords. However, much more study and practice is needed for a more foundational understanding of functions and arrays. I advised him to meet with his professor to gather further study materials for this type of assignment. |
Topic | Creating an HTML file with number input fields and a JavaScript function to display the product. |
Goals |
|
Outcomes |
The student and I overviewed how to create an HTML file that included two "number" input fields, a button, and a "div" for output. The student had already set up the basic HTML structure correctly but needed help with the JavaScript functionality. We wrote the JavaScript function to use querySelector to retrieve the values from the input fields, multiply them, and display the product in an alert box. Initially, the student struggled with accessing the input values and handling the multiplication, but with guidance, he implemented the necessary code, including the event handler. |
Topic | Creating an HTML page to dynamically display album information using JavaScript. |
Goals |
|
Outcomes |
The student and I worked through the assignment together, starting with understanding the requirement to create an HTML file that dynamically displays album data. We reviewed the object provided at the specified URL and set up the basic HTML structure, serving as a basic “template” for the data. The student implemented the display_album function to handle the attributes mentioned above to display each band member's name and their instrument. The student initially struggled with loading the external data, but with guidance, he included a script tag to load data from the URL. We debugged the issues that ensured the function worked correctly for various album objects. He expressed interest in exploring, in his free time, how more instruments could be added dynamically. |
Topic | Creating an HTML and JavaScript page to display song metadata from a JavaScript array. |
Goals |
|
Outcomes |
The student and I worked to convert a JavaScript array of song metadata into an HTML page. Initially, the student had a partial understanding of how to access the array elements and had written some correct code to create and append elements using DOM manipulation. However, there were several issues with the structure and logic of the code that needed to be corrected. We reviewed the use of createElement and appendChild to dynamically build the HTML structure for each song. We focused on creating elements for the album artwork and song details and appending them correctly to the document. The student had some elements displaying correctly, but many parts were not functioning as intended. Through guided problem-solving and debugging, the student managed to correct these issues and display the data as required. We ensured the function could handle any number of songs by iteration. Finally, we discussed how to use CSS to style the elements for a given song. Overall, the student gained a better understanding of dynamically creating and appending HTML elements using JavaScript, improved his troubleshooting and debugging skills, and learned how to correct his initial mistakes to achieve the desired outcome. |
Topic | Implementing click events to dynamically style elements with CSS. |
Goals |
|
Outcomes |
The student demonstrated mastery of JavaScript event handling, implementing dynamic click event handlers to account for each image with querySelectorAll. The concept of event handling and querySelector now makes intuitive sense to the student - a major accomplishment given past struggles. He struggled with dynamically adding and removing CSS classes as well as understanding its syntax. A supplemental lecture was given on CSS which was helpful. Overall, all tutoring sessions helped this student succeed in his assignment and test prep, allowed him to better grasp core programming concepts, be more confident in asking questions, and sparked a personal interest in other programming languages and environments such as Lua. |