Create panel in which questions can be switched

Question

0.00/5 (No votes)

See more:

I want to create a panel which is generated randomly as total no of questions can change, and in panel student can switch to question , if answered its color changes to green is viewed and not answered then color changes to orange and if not viewed is defined by default color.
Please suggest me how to approach on this concept,
as i tired creating individual button , but that is complicating as number of questions are also changing.

What I have tried:

ASP.NET

<div id="swtchPanel" style="width: 100%; height: 250px; margin-removed 50px;">
                    <div style="width: 30%; float: left; margin-removed 9%; padding: 5%;">
                        <asp:Button ID="Button1" runat="server" Text="1" class="switchbutton" OnClick="Button1_Click" />
                    </div>
                    <div style="width: 30%; float: left; margin-removed 9%; padding: 5%;">
                        <asp:Button ID="Button2" runat="server" Text="2" class="switchbutton" OnClick="Button2_Click" />
                    </div>
                    <div style="width: 30%; float: left; margin-removed 9%; padding: 5%;">
                        <asp:Button ID="Button3" runat="server" Text="3" class="switchbutton" OnClick="Button3_Click" />
                    </div>
                    <div style="width: 30%; float: left; margin-removed 9%; padding: 5%;">
                        <asp:Button ID="Button4" runat="server" Text="4" class="switchbutton" OnClick="Button4_Click" />
                    </div>
                    <div style="width: 30%; float: left; margin-removed 9%; padding: 5%;">
                        <asp:Button ID="Button5" runat="server" Text="5" class="switchbutton" OnClick="Button5_Click" />
                    </div>
                    <div style="width: 30%; float: left; margin-removed 9%; padding: 5%;">
                        <asp:Button ID="Button6" runat="server" Text="6" class="switchbutton" OnClick="Button6_Click" />
                    </div>
                    <div style="width: 30%; float: left; margin-removed 9%; padding: 5%;">
                        <asp:Button ID="Button7" runat="server" Text="7" class="switchbutton" OnClick="Button7_Click" />
                    </div>
                    <div style="width: 30%; float: left; margin-removed 9%; padding: 5%;">
                        <asp:Button ID="Button8" runat="server" Text="8" class="switchbutton" OnClick="Button8_Click" />
                    </div>
                    <div style="width: 30%; float: left; margin-removed 9%; padding: 5%;">
                        <asp:Button ID="Button9" runat="server" Text="9" class="switchbutton" OnClick="Button9_Click" />
                    </div>
                    <div style="width: 30%; float: left; margin-removed 9%; padding: 5%;">
                        <asp:Button ID="Button10" runat="server" Text="10" class="switchbutton" OnClick="Button10_Click" />
                    </div>
                </div>

Posted 24-Feb-16 20:03pm

Member 11360268

Updated 24-Feb-16 21:02pm

dan!sh

v3

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

*dan!sh* · Answer 1 · 2016-02-24T20:53:00

You will need to create the controls dynamically. You can create a user control with a Label and a RadioButtonList. Label can be used to display the question text and RadioButtonList for users can answer.

You may also use a save button so that user can submit the answer to that question. IMHO there should be a save button in the end of page rather than one save per question.

When the you get the questions from the database, create one control per question on the page.

By default the controls will have default color. When the user selects an option from the list, through javascript you can alter the color for the question.

Since you have mentioned viewing would also change color, I would assume you are making users click on something to view the question. IMHO, I would not have this. Why do want to make users click multiple times to see the question.