Session Logs - Aron S.

(Verification of my tutoring work is available for professional reference upon request.)

Back

5/5/2024

Topic Implementing sorting and searching functions for an array of strings in JavaScript.
Goals
  • Get to know the student.
  • Understand the student's challenges and goals to ensure success in his remaining time of the university programming course.
  • Develop an understanding of how to manipulate arrays in JavaScript.
  • Learn to implement a case-insensitive sort using the .sort() function and a callback.
  • Write a custom function to replicate the behavior of the .indexOf() method using a for loop.
  • Enhance problem-solving and debugging skills in JavaScript.
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.

5/5/2024 (second half)

Topic Implementing chord functions in JavaScript to represent an abstract musical chord.
Goals
  • Create functions to manage a chord represented as an array of note names.
  • Implement functions to create a new chord, add notes, check for existing notes, get chord size, and convert the chord to a string.
  • Ensure proper understanding of function abstraction and the concept of unique elements within an array.
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.

5/7/2024

Topic Creating an HTML file with number input fields and a JavaScript function to display the product.
Goals
  • Create an HTML file with two "number" input fields, a button, and a "div" for output.
  • Write JavaScript to multiply the numbers from the input fields when the button is pressed.
  • Display the result of the multiplication in an alert box.
  • Ensure the HTML and JavaScript work together seamlessly to achieve the desired result.
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.

5/12/2024

Topic Creating an HTML page to dynamically display album information using JavaScript.
Goals
  • Learn how to create an HTML file that uses external JavaScript to dynamically load and display data.
  • Write a function called display_album to process and display album data from an external JavaScript source.
  • Ensure the function can handle the needed object attributes such as "name," "artist," "art," "year," and "band."
  • Iterate through the nested objects to display more album info.
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.

5/19/2024

Topic Creating an HTML and JavaScript page to display song metadata from a JavaScript array.
Goals
  • Understand how to convert a JavaScript array into an HTML struct using functions such as createElement and appendChild for DOM rendering.
  • Display album art and song details dynamically from the provided array.
  • Ensure the page works for any number of songs and can be styled appropriately using CSS.
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.

5/27/2024

Topic Implementing click events to dynamically style elements with CSS.
Goals
  • Ensure the student has all questions addressed as this was the last tutoring session.
  • Attach event handlers to all images using querySelectorAll.
  • Create the needed CSS classes with a focus on class “selected”.
  • Implement the relevant code to add/remove classes based on user interaction.
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.