Student Review - Blog 1 | MortCanvas Student User • 37 min read

Initial Requirements

As I took responsibility of developing and scheming the CSCanvasHub, I went and used design programs like Figma, which helped me envision of what the student would need to see when logging in. After detailed conversations with Mr. Mortensen, he emphasized the need for the student to use the original CS blog post to retain to if they had some issue, however, access was an issue, and therefore the requirement of our new idea being disruptive yet also having the original source being integrated came up. The initial requirement was to create an “Assignment Selector” web page where users could select a week and view the corresponding assignment details in an iframe. The page was designed with a simple layout, using the Roboto font for a clean appearance. The assignments for each week were hard-coded into a JavaScript object, and the iframe would load the content based on the selected week.

I began to implement my figma designs into code, below you will see snippets of the exact functionality I used.

var weekDetails = {
    "week1": {
        "details": "Week 1: Java Hello, Java Console Games, Linux Shell and Bash",
        "iframeURL": "https://nighthawkcoders.github.io/teacher//c4.0/2023/08/15/java-hello_IPYNB_2_.html"
    },
    // ... other weeks ...
};

Enhancement - Freeform Iframe Feature

Upon review, it was suggested to make the iframe “freeform”, meaning users should have the option to view or hide the iframe content. This was achieved by adding a toggle button with a blue arrow. When clicked, this button would either display or hide the iframe. The arrow would also change direction to indicate the current state of the iframe (collapsed or expanded). This was because after consulting with Mr. Mortensen, it seemed clear that he didn’t want the user to be suddenly flashed with another copy of his blog. Because of this, I decided to give the user to option on if they wanted to view the iFrame or not, allowing them to have total control and access of what they wanted.

Below you will see a code snippet outlining the free-form, after that you will see the output of the mechanism:

function toggleIframe() {
    var iframe = document.getElementById('assignmentIframe');
    var arrow = document.getElementById('iframeArrow');
    if (iframe.style.display === "none") {
        iframe.style.display = "block";
        arrow.innerHTML = "➘";
    } else {
        iframe.style.display = "none";
        arrow.innerHTML = "➤";
    }
}

Addition of Metadata

As a team we collectively decided that the user would be more satisfied and content if they immediately knew what the requirements and objectives for the week were, rather than scrolling all the way through the blog in order to find out. Metadata would include additional information like “Hacks”, “Due Date”, and “Overall Assignment Objective”. To accommodate this, the JavaScript object was expanded to include a metadata section for each week. When a week was selected, the metadata would be displayed below the assignment details.

Below you will see a code snippet outlining the meta data feature, after that you will see the output of the mechanism:

"week1": {
    "details": "...",
    "iframeURL": "...",
    "metadata": {
        "Hacks": "Build your own Jupyter Notebook meeting specific competencies.",
        "Due Date": "August 22, 2023",
        "Overall Assignment Objective": "Introduction to Java basics and Linux Shell."
    }
},
// Format of the meta-data, THEN TRANSPORTED TO LIQUID

JavaScript and OOP

Where I truly shone was in his use of object-oriented programming (OOP) principles in JavaScript. I built a robust system to manage assignments and their details. Each assignment became an instance of the Assignment class, encapsulating its properties like assignment details, metadata, and iframe URLs. This approach allowed for better organization and modularity of the code.

BACKEND WORK!

Debugging and Iterative Development

uring the development of the MortCanvas Assignment Selector, one of the primary challenges faced was ensuring the seamless integration of dynamic content loading. The iframe, which was responsible for displaying the assignment details, occasionally failed to load the intended content. Similarly, there were instances where the metadata associated with a particular week did not render as anticipated. These inconsistencies posed a significant challenge, as they directly impacted the user experience.

Identifying the Problem:

The first step in addressing these issues was to pinpoint the exact nature of the problem. Was the iframe not loading due to an incorrect URL? Was the metadata not displaying because of a misconfiguration in the data structure or a flaw in the rendering logic?

var selectedWeek = weekSelector.value;
var iframeURL = weekDetails[selectedWeek] ? weekDetails[selectedWeek].iframeURL : "";

The above snippet was crucial as it determined the URL that the iframe would load. Any discrepancies in this logic could lead to the iframe not displaying the intended content.

Implementing Diagnostic Tools:

To gain better visibility into the flow of data and the behavior of the functions, console logs were strategically placed throughout the code. This allowed for real-time monitoring of variable values, function calls, and data flow.

console.log("Selected Week:", selectedWeek);
console.log("Intended Iframe URL:", iframeURL);

By observing these logs, it was possible to trace the sequence of events leading up to the display of the iframe and metadata. If the iframeURL was incorrect or not what was expected, it indicated a potential issue in the data retrieval or assignment logic.

Cross-referencing with Data Structures:

The JavaScript object weekDetails was the backbone of the entire functionality. It stored the details, metadata, and iframe URLs for each week. Ensuring the integrity and correctness of this data structure was paramount.

By cross-referencing the intended outputs with the actual values stored in weekDetails, it was possible to identify mismatches or errors in data assignment.

Refining the Rendering Logic:

The logic responsible for rendering the metadata was scrutinized. Each key-value pair in the metadata object was supposed to be displayed in a user-friendly format.

var metadataDiv = document.getElementById('metadata');
for (var key in metadata) {
    metadataDiv.innerHTML += "<strong>" + key + ":</strong> " + metadata[key] + "<br>";
}

Ensuring that this loop executed correctly and accessed the right metadata was essential for accurate display.

After a thorough debugging process, the issues with the iframe and metadata display were resolved. The console logs, which served as invaluable diagnostic tools, were eventually removed to clean up the code and optimize performance. The end result was a robust and reliable Assignment Selector that delivered a consistent user experience.

CollegeBoard Learnings and Correction

OVERALL SCORE: 30/40

Corrections

Question 4

Chose D. Incorrect. This would be the result if the expression x / y was y / x instead.

The correct answer is C. When we evaluate the express(x < 10) && (y < 0) for x having the value 7 and y having the value 3, x < 10 evaluates to true, since 7 is less than 10, and y < 0 evaluates to false, since 3 is not less than 0. The logic operator && evaluates to true when both conditions are true and evaluates to false otherwise. Since the second condition is false, the boolean expression is false. As a result, the compiler will skip the first output statement and execute the statement in the else. The expression x / y is integer division for 7 / 3, which is 2.

Question 13

I chose C. This is wrong. In the fourth iteration, k has the value 3, arr[3] is 3 which is greater than arr[4] which is 0, therefore 3 3 is printed. Since k will never be arr.length – 1, which is 5, the values of 5 10 will not be printed. There is no value subsequent to 10 to complete the comparison.

The correct answer is B. Correct. The for loop starts the loop control variable k with the value 0 and increments by 1 until k == arr.length - 1. In each iteration of the for loop, the element of arr at index k is compared with the element of arr at index k + 1. If the current value is greater than the next value, the current value of k.

Question 23

List is an interface, which an ArrayList implements. Please note that List is no longer tested as part of the AP CSA exam and ArrayList will be used instead.

Correct. List is an interface, which an ArrayList implements. Please note that List is no longer tested as part of the AP CSA exam and ArrayList will be used instead. The manipulate method contains a for loop with a loop control variable k that starts at the right most index of animals, decrements by 1 each time, until k is equal to 0. In the first iteration, when k is 5, if the element of animals at 5 (“baboon”) starts with a “b”, which it does, then this value is removed from the list and inserted at index 1

Question 24

Correct. The enhanced for loop iterates over the array oldArray. In the first iteration, newArray[0][0] is assigned the value 1. The value of row is incremented to 1. Since 1 % 3 does not equal 0, the statements in the if are not executed. In the next iteration, newArray[1][0] is assigned the value 2.

Question 29

Correct. The original code segment prints all values between 1 and 100 that are evenly divisible by 4. The following values are printed: 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, and 100. Choice E shows these values can also be printed by having a for loop that has a loop control variable k that starts at 4, increments by 4, and terminates when k is greater than 100.

Question 31

Correct. Passing a reference parameter results in the formal parameter and the actual parameter being aliases. They both refer to the same object. Any updates made to the referenced array when mystery.

Question 33

Correct. Since k is never changed in the body of the while loop, it will always be 1 and less than 4.

Question 35

Correct. The modulus operator (%) evaluates to the remainder when the first operand is divided by the second operand. For example, 2574 % 10 evaluates to 4 the remainder when 2574 is divided by 10.

Question 37

Correct. Choice I will cause the while loop to iterate while x is less than 6. The variable x is assigned 1 to start and then incremented by 2. It will be assigned the values 1, 3, 5 and then 7.

Question 38

Correct. The original expression evaluates to true when either y is greater than 10000 or x is between 1000 and 1500.

Final Reflection and Learnings

As the trimester comes to a close, it’s time to reflect on the incredible journey we’ve embarked upon in our Computer Science class. This trimester has been marked by growth, challenges, and countless learning opportunities. Each member of our development team has played a crucial role in shaping the Canvas-like Learning Management System (LMS) tailored to our class, and I’d like to share my reflections on this remarkable experience. Personal Growth and Collaboration

One of the most significant aspects of this trimester has been the opportunity for personal growth. Collaborating with my talented team members has been a true privilege. We’ve faced complex problems head-on and found innovative solutions together. My role in developing the student-oriented features allowed me to stretch my creative and technical abilities. Frontend Journey: Object-Oriented Programming in JavaScript

I took the lead in building the student dashboard and features. Leveraging object-oriented programming (OOP) principles in JavaScript was a pivotal aspect of my work. By creating the Assignment class, I encapsulated assignment details, metadata, and iframe URLs, making the code more organized and extensible. The dynamic assignment selection, enabled through event listeners and DOM manipulation, brought a user-friendly touch to the frontend.

javascript

// JavaScript snippet for dynamic assignment selection document.getElementById(‘week’).addEventListener(‘change’, () => this.displayAssignment());

Back to the Backend: Java and OOP

My contributions extended to the backend as well, where I embraced Java and continued to apply OOP principles. I designed Plain Old Java Objects (POJOs) to represent essential entities, ensuring modularity and maintainability. Integrating Java Persistence API (JPA) into the backend streamlined database operations, a key component of the LMS.

java

// Java POJO example public class Assignment { private Long id; private String title; private Date dueDate; // Other fields, getters, setters, and methods }

The Bigger Picture: Impact on Education

Our Canvas-like LMS project is more than just code; it’s about the potential to revolutionize education. By creating a user-centric platform, we aim to empower both students and teachers. Our LMS encourages engagement, simplifies the learning process, and fosters collaboration. The impact of this project on our class’s educational experience is something I’m genuinely excited about. Future Endeavors

As we wrap up this trimester, I’m eager to see our LMS project evolve and improve. With the foundations we’ve laid, I’m confident that the teacher-focused features, contributed by my team members, will further enhance our system. Our collective effort will continue to shape the future of education technology. Gratitude and Looking Ahead

I’d like to express my gratitude to my fellow team members, teachers, and mentors who have supported and guided us throughout this journey. The skills and experiences gained this trimester will undoubtedly serve as a strong foundation for our future endeavors.

As we move forward, let’s remember that learning is a continuous process, and the possibilities are endless. Together, we’ll explore new horizons, overcome challenges, and make a lasting impact on the world of education.

Here’s to the next trimester and the exciting adventures it holds!