COMP308M23Lab1

docx

School

Centennial College *

*We aren’t endorsed by this school

Course

308

Subject

Computer Science

Date

Apr 3, 2024

Type

docx

Pages

Uploaded by HighnessPencil13770

Emerging Technologies COMP-308 Lab Assignment #1 Due Date: Sunday midnight, Week 4. Purpose: The purpose of this assignment is to learn the basics of React by creating a comprehensive evaluation platform that allows students to evaluate their courses or rate their favorite games . This assignment is designed to cater to both software engineering students and gaming students, providing an opportunity for them to apply their React skills in a project that aligns with their interests. More specifically, you will:  Become familiar with modern front-end frameworks  Become familiar with function components  Develop a UI using React, Next.js, or Svelte References: Read the reference textbook, lecture slides, and class examples. This material provides the necessary information that you need to complete the exercises. Be sure to read the following general instructions carefully: - This assignment must be completed individually by all the students. - See the naming and submission rules at the end of this document - You will have to demonstrate your solution in class and upload the solution on eCentennial through the assignment link. Exercise 1 (for Software Engineering Technology Students) Create a UI that allows students to evaluate their courses. You will have to provide a login form, a comments form, and a “Thank You” form. Implement a login for m that enables students to log in using their email address and password. Figure 1. Login form Design a comments form that allows students to enter their feedback on the course. The comments form should automatically populate the email field with the student’s email value entered in login form and allow the student to enter the course code, course name , and comments . Provide also two other Lab #1 Page 1 of 5

Emerging Technologies COMP-308 fields in this form that will be different for each student. For example, you can add fields for a favorite topic , favorite assignment , strongest technical skill obtained in this course , etc. Implement a "Thank You" form that acknowledges and appreciates the student for providing their course feedback. Build a folder structure for your application similar to class examples. Design nice and friendly forms. Figure 2. Student Comments page Lab #1 Page 2 of 5

Emerging Technologies COMP-308 Figure 3. Thank You form (10 marks) Evaluation table: Functionality (including code explanation during demonstration): Percentage of total mark UI forms ( login , comments , thankyou ) 25% Correct event handling code (( login , comments) 20% Correct use of props ( login , comments, thankyou) 20% Correct implementation of application architecture 10% Correct main.jsx and index.html files, correct naming of files 10% Friendliness  Alignments of UI elements  Friendly I/O  Demonstration with explanations 15% Total 100% Exercise 2 (for Game – Programming students) Create a React UI that allows students to rate and review their favorite games. You will have to provide a login form to allow the students to login, a game rating form to allow the students to rate and review games, and a Thank You form . The login form should accept the student’s email address and password. The game rating form should allow students to select a game from a list, rate it on a scale (e.g., 1-5 stars), and provide a written review. Additionally, include fields in the form for favorite game genre, preferred gaming platform, and any additional comments. Lab #1 Page 3 of 5

Your preview ends here

Eager to read complete document? Join bartleby learn and gain access to the full version

Access to all documents
Unlimited textbook solutions
24/7 expert homework help

Emerging Technologies COMP-308 Figure 4. Game Rating Form Enhance the UI with interactive 3D graphics using Three.js ( React three fiber ), as in Week 4 class examples. When a student rates a game, dynamically render a 3D object or scene that represents the rating value. For example, if a student rates a game as "excellent," render an impressive 3D model or scene related to gaming excellence. For a "good" rating, render a visually appealing 3D object related to positive feedback. Utilize Three.js to create engaging and immersive 3D visuals that correspond to different rating values. You can use code from the Week 4 examples. The Thank You form should express gratitude for providing the game rating and display a summary of their ratings and reviews. Implement a folder structure for your application similar to class examples. Design visually appealing and user- friendly forms, incorporating interactive Three.js 3D graphics to enhance the rating experience for gaming students. Evaluation table: Functionality (including code explanation during demonstration): Percentage of total mark UI forms ( login , gamerating , thankyou ) 25% Correct event handling code (( login , gamerating) 20% Correct use of props ( login , gamerating, thankyou) 20% Correct implementation of application architecture 10% Correct main.jsx and index.html files, correct naming of files 10% Lab #1 Page 4 of 5

Emerging Technologies COMP-308 Friendliness  Alignments of UI elements  Friendly I/O  Demonstration with explanations 15% Total 100% VS Code Project Naming rules: You must name your VS Code project according to the following rule: YourFullName_COMP308LabNumber_ ExNumber . Example: JohnSmith_COMP308Lab1_ Ex1 Submission rules: Submit your project as a zip file that is named according to the following rule: YourFullName _COMP308LabNumber_ExNumber.zip. DO NOT include nodemodules folder. Example: JohnSmith_COMP308Lab1_Ex1.zip DO NOT use RAR or other types of archives. Lab #1 Page 5 of 5

Related Documents

Blockchain 4_ Assignment 12.docx

Blockchain 1_ Assignment 9.docx

Quiz_ CCNAv7 ITN 1.5.7 QT.pdf

CIS4510_PA2 1.docx

Blockchain 2_ Assignment 10.docx

Assignment 4 - Rubric - SW Intro_Part Modeling.docx

quiz 2 - alora taylor.docx

AI Evaluation 2-2524.docx

Quiz+1+ans+2021 (4).docx

Visualization - SUMO Documentation.pdf

my 13.2.6 Packet Tracer - Verify IPv4 and IPv6 Addressing.docx

ENGT 480 Project Notes (4) (2).pdf

Recommended textbooks for you

Information Technology Project Management

Computer Science

ISBN:9781285452340

Author:Kathy Schwalbe

Publisher:Cengage Learning

Systems Architecture

Computer Science

ISBN:9781305080195

Author:Stephen D. Burd

Publisher:Cengage Learning

Information Technology Project Management

Computer Science

ISBN:9781337101356

Author:Kathy Schwalbe

Publisher:Cengage Learning

Principles of Information Systems (MindTap Course...

Computer Science

ISBN:9781305971776

Author:Ralph Stair, George Reynolds

Publisher:Cengage Learning

Fundamentals of Information Systems

Computer Science

ISBN:9781337097536

Author:Ralph Stair, George Reynolds

Publisher:Cengage Learning

Principles of Information Systems (MindTap Course...

Computer Science

ISBN:9781285867168

Author:Ralph Stair, George Reynolds

Publisher:Cengage Learning

SEE MORE TEXTBOOKS

Recommended textbooks for you

Information Technology Project Management
Computer Science
ISBN:9781285452340
Author:Kathy Schwalbe
Publisher:Cengage Learning
Systems Architecture
Computer Science
ISBN:9781305080195
Author:Stephen D. Burd
Publisher:Cengage Learning
Information Technology Project Management
Computer Science
ISBN:9781337101356
Author:Kathy Schwalbe
Publisher:Cengage Learning
Principles of Information Systems (MindTap Course...
Computer Science
ISBN:9781305971776
Author:Ralph Stair, George Reynolds
Publisher:Cengage Learning
Fundamentals of Information Systems
Computer Science
ISBN:9781337097536
Author:Ralph Stair, George Reynolds
Publisher:Cengage Learning
Principles of Information Systems (MindTap Course...
Computer Science
ISBN:9781285867168
Author:Ralph Stair, George Reynolds
Publisher:Cengage Learning