I need full answer from $1$ to $10$

Advanced Web Programming $-$ Assignment $2($You need to use chapters $5-14)$

A group of $(1-5)$ students may work together

Dr$.$ Yousef Kilani

$(2$ marks$)$ Write an html document that shows the following output. Allow the user to enter student name, the marks of the first exam $($from $20\%),$ second exam $($from $20\%),$ final exam $($from $50\%),$ choose the mark for participation $($from $10\%$ marks$)$ and selects the number of absences the students absent from the class.

$Id=rslt$

$(1$ marks$)$ Make an appropriate video that demonstrates how to use the form. Add this video to the end of the form. The video must have an audio that demonstrates how to use your application in details. $($hint: You may use the Camtasia studio software$).$

$(1$ mark$)$ The audio bird $mp3$ is played all the time while the document is opened.

$(2$ marks$)$ Apply the following events:

a$.$ When the user focused the textboxes of ids: Name, fi$,$ se$,$ fn and p The audio rain mp$3$ is played and the audio

bird.mp $3$ is stopped.

b$.$ When the user blurred the textboxes of ids: Name, fi$,$ se$,$ fn and $p$ the audio bird. $mp3$ is replayed and the audio rain $mp3$ is stopped.

$(3$ marks$)$ Compute the total grades for student as follows:

Total $=$ first $+$ second $+$ final $+$ participation

If the student absences exceeds $6$ times $)(7$ then his Grade is F

Else

If the number of absences for the students does not exceed $7$ times, then the grade is based on the total as follows:

$\backslash$table$[[$Total$,$Grade$],[0-40,$F$],[41-60,$E$],[61-69,$D$],[70-79,$C$],[80-90,$B$],[91-100,$A$]]$

Put the student name, Total and grade in the textbox near the button $($as shown in the form above$)$ after the student pressed the compute button.

$6.(3$ marks$)$ The user must enter a valid student name. A valid student name must contain only letters and spaces. E$.$g$.$ of valid names, "Ahmad Ali", "Yousef kitand" "Mona ahmad mahmoud". Eg of invalid names: $"123$ ali". "rev$*65",$ "Mahmoud $78$&$".$ If the user enters an invalid $1)$ a message in red color below the textbox appears to indicate there is an error, $2)$ a $*$ in red color beside the textbox is appeared, $3)$ the border of the textbox becomes red, and $4)$ the Audio noisy mp $3$ is played:

Student Name

Error: The name must contain only letters and spaces

$7.(3$ marks$)$ When the result is F$,$ a message in red color under the textbox "You need more effort" appears. Also, the background of the textbox control beside the Button is changed to red as follows.

You need more effort

Play the audio badresult $mp3$ when Grade $=F$

$8.(1$ marks$)$ When the result is A$,1)$ a message in red color under the textbox "Great Effort" appears $2)$ the background color of the textbox control beside the Button is changed to blue and $3)$ Play the audio Applause.wav

$9.(2$ marks$)$ if the user enters a mark for either first, second, and or final exams that is not correct $($not in the range$)$ : $1)$ a message in red color below the textbox appears to indicate there is an error, $2)$ a $*$ In red color beside the textbox is appeared, $3)$ the border of the textbox becomes red, and $4)$ the Audio noisy $m$ m is played:

Error: You must enter a mark between $0-20$

$10.(2$ marks$)$ If the user clicks on the button labelled "Show All" then all the previously entered correct names and their correct marks are displayed in a table as follows:

$\backslash$table$[[\backslash$table$[[$Student$],[$Name$]],$First,Second,Final,$\backslash$table$[[$Participatio$],[$n$]],\backslash$table$[[$Absences$],[(<mn\; id="EditorElement\_5984569">7</mn>$ times$)],[$yes no$]],$Grade$],[15,20,40,5,$yes,B$],[\backslash$table$[[$Ali$],[$zocbi$]],10,20,30,10,$yes,C$],[\backslash$table$[[$Yousef$],[$Rababah$]],20,20,30,5,$no$,$F$]]$