Create a two-page geography-quiz web application that tests users\' knowledge of

ID: 3669763 • Letter: C

Question

Create a two-page geography-quiz web application that tests users' knowledge of water bodies. On the application's opening page, users should select quiz answers and then click the submit button or the clear button. The submit button should pass user entries to the results page, where answers are checked for correctness. The clear button should reset the fields so they're unselected. See the sample session for details.

The sample session shows a two-question quiz. You are required to implement those two questions plus one additional water-body question. For your additional question, you must use a CheckBox, a CheckBoxList, or a DropDownList.

Note:

On your opening page, display the time that the user initially loads the page. As shown in the sample session, the displayed time should not change when the user clicks the Clear button. You don’t need to worry about what happens displayed time when the user clicks the refresh or back buttons – that behavior is browser dependent.

Use the CssClass property to underline user answers on the results page.

For your opening page, put your C# code in a script container at the top of the page. For your results page, put your C# code in a separate code-behind file.

You must name your files waterQuiz.aspx, waterQuizResults.aspx., and waterQuizResults.aspx.cs.

Sample session:

The initial load:

Make these incorrect choices:

After clicking the submit button:

Return to the opening page and make these

choices:

After clicking the clear button:

same time as before

Make these correct choices

After clicking the submit button:

Add input validation to your water-body quiz's opening page. More specifically, when the submit button is clicked, check whether the user has selected an answer for each question. Display red error messages accordingly. To do this extra-credit assignment, you'll need to read Chapter 6 on your own. Specifically, you'll need to read about and use the RequiredFieldValidator control for your implementation. In the sample session, note how the page expands to make room for the error messages.

Note: If you use a check box(es) for your third question, don't worry about forcing the user to select a value(s); after all, leaving a check box unchecked is a valid selection.

Hint: To prevent your clear button from performing an input validation, use CausesValidation="false" in your clear button web server control.

Sample session:

After clicking the submit button with no selections made:

D Geography Quiz-Bodies Geography Quiz - Bodies x X C f localhost: 1 5698/hw4/waterQui Geography Quiz - Bodies of Water Starting time 2/17/2016 8:08:22 AM Which is the largest lake by volume and holds 20% of the world's fresh water? OLake Victoria (Kenya) Lake Baikal (Siberia) Great Bear Lake (Canada) Lake Titicaca (Peru) Great Salt Lake (US) Cystal Peng Lake (Parkville) The Suez Canal connects the Atlantic and Pacific oceans. true A false Submit Quiz Answers Clear

Explanation / Answer

waterQuiz.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="waterQuiz.aspx.cs" Inherits="geography_quiz.waterQuiz" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type = "text/javascript">
function Validate() {

var RB1 = document.getElementById("<%=RadioButtonList1.ClientID%>");
var radio = RB1.getElementsByTagName("input");
var isChecked = false;
for (var i = 0; i < radio.length; i++) {
if (radio[i].checked) {
isChecked = true;
break;
}
}
if (!isChecked) {
document.getElementById("errorlable").style.display = 'block';
return false;
}
//return isChecked;
debugger;
var ListBox = document.getElementById('<%=ListBox1.ClientID %>');
var length = ListBox.length;
var i = 0;
var SelectedItemCount = 0;

for (i = 0; i < length; i++) {
if (ListBox.options[i].selected) {
isChecked = true;
break;
}
else
{
document.getElementById("errorlable").style.display = 'none';
document.getElementById("errorlable1").style.display = 'block';

return false;
}
}
}
</script>
<style type="text/css">
body {
margin: 0;
}

form input[type="submit"] {
background-color: #008dde;
border: none;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
color: #f4f4f4;
cursor: pointer;
font-size: large;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
height: 30px;
text-transform: uppercase;
width: 225px;
-webkit-appearance: none;
}
</style>
<style type="text/css">
.modal {
position: fixed;
top: 0;
left: 0;
background-color: black;
z-index: 99;
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
min-height: 100%;
width: 100%;
}

.loading {
font-family: Arial;
font-size: 10pt;
display: none;
position: fixed;
z-index: 399;
}

tr:nth-child(even) {
background-color: white;
}

td {
width: 263px;
}

.hoverTable {
width: 100%;
border-collapse: collapse;
}

.hoverTable td {
padding: 7px;
border: #4e95f4 0px solid;
}
/* Define the default color for all the table rows */
.hoverTable tr {
background: white;
}
/* Define the hover highlight color for the table row */
.hoverTable tr:hover {
background-color: skyblue;
}
</style>

</head>
<body>
<form id="form1" runat="server">
<div>
<table class="hoverTable" align="center">
<tr>
<td colspan="2">
<span>Geography Quiz-Bodies of Water</span>
</td>
</tr>
<tr>

<td colspan="2">
<span>Starting Time-</span><asp:Label ID="lblCurrentTime" runat="server" Font-Bold="true" />
</td>

</tr>
<tr>

<td colspan="2">Question2:
<asp:Label ID="lblSubject" Text="Which is the largest lake by volume and holds 20% of the world's fresh water?" runat="server" Font-Bold="true" />
</td>

</tr>

<tr>
<td colspan="2">

<asp:RadioButtonList ID="RadioButtonList1" runat="server" class="radioClass" RepeatColumns = "2" >
<asp:ListItem Value="Lake Victoria(Kenya)">Lake Victoria(Kenya)</asp:ListItem>
<asp:ListItem Value="Lake Baikal(Siberia)">Lake Baikal(Siberia)</asp:ListItem>
<asp:ListItem Value="Great Bear Lake(Canada)">Great Bear Lake(Canada)</asp:ListItem>
<asp:ListItem Value="Lake Titicaca(Peru)">Lake Titicaca(Peru)</asp:ListItem>
<asp:ListItem Value="Great Salt Lake(US)">Great Salt Lake(US)</asp:ListItem>
<asp:ListItem Value="Crystal Peng Lake(Parkville)">Crystal Peng Lake(Parkville)</asp:ListItem>
</asp:RadioButtonList>
<asp:Label ID="errorlable" runat="server" Text="You didn't answer this question.Do So !" ForeColor="Red"></asp:Label>
</td>
</tr>
<tr>

<td colspan="2">Question1:
<asp:Label ID="Label1" Text="The Suez Canal connects the Atlantic and Pacifi oceans?" runat="server" Font-Bold="true" />
</td>

</tr>
<tr>
<td colspan="2">

<asp:ListBox ID="ListBox1" runat="server" Width="70px" Height="50px">
<asp:ListItem>True</asp:ListItem>
<asp:ListItem>False</asp:ListItem>
</asp:ListBox>
<asp:Label ID="errorlable1" runat="server" Text="You didn't answer this question.Do So !" ForeColor="Red"></asp:Label>

</td>
</tr>
<tr>

<td align="right">
<asp:Button ID="btnquiz" runat="server" CssClass="btnclick" Text="Submit Quiz Answers"> "return Validate()"/></td>
<td>
<asp:Button ID="btnclear" runat="server" CssClass="btnclick" Text="Clear" Width="100px"/>
</td>
</tr>

</table>
</div>
</form>
</body>
</html>

waterQuiz.aspx.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace geography_quiz
{
public partial class waterQuiz : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
DateTime now = DateTime.Now;
lblCurrentTime.Text = now.ToString();
}

protected void btnclear_Click(object sender, EventArgs e)
{

}

protected void btnquiz_Click(object sender, EventArgs e)
{
string strListBox1 = ListBox1.SelectedItem.Value;
string strRadioButtonList1 = RadioButtonList1.SelectedItem.Value;
Session["ListBox1"] = strListBox1;
Session["RadioButtonList1"] = strRadioButtonList1;
Response.Redirect("waterQuizResults.aspx");
}
}
}

waterQuizResults.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="waterQuizResults.aspx.cs" Inherits="geography_quiz.waterQuizResults" %>

<!DOCTYPE html>

</td>
</tr>
<tr>
<td>
Your Answer <asp:Label ID="Label2" runat="server" Text="Label" CssClass="UnderLine" ></asp:Label> is <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label1" Text="The Suez Canal connects the Atlantic and Pacifi oceans?" runat="server" Font-Bold="true" />
</td>
</tr>
<tr>
<td>
Your Answer <asp:Label ID="Label4" runat="server" Text=" " CssClass="UnderLine" ></asp:Label> is <asp:Label ID="Label5" runat="server" Text=""></asp:Label>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>

waterQuizResults.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace geography_quiz
{
public partial class waterQuizResults : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Session["ListBox1"] !=null)
{
string strFirstQuestion = Session["RadioButtonList1"].ToString();
string strsecondQuestion = Session["ListBox1"].ToString();
Label2.Text = "<u>" + strFirstQuestion + "</u>";
Label4.Text = "<u>"+strsecondQuestion+ "</u>";
if (strFirstQuestion == "Lake Baikal(Siberia)" )
{
Label3.Text = "Correct";

}
else
{
Label3.Text = "incorrect";

}
if ( strsecondQuestion == "False")
{

Label4.Text = "Correct";
}
else
{

Label5.Text = "incorrect";
}
}
else
{
Response.Redirect("waterQuiz.aspx");
}
}
}
}

Navigate

Create a two way frequency table for the problem below. Students were having rac

Create a two-part form that calculates blueberry farmer\'s weekly income from se

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

Create a two-page geography-quiz web application that tests users\' knowledge of

Question

Explanation / Answer

Related Questions

Navigate