JavaScript tutorial #1 2020-02-24 The place of JavaScript within web-programming What is JavaScript used for? https://www.thoughtco.com/what-is-javascript-used-for-2037679 What JavaScript can’t do? https://www.thoughtco.com/what-javascript-cannot-do-2037666 Enabling JavaScript in your web browser: https://enable-javascript.com/#firefox Main problem statement Design and implement a web-page that will help school children to improve their mathematical skills. To limit data bandwidth requirements, the web-page should be implemented in a single dynamic HTML page that executes completely on the client platform. Specifications and limitations: • • • • The scope of this assignment is JavaScript (obviously within the context of HTML). You’ll have to make use of JavaScript to make a single HTML page more dynamic in its possible user interaction. Styling and other CSS related aspects are important in practice but not important in this tutorial assignment. (In other words, functionality is all that is important in this assignment.) Your final submission for this assignment should be a compressed file (*.zip format) containing all of the files required to display your web page(s). Your web-page should have the following basic functionality: ◦ The lesson will focus on only one specific topic e.g. fractions or polynomials or exponents. You can choose any school maths topic. The following are just ideas: ▪ Polynomial factorization ▪ Arithmetic with fractions ▪ Calculation of the roots of a second order polynomial ◦ The lesson should be interactive and allow the child to progress from beginner level through intermediate to advanced level in the particular mathematical topic that is the focus of the web-page. There should therefore be three levels within the topic. Ideas for such levels are once again as follows: ▪ Polynomial factorization: quadratic polynomials, 3rd order, 4th order polynomials ▪ Arithmetic with fractions: addition, subtraction, multiplication ▪ Roots of a 2nd order polynomial: real repeating roots, real unique roots, complex roots ◦ A typical lesson consists of three parts: ▪ Content: i.e. a short description on how to do the math. Note that you don’t have to write this – a screen shot from an online resource will suffice. ▪ An example: i.e. a briefly written out example of the technique ▪ A test consisting of three similar questions (on the topic). E.g. three different quadratic expressions that have to be factorised. ◦ All examples and tests in the web-page should be randomly generated. In this manner the child can request additional examples before writing the test. The test will also be slightly different everytime it is written. ◦ As the child progresses through the lesson data of his/her performance should be collected in a JSON object (with the aim of eventually transmitting it through to a central server). Note that the web-page only has to create and populate the JSON object and show it on the screen – server connections are outside the scope of this assignment. The children’s math teacher is interested in the following information: ▪ Did the child actually use the web-page? (i.e. Date-time stamps of usage are important) ▪ What were the test questions that the child faced? (this should be recorded along with level descriptor data – e.g. level 1 or level 2) ▪ What were the child’s answer to each question? Suggested approach (method) 1. Design your own webpage in terms of the (very basic) layout and functionality. 2. Work through the tutorial material available on https://www.w3schools.com/js/default.asp to learn how to implement the functionality that you desire. More specifically, the following “chapters” might be useful: 1. JavaScript Where To 2. JavaScript Output 3. JavaScript Variables 4. JavaScript Operators 5. JavaScript Arithmetic 6. JavaScript Functions 7. JavaScript Objects 8. JavaScript Events 9. JavaScript Strings 10. JavaScript String Methods 11. JavaScript Numbers 12. JavaScript Number Methods 13. JavaScript Arrays 14. JavaScript Array Methods 15. JavaScript Dates 16. JavaScript Math 17. JavaScript Conditions 18. JavaScript Switch 19. JavaScript Scope 20. JavaScript Mistakes 21. JS Best Practices 22. JS JSON 23. JS HTML DOM