How to display only one question per page on ASP.NET webforms

Question

I'm working on a project using Webforms in Visual Studio where I'm building a quiz. Right now, I have all the questions on a single page. However, I want to transition this to have one question on the screen at a time, with a next and back button to let me switch between questions.

However, I want to try to keep this within the same .aspx file. Please let me know how I can achieve this! Please look below to see what my code looks like now. Thank you!

<p>Question 1</p>
<p>Text here</p>
<p>
    <asp:Button ID="btnq1a" runat="server" OnClick="correct_click" Text="True" CssClass="btn btn-sm btn-default" /> <br>
    <asp:Button ID="btnq1b" runat="server" Text="False" CssClass="btn btn-sm btn-default" />
</p>
<p>Question 2</p>
<p>Text here</p>
<p>
    <asp:Button ID="btnq2a" runat="server"  Text="answer 1" CssClass="btn btn-sm btn-default" /> <br>
    <asp:Button ID="btnq2b" runat="server"  Text="answer 2" CssClass="btn btn-sm btn-default" /> <br>
    <asp:Button ID="btnq2c" runat="server"  Text="answer 3" CssClass="btn btn-sm btn-default" /> <br>
    <asp:Button ID="btnq2d" runat="server" OnClick="correct_click" Text="All of the above" CssClass="btn btn-sm btn-default" />
</p>
<p>Question 3</p>
<p>Text here</p>
<p>
    <asp:Button ID="btnq3a" runat="server" OnClick="correct_click" Text="True" CssClass="btn btn-sm btn-default" /><br>
    <asp:Button ID="btnq3b" runat="server" Text="False" CssClass="btn btn-sm btn-default" />
</p>

I am not sure where to even start. I tried researching various frames or instances of a page but could not find anything of substance, so I am turning to Stack Overflow!

corcre · Answer 1 · 2022-11-17T07:45:32.853

seems you need to use javascript here, but maybe you should split the document by div first, like

<div Id="Question1">
//all your question 1 stuff
</div>
<div Id="Question2">
//all your question 2 stuff
</div>
........

then you need to control they show/hide by Id like this Show/hide 'div' using JavaScript

and if you don't know how to use javasctipt in .aspx file, I found a link who has same question https://social.msdn.microsoft.com/Forums/en-US/e68d9d86-ef12-4807-9bec-a2554bf95e78/how-to-write-javascript-in-aspx-page-?forum=aspwebforms

score 0 · Answer 2 · answered Nov 19 '22 at 17:23

Here is alternate way of doing a quiz in webforms... You could use the out-of-box 'Wizard' server control found in View\Toolbox in Visual Studio.

Drag-and-drop the Wizard control on the Design surface of any aspx-page and start filling in text, drag in checkboxes and buttons from Toolbox in a WYSIWYG way of working. Use AutoFormat to quickly get a professional look. Switch to Source view to fine tune your code.

Using the Wizard control is a fast way to get a quiz up and running.

https://learn.microsoft.com/en-us/archive/msdn-magazine/2004/november/cutting-edge-the-asp-net-2-0-wizard-control

https://learn.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.wizard?view=netframework-4.8

score 0 · Answer 3 · answered Dec 16 '22 at 13:32

If you would like to use Panel, you can do like this:

<asp:Panel ID="Panel1" runat="server">
    <p>Question 1</p>
    <p>Text here</p>
    <p>
        <asp:Button ID="btnq1a" runat="server" OnClick="btnq1a_Click" Text="True" CssClass="btn btn-sm btn-default" /><br />
        <asp:Button ID="btnq1b" runat="server" Text="False" CssClass="btn btn-sm btn-default" />
    </p>
</asp:Panel>

<asp:Panel ID="Panel2" runat="server">
    <p>Question 2</p>
    <p>Text here</p>
    <p>
        <asp:Button ID="btnq2a" runat="server" Text="answer 1" CssClass="btn btn-sm btn-default" /><br />
        <asp:Button ID="btnq2b" runat="server" Text="answer 2" CssClass="btn btn-sm btn-default" /><br />
        <asp:Button ID="btnq2c" runat="server" Text="answer 3" CssClass="btn btn-sm btn-default" /><br />
        <asp:Button ID="btnq2d" runat="server" OnClick="btnq2d_Click" Text="All of the above" CssClass="btn btn-sm btn-default" />
    </p>
</asp:Panel>

<asp:Panel ID="Panel3" runat="server">
    <p>Question 3</p>
    <p>Text here</p>
    <p>
        <asp:Button ID="btnq3a" runat="server" OnClick="btnq3a_Click" Text="True" CssClass="btn btn-sm btn-default" /><br />
        <asp:Button ID="btnq3b" runat="server" Text="False" CssClass="btn btn-sm btn-default" />
    </p>
</asp:Panel>

Code behind:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        Panel2.Visible = false;
        Panel3.Visible = false;
    }
}

protected void btnq1a_Click(object sender, EventArgs e)
{
    Panel1.Visible = false;
    Panel2.Visible = true;
}

protected void btnq2d_Click(object sender, EventArgs e)
{
    Panel2.Visible = false;
    Panel3.Visible = true;
}

protected void btnq3a_Click(object sender, EventArgs e)
{
    // finished
}

How to display only one question per page on ASP.NET webforms

3 Answers3