diff --git a/components/Navbar.tsx b/components/Navbar.tsx index b48bfad..6ce34c9 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -153,28 +153,21 @@ export default function Navbar() { {navItems.map((navItem, idx) => ( - + { setIsOpen(false); console.log('hi') }}> {navItem.title} - ) )} - {/* - About - */} ## Question 1 - Minimum Spanning Tree - Given this graph, what is the total weight of the minimum spanning tree? + Given this graph, find the total weight of the minimum spanning tree. Graph @@ -53,7 +53,9 @@ Note that the theory questions in the real COMP2521 23T3 exam will not be multip and depth-first traversal on a graph. Show what would be printed by the following calls to - these functions on this graph: + these functions on this graph. + + When visiting neighbouring vertices, assume they are visited in ascending order. Graph @@ -135,8 +137,7 @@ Note that the theory questions in the real COMP2521 23T3 exam will not be multip ## Question 3 - Time complexity - What is the time complexity of the following function? - + Find the Big-O time complexity of the following function in terms of n where n is the number of elements in the `nums` array. ```c:print_nums.c void print_nums(int nums[]) { for (int i = 0; i < 100; i++) { @@ -148,43 +149,51 @@ Note that the theory questions in the real COMP2521 23T3 exam will not be multip O(1) - + - + O(100) - + - - + + + O(n) + + + ## Question 4 - Euler paths - Does an Euler path exist for this graph? - + Does an Euler path/circuit exist for this graph? + Graph - + isCorrect content="Has Euler path, has Euler circuit"> - An Euler Path does not exist for this graph. + An Euler path is a path that uses every edge of a graph exactly once. + An Euler circuit is a cycle that uses every edge of a graph exactly once. + + How to determine if a graph has an Euler path/circuit without actually finding the path/circuit: - It is known that a graph has an Euler path if and only if: - - It is connected - - It has exactly two vertices that have an odd degree + A graph has an Euler path if and only if: + - It is connected + - It has exactly zero or exactly two vertices that have an odd degree - The given graph satisfies the first criteria as it is connected. + A graph has an Euler circuit if and only if: + - It is connected + - It has exactly zero vertices that have an odd degree ie all vertices have an even degree - However, it does not satisfy the second criteria, as none of the vertices have - an odd degree. In general terms, the degree of a vertex is the number of edges + Think about why. What degree should the head, tail, and internal vertices have in order to form an Euler path/circuit? + + The degree of a vertex is the number of edges connecting it. Looking at this graph, we see: @@ -217,13 +226,17 @@ Note that the theory questions in the real COMP2521 23T3 exam will not be multip
- And realise that none of the nodes/vertices have an odd degree. Hence the second - criteria is unfufilled. - - Hence, it is concluded that an Euler path does not exist for this graph. + Notice that none of the nodes/vertices have an odd degree. So an Euler circuit does exist for this graph. And by extension so does an Euler path (as an Euler circuit is a special case of an Euler path where the start and end vertices are the same). + + + + If a graph has an Euler circuit, that also counts as an Euler path as an Euler circuit is a special case of an Euler path where the start and end vertices are the same. + + + @@ -240,7 +253,7 @@ Note that the theory questions in the real COMP2521 23T3 exam will not be multip - + @@ -251,36 +264,71 @@ Note that the theory questions in the real COMP2521 23T3 exam will not be multip ## Question 6 - Time complexity - What is the time complexity of this algorithm? + Find the time complexity of this function in Big-O notation in terms of `n`. ```c:question2.c - void function(int n) { + # Assume n is the size of the dynamically allocated array `arr` + int function(int n, int* arr) { + for (int i = 0; i < n; i++) { + for (int j = 0; j < i; j++) { + arr[i] += 1; + } + } + + int total = 0; for (int i = 0; i < n; i++) { - int *a = calloc(n, sizeof(int)); - printf("Hello!\n"); - free(a); + total += arr[i]; } + return total; } ``` - + + The first loop has a nested loop that iterates 0 times, then 1 time, then 2 times, etc. up to `n - 1` times. + ```c: + for (int i = 0; i < n; i++) { + for (int j = 0; j < i; j++) { + arr[i] += 1; + } + } + ``` + This results in a total of 0 + 1 + 2 + ... + n - 1 = n(n - 1) / 2 = O(n^2) operations (using formula for arithmetic sum). + + The second loop iterates n times. + + ```c: + for (int i = 0; i < n; i++) { + total += arr[i]; + } + ``` + + Since O(n^2) dominates O(n), the function's overall time complexity is O(n^2). + + - - + + + In Big-O notation, we focus on the dominant term, which represents the most significant factor affecting the growth rate of time complexity as the input size increases. + + In this case, the dominant term is O(n^2), so we can ignore O(n) term which becomes insignificant for larger n. + + + + ## Question 7 - Time complexity - What is the time complexity of the following function? You may assume that `n` is positive. + Find the time complexity of this function in Big-O notation in terms of `n`. ```c:halve.c + # Assume n >= 0 void halve(int n) { - printf(""called halve(%d)\n"", n); if (n == 0) { return; } @@ -304,9 +352,10 @@ Note that the theory questions in the real COMP2521 23T3 exam will not be multip ## Question 8 - Time complexity - What is the time complexity of the following function? You may assume the values of `n` and `m` passed in are positive. + Find the time complexity of this function in Big-O notation in terms of `n` and `m`. ```c:rem.c + # Assume n > m > 0 int rem(int n, int m) { while (n >= m) { n -= m; @@ -322,7 +371,7 @@ Note that the theory questions in the real COMP2521 23T3 exam will not be multip O(n / m) - This function is used to find the remainder of a division, hence the number of steps will be how many times `m` goes into `n`. + This function is used to find the remainder after dividing `n` by `m`. The number of steps will be how many times `m` goes into `n`. @@ -342,36 +391,54 @@ Note that the theory questions in the real COMP2521 23T3 exam will not be multip Graph - + Graph - + Graph - + - Graph + Graph - After inserting 45, 43 becomes unbalanced (2 left vs 4 right). + Firstly we insert the new node 45 into it's correct position in the binary search tree. - Also, its right child is left-heavy, so before doing a left rotation, we do a right rotation. - + + Graph + + + To maintain the height-balance imperative of an AVL tree, we unwind along the path from the new node back up to the root, checking the balance of each node. We find that the node 43 is unbalanced: - - - Graph + Graph + + + Since the new node 45 went to the right of 43, then to the left of 67, we need to do a double rotation to balance the tree. We first do a right rotation on 67, then a left rotation on 43: + + + Graph - + + + Graph + + + + Graph + + + Node 55 becomes the new root and our AVL tree is once again fully height-balanced after the insertion of 45. + + @@ -598,9 +665,10 @@ Note that the theory questions in the real COMP2521 23T3 exam will not be multip ## Question 16 - Time complexity (Challenge) - What is the time complexity of the following function? You may assume the value of `n` is positive. + What is the time complexity of the following function? ```c:print_pairs.c + # Assume n > 0 void print_pairs(int n) { for (int i = 1; i <= n; i++) { for (int j = 1; j <= n; j += i) { @@ -618,6 +686,10 @@ Note that the theory questions in the real COMP2521 23T3 exam will not be multip We firstly know that we will iterate through the outside loop `n` times, that gives us our `n` value. The number of iterations of the inside loop is reduced on every iteration of `i`, hence the number of inside loop iterations is being reduced in a logarithmic fashion. + + The outer loop runs `n` times. The inner loop runs `n, n/2, n/3, n/4, ...` times which is known as a harmonic series. The total number of iterations is `n + n/2 + n/3 + ... + n/n = n * (1 + 1/2 + 1/3 + ... + 1/n)`. The series 1 + 1/2 + 1/3 + ... + 1/n is the nth harmonic number, and as n approaches infinity, the nth harmonic number approaches log(n). Therefore, the overall time complexity is O(n * log(n)). + + Note: you are not expected to know about harmonic series for the COMP2521 exam. diff --git a/data/articles/ppc-backend-1.mdx b/data/articles/ppc-backend-1.mdx index 740f59a..214213c 100644 --- a/data/articles/ppc-backend-1.mdx +++ b/data/articles/ppc-backend-1.mdx @@ -172,5 +172,4 @@ In our next article we will look at next="/articles/ppc-backend-2" nextName="Backend Project Tutorial 2 - MongoDB" -> - \ No newline at end of file +/> diff --git a/data/articles/ppc-backend-2.mdx b/data/articles/ppc-backend-2.mdx index 69cedbb..213693d 100644 --- a/data/articles/ppc-backend-2.mdx +++ b/data/articles/ppc-backend-2.mdx @@ -134,6 +134,4 @@ nextName="Backend Project Tutorial 3 - CRUD Opearations" prev="/articles/ppc-backend-1" prevName="Backend Project Tutorial 1 - Creating a simple Express.js backend" -> - - +/> diff --git a/data/articles/ppc-backend-3.mdx b/data/articles/ppc-backend-3.mdx index 89fa604..772963b 100644 --- a/data/articles/ppc-backend-3.mdx +++ b/data/articles/ppc-backend-3.mdx @@ -97,5 +97,4 @@ nextName="Backend Project Tutorial 4 - Users and authentication" prev="/articles/ppc-backend-2" prevName="Backend Project Tutorial 2 - MongoDB" -> - \ No newline at end of file +/> diff --git a/data/articles/ppc-backend-4.mdx b/data/articles/ppc-backend-4.mdx index beca8f2..3f341a7 100644 --- a/data/articles/ppc-backend-4.mdx +++ b/data/articles/ppc-backend-4.mdx @@ -384,5 +384,4 @@ nextName="Backend Project Tutorial 5 - Deployment" prev="/articles/ppc-backend-3" prevName="Backend Project Tutorial 3 - CRUD Operations" -> - \ No newline at end of file +/> diff --git a/data/articles/ppc-backend-5.mdx b/data/articles/ppc-backend-5.mdx index 7469acc..df11895 100644 --- a/data/articles/ppc-backend-5.mdx +++ b/data/articles/ppc-backend-5.mdx @@ -53,5 +53,4 @@ That's about it for our backend tutorial. To recap, we have set up an Express ba prev="/articles/ppc-backend-4" prevName="Backend Project Tutorial 4 - Users and authentication" -> - \ No newline at end of file +/> diff --git a/data/articles/reactjs-tut-0.mdx b/data/articles/reactjs-tut-0.mdx index ad7db29..58d3168 100644 --- a/data/articles/reactjs-tut-0.mdx +++ b/data/articles/reactjs-tut-0.mdx @@ -1,5 +1,5 @@ --- -title: "ReactJS Project Tutorial: Introduction" +title: 'ReactJS Project Tutorial: Introduction' date: 2022-06-28 desc: A series of tutorials to teach you the fundamentals of ReactJS and how to build a frontend project. author: Gordon Huang @@ -7,13 +7,16 @@ tags: - 'ReactJS' - 'Frontend' coverPhoto: '/images/generic/shahadat-rahman-BfrQnKBulYQ-unsplash.jpg' - --- Welcome to this tutorial series on ReactJS! This tutorial aims to teach you the fundamentals of the ReactJS front-end library so you can learn how to build your own projects with ReactJS. By the end of this tutorial series you will have built a front-end application like this: -Final product of this this tutorial series + Final product of this this tutorial series ReactJS is a front-end JavaScript library for building user interfaces for websites, dynamic web applications, mobile apps, and many other places that need a visual interface for users to interact with software. It was released in 2013 and since then it has become by far the most popular tool for building web applications. It is made and maintained by Facebook/Meta and is used for many commercial apps and websites like Facebook, Instagram, Airbnb and Uber Eats. Needless to say, ReactJS is currently widely used in industry and there are huge swathes of positions in the tech industry for ReactJS developers. So learning ReactJS will give you valuable front-end UI development skills, and also make you highly employable for many years before the next big front-end framework takes its place. @@ -28,5 +31,4 @@ If you're ready, learn to build a mini React application starting in the - \ No newline at end of file +/> diff --git a/data/articles/reactjs-tut-1.mdx b/data/articles/reactjs-tut-1.mdx index 8dbdf4e..5e87bce 100644 --- a/data/articles/reactjs-tut-1.mdx +++ b/data/articles/reactjs-tut-1.mdx @@ -40,6 +40,7 @@ $ node -v and press enter. This tests whether you have installed NodeJS correctly. If you have, it should print the version of NodeJS which you have installed, such as `16.15.0`. ## NPM - Node Package Manager + Installing NodeJS also automatically installs NPM (Node Package Manager) which manages JavaScript packages for your projects. To check that it has installed properly, type into your command line: ```bash: @@ -82,22 +83,33 @@ $ cd reactjs-project-tutorial Also open up the project in VSCode by opening up VSCode and opening the folder reactjs-project-tutorial. -Open VSCode and open a folder + Open VSCode and open a folder -Select the my-react-app folder + Select the my-react-app folder You should now be able to see the source code of your new React app in your code editor! -Your React source code app in VSCode + Your React source code app in VSCode In the next tutorial we'll explore all the different parts of the code that create-react-app has given to us. - - - - +/> diff --git a/data/articles/reactjs-tut-2.mdx b/data/articles/reactjs-tut-2.mdx index 429ccaf..a7dce78 100644 --- a/data/articles/reactjs-tut-2.mdx +++ b/data/articles/reactjs-tut-2.mdx @@ -22,7 +22,6 @@ In the last tutorial you installed all the tools we'll need to create a React ap install it. - The README.md file at the bottom has a brief description of this repository and how to use it. The .md extension stands for _markdown_, a common text editing syntax to format text. It is not code; markdown is to make text readable for humans. In general you should use a README.md in a project to give an overview of what your project does, how to use it, and any other information you think would be useful for people interested in your code. @@ -85,5 +84,4 @@ prev="/articles/reactjs-tut-1" nextName="ReactJS Project Tutorial: Part 3" prevName="ReactJS Project Tutorial: Part 1" -> - \ No newline at end of file +/> diff --git a/data/articles/reactjs-tut-3.mdx b/data/articles/reactjs-tut-3.mdx index 3be4301..f5894ce 100644 --- a/data/articles/reactjs-tut-3.mdx +++ b/data/articles/reactjs-tut-3.mdx @@ -124,5 +124,4 @@ prev="/articles/reactjs-tut-2" nextName="ReactJS Project Tutorial: Part 4" prevName="ReactJS Project Tutorial: Part 2" -> - \ No newline at end of file +/> diff --git a/data/articles/reactjs-tut-4.mdx b/data/articles/reactjs-tut-4.mdx index 1e77e72..0741c29 100644 --- a/data/articles/reactjs-tut-4.mdx +++ b/data/articles/reactjs-tut-4.mdx @@ -286,7 +286,6 @@ const App = () => { Currently we have effectively "hard-coded" the restaurant information into our app. We want to be able to dynamically store and change this information. We will learn how to do this in the next tutorial. - - \ No newline at end of file + +/> diff --git a/data/articles/reactjs-tut-5.mdx b/data/articles/reactjs-tut-5.mdx index 1a1245b..938a770 100644 --- a/data/articles/reactjs-tut-5.mdx +++ b/data/articles/reactjs-tut-5.mdx @@ -12,7 +12,9 @@ coverPhoto: '/images/generic/joan-gamell-nFqwVZhimpM-unsplash.jpg' Variables are a fundamental concept in programming because it allows us to store and modify data depending on where or how our program is used. In a React app, variables are made using something called the `useState` hook. React hooks are functions that can be called from within our functional components like `App` to use various core React features. -The tutorial starts getting a bit tricky here. If you get lost at any point, take a look at the sample implementation at [github.com/dqna64/reactjs-project-tutorial/tree/full-walkthrough](https://github.com/dqna64/reactjs-project-tutorial/tree/full-walkthrough). + The tutorial starts getting a bit tricky here. If you get lost at any point, + take a look at the sample implementation at + [github.com/dqna64/reactjs-project-tutorial/tree/full-walkthrough](https://github.com/dqna64/reactjs-project-tutorial/tree/full-walkthrough). To use the `useState` hook, first import it into our App.jsx file. Then inside the `App` functional component and above the return statement, write the following: @@ -229,5 +231,4 @@ prev="/articles/reactjs-tut-4" nextName="ReactJS Project Tutorial: Part 6" prevName="ReactJS Project Tutorial: Part 4" -> - \ No newline at end of file +/> diff --git a/data/articles/reactjs-tut-6.mdx b/data/articles/reactjs-tut-6.mdx index f2d67ae..f0a51ea 100644 --- a/data/articles/reactjs-tut-6.mdx +++ b/data/articles/reactjs-tut-6.mdx @@ -16,7 +16,11 @@ Just like how functions in programming can separate responsibilities and elimina Make a new components folder in src . This new folder will store any reusable components that we create. Inside src/components create a file Card.jsx and add in this template for a basic React component: -new Card.jsx component + new Card.jsx component We want this `Card` component to render the restaurant card we made in App.jsx . Cut and paste that JSX into the return of this `Card` component. Remember to wrap it in parentheses. Also be sure to move the star.svg and Card.css imports from App.jsx to Card.jsx (hint: the path from Card.jsx to Card.css is "../styles/Card.css" where ".." means "the parent folder of the folder that contains this file"). @@ -248,12 +252,11 @@ Our app now renders a list of cards of all restaurants specfied in the `places` That's all for this series of tutorials, well done on making it to the end! The fundamental concepts that you have learned here including components, props and state will be useful in all future ReactJS projects that you work on. -There are also many more things to learn which we haven't covered in this series. What if you want to provide a form to add more restaurants, or increase `visits` count for a restaurant? These features can be achieved using things called *event handlers*, which ReactJS does very similarly to HTML. There are plenty of resources online including other articles, videos and documentation to teach you those things. The best way to learn how to use them is to continue building projects and searching the internet for learning resources like these whenever you get stuck. Good luck on your ReactJS journey and have fun! +There are also many more things to learn which we haven't covered in this series. What if you want to provide a form to add more restaurants, or increase `visits` count for a restaurant? These features can be achieved using things called _event handlers_, which ReactJS does very similarly to HTML. There are plenty of resources online including other articles, videos and documentation to teach you those things. The best way to learn how to use them is to continue building projects and searching the internet for learning resources like these whenever you get stuck. Good luck on your ReactJS journey and have fun! - \ No newline at end of file +/> diff --git a/pages/articles/[slug].tsx b/pages/articles/[slug].tsx index ce7a548..f9f2b98 100644 --- a/pages/articles/[slug].tsx +++ b/pages/articles/[slug].tsx @@ -5,7 +5,6 @@ import { allArticleTypes, ArticleType } from 'contentlayer/generated' import { format, parseISO } from 'date-fns' import { useMDXComponent } from 'next-contentlayer/hooks' import Head from 'next/head' -import Image from 'next/image' import { Box } from 'components/Box' import Callout from 'components/Callout' import FileName from 'components/Filename' @@ -21,26 +20,44 @@ import NextArticleButton from 'components/NextArticleButton' // import PrevArticleButton from 'components/PrevArticleButton' import ArticleButtonContainer from 'components/ArticleNavigationContainer' import { BackButton } from 'components/BackButton' +import { MDXComponents } from 'mdx/types' +import { forwardRef } from 'react' -const defaultComponents = { - Image, +/** + * Create lightweight wrapper components to satisfy MDXComponents type + */ +const WrappedLink = ({ href, children }: { href: string, children: React.ReactNode }) => { + return ( + + children + + ) +} + +const WrappedArrowDown = ({ size }: { size: number }) => { + return ( + + ) +} + + + +// Add any components used in MDX files here. +// Components here load dynamically if they're used. +// See https://github.com/tsriram/with-mdx-bundler for details. +const components: MDXComponents = { Callout, FileName, Centerer, MultiChoice, - Link, - ArrowDown, + Link: WrappedLink, + ArrowDown: WrappedArrowDown, NextArticleButton, // PrevArticleButton, ArticleButtonContainer } -// Add any components used in MDX files here. -// Components here load dynamically if they're used. -// See https://github.com/tsriram/with-mdx-bundler for details. -const components = { ...defaultComponents } - export async function getStaticPaths() { const paths = allArticleTypes.map((a) => ({ params: { slug: a.slug } })) return { diff --git a/public/images/comp2521-revision/q10-avl-c.png b/public/images/comp2521-revision/q10-avl-c.png index b8dffcd..a98e44c 100644 Binary files a/public/images/comp2521-revision/q10-avl-c.png and b/public/images/comp2521-revision/q10-avl-c.png differ diff --git a/public/images/comp2521-revision/q10-avl-e.png b/public/images/comp2521-revision/q10-avl-e.png index ba0d71e..6c15b2b 100644 Binary files a/public/images/comp2521-revision/q10-avl-e.png and b/public/images/comp2521-revision/q10-avl-e.png differ diff --git a/public/images/comp2521-revision/q10-avl-explanation-1.png b/public/images/comp2521-revision/q10-avl-explanation-1.png new file mode 100644 index 0000000..6da747c Binary files /dev/null and b/public/images/comp2521-revision/q10-avl-explanation-1.png differ diff --git a/public/images/comp2521-revision/q10-avl-explanation-2.png b/public/images/comp2521-revision/q10-avl-explanation-2.png new file mode 100644 index 0000000..e3be1c1 Binary files /dev/null and b/public/images/comp2521-revision/q10-avl-explanation-2.png differ diff --git a/public/images/comp2521-revision/q10-avl-explanation-3.png b/public/images/comp2521-revision/q10-avl-explanation-3.png new file mode 100644 index 0000000..4051e27 Binary files /dev/null and b/public/images/comp2521-revision/q10-avl-explanation-3.png differ diff --git a/public/images/comp2521-revision/q10-avl-explanation-4.png b/public/images/comp2521-revision/q10-avl-explanation-4.png new file mode 100644 index 0000000..9d82c79 Binary files /dev/null and b/public/images/comp2521-revision/q10-avl-explanation-4.png differ diff --git a/public/images/comp2521-revision/q10-avl-explanation-5.png b/public/images/comp2521-revision/q10-avl-explanation-5.png new file mode 100644 index 0000000..08ed555 Binary files /dev/null and b/public/images/comp2521-revision/q10-avl-explanation-5.png differ