Skip to content

Latest commit

 

History

History
147 lines (136 loc) · 7.8 KB

ReadMe.md

File metadata and controls

147 lines (136 loc) · 7.8 KB
Raw

The Website is a Music Recommendation System. (Front-End)

Main Functionalities


1. An eye catching design for the application
2. A sign up process with user preferences
3. Buy movie related products
4. Displaying favorite list (past read audio)
5. Send feedback
6. Gallery page (Newest Release musics/Top picks/Most listen)

Part A ✅

All Tasks

Use ✅ when tasks or subtasks are done

  1. A presentation page with title and the name of people in the group. After 5 seconds, a second page will be displayed (Main Web page).

  2. The website should contain a signup form to enter the details of the user which is required to generate the personalized results depends on the chosen topic.

  • Personal Details (Name, Age, Gender, Occupation, Email etc) – 5 compulsory criteria

  • At least three different compulsory criteria to check the user’s preferences (Price, Brand, Features, Type etc)

  • No of items to appear in the result list

  • Use JavaScript validation to check that the user has filled-in the following compulsory fields - personal details, user preferences and number of items. Do NOT use HTML5 validation for this part. (If HTML5 validation used zero marks will be awarded)

  • If all compulsory fields are filled an alert should be generated to indicate the information submitted successfully. The pop up summary should contain "Dear Anna, Thank you for using MovieLens, The recommended results will be shown in a while.”

  1. Create gallery page that allows the user to view images. This page contains 5 thumbnail images and an area to display a larger image and associated description of that image. When the user selects a thumbnail image, the corresponding large image and the description of that image should display in the defined location on the form. You may use onMouseOver or radio buttons to select the thumbnail. (The images will be related to the topic you choose Eg: if you’re developing the movie recommendation application this could be movies about newly released/ most watched etc.)

  2. Each page of the web site should include the title logo at the top, and a link to the page editor (the person who created the page) at the bottom of the page. - Waiting for logo....

  3. Create a page editors page.

  4. Consistency of web style should be ensure through the website. (Re-use external style sheet created by Student 2)

  5. Feel free to use additional JavaScript to add interactivity and increase ease of navigation.

  6. The Main page should be designed in a way that the user can access several parts of the web site. The links on the main page should look like buttons and have a hover effect. This should be implemented using CSS

  7. The Main Page should contain a video related to the chosen topic (Eg: Trailer of a movie etc)

  8. The consistency of the style should be ensured using a unique external style sheet file. This will be used by the other members of the group though out the website.

  • Main page

  • Navigation

  1. The web site should contain a form to send comments about the web site. This form should include following
  • Form input fields for users to enter their details (name, email address)

  • Option to rate the web site (using radio buttons or select)

  • A button to reset the forms. When reset button is clicked the form should be reset.

  • The form should be validated using JavaScript validation to check that the user has filled-in the compulsory fields - 'name', ‘email’ and 'rating'. (If HTML5 validation used zero marks will be awarded)

  • If the name, email and ratings are filled-in, the user should get an HTML popup window with the summary including the name, any comments and rating given on the form.

  • The pop box should give the below message format if all compulsory fields are filled.

  • Eg: if the user entered "Anna" for their name, rated the site as "good" and entered "Very informative website", "Dear Anna, Thank you very much for your feedback. You have rated our site as Good and your comment was Very informative website."

  1. A JavaScript quiz should be created to increase the user engagement of the website.

  • The quiz should be implemented using JavaScript prompt box ().

  • It should contain 5 questions related to the topic chosen.

  • Each question carries 2 marks and -1 for each wrong answer.

  • The different badges (Gold, Silver, Bronze) will be awarded to users depending on their performance.

  • When the quiz is completed users will be given the badge awarded with the points earned in a pop up box.

  • The message should contain “Congratulation! You have earned 12 points with a Silver badge”, please claim the points in your next purchase”.

  1. Each page of the web site should include the title logo at the top, and a link to the page editor (the person who created the page) at the bottom of the page.

  2. Create editors page.

  3. Feel free to use additional JavaScript to add interactivity and increase ease of navigation.

  4. The About Us page contain four pictures of the members of the group. When the user moves the mouse over one picture, the details of that member should be displayed in an area on the page (Eg: you could use a div below the pictures). The details should include the name and role that that student took for the coursework (e.g. John Smith, Student 1).

Tasks 16 to 22 Removed as Student 3wont be implemented.

  1. Create favorite list page which contains the information of the user’s past behavior which is generated by the AI model.

  • The information of the user’s behavior will vary on the topic you choose

    • Eg: Movie Recommendation system -> past watched

  • Create a well-formed XML file to store information of the user’s past behavior.(Minimum 10 items)

  • Use JavaScript to read and display the data from the XML file.

  • Use CSS to display the XML information.

  1. Create JavaScript functionality to change the background and text color of the favorite page. (Use pulldown menus)

  2. Create a sign up form to subscribe for a personalized newsletter.

  • Compulsory form input fields (Name, email address)

  • JavaScript validation to check compulsory fields are filled and valid email address

  • If all information are correct , a pop up message should be given with below format “Dear Anne, you have successfully subscribed for a personalized newsletter”
  1. Consistency of web style should be ensure through the website. (Re-use external style sheet created by Student 2)
  2. Create editors page
  3. Feel free to use additional JavaScript to add interactivity and increase ease of navigation.

End Of All Tasks


Part B ✅

The Report.

Conduct a research on existing systems related to your chosen topic in order to get to know about the features and the context.

  • Introduction and Reference
  • Research on existing systems (related to chosen topic)
  • Technical Discussion
  • Navigation techniques
  • Color balance/Selection (appropriateness justified through color contrast test)
  • Typography (font style/size appropriateness justified)
  • Accessibility Techniques(Text, Tables, Forms, Images)
  • Accessibility test
  • Site Diagram
  • Self-Reflection

Tools to use:

  1. Color contrast check -Colour Contrast Check - snook.ca
  2. Accessibility check -WAVE Web Accessibility Evaluation Tool (webaim.org)
  3. Site Diagram – MS Visio, ConceptDraw, OmniGraffl

Final Deliverable - Live Demo needed ✅