Hello, dear friend, you can consult us at any time if you have any questions, add WeChat: daixieit

Final Project: Make a instructional website

The final course project is to make a website to teach someone about a topic you are knowledgeable about. This could be teaching how to cook or bake something based on a recipe, how to build or design something like a birdhouse, how to repair something like a broken wall, how to maintain something like changing oil in a car, or anything else you can imagine. The best examples have several discrete steps.

Your website will include text, images and/or videos, interactive learning activities (formative assessments) as well a summative assessment and a teacher's dashboard that reports information.

You should also display feedback immediately after a question is answered. It would be useful to also explain why the answer is correct or incorrect.

Your website should consist of three or more pages not including the summative assessment or the teacher's dashboard. Make sure that you have navigation from one page to the previous and next pages so a user can easily transverse your website.

Each webpage should have at least one learning objective and at least two skills that should be clearly labeled and displayed near the top of the page. There should be at least one learn by doing (formative assessment) for each skill. So if a webpage has two skills, then it should have a minimum of two formative assessments.

One or more of the webpages should include images and/or videos.

After the instructional material is presented, the user is given a summative assessment. This may use the same questions and exercises that were used on the instructional pages. It should be a minimum of three questions. Once the user submits the summative assessment, a page should present the student's results as well as a summary of all student results; this is the teacher's dashboard.

All the data including the student name should be collected, stored in FireBase for both the formative and summative assessments.

You’ll need to have 3 or more people complete your activity so you get enough data to display. So you will need to use:

· JavaScript to collect user input from a webpage,

· JavaScript to write and run simple analysis algorithms on data

This final project will build on your previous projects and assignments in the course. Feel free to use that material that you previously submitted in completing your final project. We will be using your:

· GitHub Website from Unit 1 in which you learned to correctly organize the files that make up a website and how to create an account on GitHub and host a HTML file.

· Using links to build a multipage website from Unit 2 in which you learned how to use hyperlinks in HTML to build a multiple page website.

· Creating and processing user events like you did in Hello World Example in JavaScript and in Create flashcards to test your knowledge! in Unit 4.

· Practicing JSON with cats and kittens from Unit 5 in which you learned to store and recover data using JSON

· Create a data store in which you successfully created, stored, and retrieved data in a cloud-based Firebase database.

Let's walk through the steps for this project.

Create the instructional material and the formative assessments

Create your instructional material and formative assessments. We find that it helps to create this in a Google Doc and then create the files from that.

Click to download the recommended design document that learning engineers at Carnegie Mellon University use. You may find it helpful to use this when you are designing your course.

Choose a task that you want to teach. Try to think about what the learning objectives are must be met to complete the task. Then try to think about what skills are necessary to master in order to meet each learning objective.

For example, for the learning objective: Create a new HTML page. The corresponding skills are

· Understand the basics of how an HTML tag functions

· Use correct format when using opening and closing HTML tags with content included

· Create a webpage skeleton using html, head, title, body tags

Then you need to think about what you need to teach a person so that they will be able to master the skills. Finally, you will need to add assessments to test if they did indeed learn the material.

Create a GitHub project directory

When you are ready, create your GitHub project directory. Remember from Unit 1 that you want to use a structure like the following. You should also have a directory for the JavaScript scripts.

File

Your initial file structure for your website directory.

Create your instructional materials in HTML

It's probably easiest to first plan out your instructional materials and then create HTML files based on these.

You will want to display the learning objectives and skills at the top of each page. You can do this using JavaScript which is the way that Open Learning Initiative would display Learning Objectives. It is also acceptable for this assignment to hardcode them in your HTML file.

At least one or more of the webpages should include images and/or videos as well as learn by doing (formative assessments) on all pages. Make sure that you have navigation from one page to the next so your users can easily transverse your website.

Create your JSON file

Create an array of question objects in a JSON file. Look back at Active learning: Working through a JSON example for the superheroes.json file if you need a refresher on the JSON format. I strongly recommend that for every change, no matter how minor, that you use a JSON validation site to make sure your syntax is correct such as https://jsonlint.com/. You will save yourself hours of debugging; JSON is very picky.

Each question object should have a question type (short answer, multiple choice, true/false, fill in the blank, etc), the correct answer and for multiple choice questions it will also need to include the incorrect answers (distractors). Each question should have at least one hint, the skill associated with the question, and an array to store the student responses.

You will need to add fields to the JSON format to store each student's name and their responses. Hint: You need to save the responses for each person. So if three students answer the questions, you should have three sets of answers in your database (Firebase). Each individual set of answers corresponds with one student. You will also need to save your JSON data in Firebase. See the course page Summative Assessment: Adding, updating, and retrieving data for a refresher on how to store JSON data.

Think about how you can create a format for Firebase that allows you to store data for each user in your database. What is the 'key' that differentiates one set of answers from the another? You will want to use this key to index what you are storing in the database.

Do you need to keep track in JSON which learning objectives and which skills correspond to which page?

Get the student's name and store it in JSON

Before showing the student any instructional material, create a page that asks for their name and store that in JSON. Refer back to Forms in HTML sending data to JavaScript and Creating a quiz using HTML and JavaScript if you need a refresher. We covered storing variables in JSON on the page Active learning: Working through a JSON example. Once you store the name your can start the lesson.

Decision Point: How to display the instructional pages?

You will need to decide how the instructional material is encoded. Do you encode each page in a static HTML file or do you store the contents of the HTML file in JSON? If it is the latter, you would build the page on the fly by using familiar constructs such as innerHTML to update the HTML file.

You have multiple HTML pages that you display to the user one at a time. These pages should take advantage of JavaScript's onLoad function to make sure you display the correct learning objectives, skills, and questions for each page. You will need to include links to the previous and next pages.

To load the pages from JavaScript, you can simulate a mouse click by using this JavaScript snippet:

window.location.href = "mypage.html";

If you were going to build the course in the Open Learning Initiative, the actual HTML course pages would likely be stored in JSON. If you take this approach, there will be no physical HTML pages. Therefore, you will need to have buttons and callbacks for the user to transverse the pages in the website.

You can take either approach.

Display the instructional pages

After you get the student's name, you will want to load the first instructional page with the learning objectives, skills, instructional material and questions. You will need to retrieve the JSON data from the database and iterate over the JSON data to display these. A good first step to see if you can transverse your JSON and print out values. See the course page Summative Assessment: Adding, updating, and retrieving data for a refresher on how to retrieve JSON data from Firebase.

Once you are able to successfully print out the data in your JSON file then you can create routines responsible for printing out the learning objectives and skills as well as the questions. If you are storing the HTML pages in JSON you can also write a routine to display the page contents as well.

You should display the appropriate questions on each instructional HTML page. A user should be able to answer and immediately see if it is correct or not so you should have feedback for each answer. If the user enters an incorrect answer, give them a hint. You may want to define a <div></div> where you can change the innerHTML to display the hint.

Remember to track and store the value in JSON every time that they enter a response to a question. You will need to store their answer to track the number of times that a question has been answered correctly and on what try (first, second, third, etc...) Reminder: you want to make sure that you save a different set of responses for each person. So if three students answer the questions, you should have three sets of answers with one for each student.

Store JSON in Firebase so you have a permanent record of what the students did. You can do this after each question is answered or after each page or at the end of the session. That is up to you.

Create a teacher dashboard to display the student results

Create a teacher dashboard in the form of a report that displays the current students, their results by skill and the cumulative results. We largely leave the design up to you; be creative as you choose. Have fun!

Have at least three people try out your website so you have data to display.