Adding a space between images in a For Loop

[Spyd3r0us]

I have a program that shows randomized dice based on a number entered by a user. I have the for loop running that creates the number of dice based on the number entered and shows them in a panel. My problem is that when the dice appear in the page there are no spaces between them. I was wondering how to add the space in the for loop? I am trying a nbsp but not sure where to put it.

Here is the for loop code

Protected Sub makeImages()
        For i As Integer = 0 To txtNumber.Text - 1
            Dim img As New Image
            img.ID = Int(6 * Rnd()) + 1
            img.ImageUrl = "Images/" & img.ID & ".jpg"
            img.BorderStyle = BorderStyle.Solid
            img.BorderWidth = 1
            PlaceDice.Controls.Add(img)
            lblMemory.Text = lblMemory.Text & img.ID.ToString
        Next
    End Sub

 

[Paszt]

You mention nbsp, is this WinForm or WebForm? What is the control named PlaceDice?
-Turn on Option Strict
-Since you use the Image.ID property, I figure you are designing a WebForm; the ID property isn't meant to be used in the way you're using it. The ID should be unique and with your code there is the possibility to create a duplicate ID.
-you could try a literal control for the space, or better, css styles applied to the images giving them a margin.

 

[Spyd3r0us]

This is a WebForm. I am taking a Visual Basic 101 Class so this doesn't need to be anything advanced. Basically the web form is supposed to do the following:
1. Pick a number and when the button is clicked it will dynamically create the dice images randomly. So If they select 8 then 8 random dice images will appear.
2. The user needs to remember the faces of all the dice and click on the hide button which hide the dice
3. They enter all the dice numbers and then it checks to make sure it matches.


Here is all the code that I have and currently it is working all i would like to do is put a space in between the images in the FOR loop.

default.aspx.vb:

Partial Class _Default
    Inherits System.Web.UI.Page

    'TODO:
    '1. Keep Track of Wrong Answers
    '2. Space images in for loop
    '3. Fix IF textbox empty loop


    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        'Sets the focus on the text box (txtNumber) when the page loads
        txtNumber.Focus()
    End Sub

    Protected Sub makeImages()
        'Creates the images for the randomized dice, sets the properties, places the images in the Place Dice section
        For i As Integer = 0 To txtNumber.Text - 1
            Dim img As New Image
            img.ID = Int(6 * Rnd()) + 1
            img.ImageUrl = "Images/" & img.ID & ".jpg"
            img.BorderStyle = BorderStyle.Solid
            img.BorderWidth = 1
            PlaceDice.Controls.Add(img)

            'Places the randomized numbers in a label to confim the correct answer
            lblMemory.Text = lblMemory.Text & img.ID.ToString
        Next
    End Sub

    Protected Sub btnShowDice_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnShowDice.Click
        If txtNumber.Text = 0 Then
            lblCorrect.Text = "Please Enter A Number From 1 To 6"
            'ElseIf txtNumber.Text = String.Empty Then
            '    lblCorrect.Text = "Please Enter A Number From 1 To 6"
        Else
            'Hides the Dice Panel, shows the Start Panel, and hides the button
            PnlDice.Visible = True
            PnlStart.Visible = False
            btnHideDice.Visible = True
            makeImages()
        End If
    End Sub

    Protected Sub btnHideDice_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnHideDice.Click
        'Starts the removal of the dice images when the button is clicked
        Dim cCount As Integer = PnlDice.Controls.Count
        For i As Integer = cCount - 1 To 0 Step -1
            PnlDice.Controls.RemoveAt(i)
        Next

        'Shows the End Panel, clears the text box, sets the focus in the text box and hides the button
        PnlEnd.Visible = True
        txtAnswer.Text = String.Empty
        txtAnswer.Focus()
        btnHideDice.Visible = False

    End Sub

    Protected Sub btnCheckAns_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnCheckAns.Click
        'Hides the Dice Panel and the button
        PnlDice.Visible = False
        btnHideDice.Visible = False

        'An IF statement that determines if the answer the user entered is correct or wrong
        If txtAnswer.Text = lblMemory.Text Then
            lblCorrect.Text = "That Is Correct!"
            PnlEnd.Visible = False
            PnlStart.Visible = True
            txtNumber.Text = String.Empty
            txtNumber.Focus()
        Else
            lblWrong.Text = "Error!! Does Not Compute! Please Try Again"
            txtAnswer.Text = String.Empty
            txtAnswer.Focus()
        End If
    End Sub

End Class

default.aspx:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="CIS622_BrianDragun_Wk4.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        
        <br />
    <br />
        <asp:Panel ID="PnlStart" runat="server">
            <asp:TextBox ID="txtNumber" runat="server"></asp:TextBox>
            <asp:Button ID="btnShowDice" runat="server" Text="Show Dice" />
            <br />
            <asp:Label ID="lblCorrect" runat="server"></asp:Label>
        </asp:Panel>
        <asp:Panel ID="PnlDice" runat="server" Visible="False">
           <div id="PlaceDice" runat="server"></div>
            <asp:Button ID="btnHideDice" runat="server" Text="Hide Dice" />
            <br />
        </asp:Panel>
        <asp:Panel ID="PnlEnd" runat="server" Visible="False">
            <asp:TextBox ID="txtAnswer" runat="server"></asp:TextBox>
            <asp:Button ID="btnCheckAns" runat="server" Text="Check Answer" />
            <br />
            <asp:Label ID="lblWrong" runat="server"></asp:Label>
            <br />
            <br />
            <asp:Label ID="lblMemory" runat="server"></asp:Label>
        </asp:Panel>
    <br />
    
    </div>
    </form>
</body>
</html>

 

[Paszt]

It's always strange when I respond to a question and it appears that the one who posed the question doesn't read my response, or at least doesn't acknowledge even one point in the given response. If someone had taken the time to respond as I did, I think I would have at least looked up css styles. Oh well,...

Change your head section to this:

<head id="Head1" runat="server">
    <title>Memory Dice Game</title>
    <style type="text/css">
        #PlaceDice img{Border: 1px solid; margin:10px;}
    </style>
</head>

Using this css style will give all image controls in the div with an ID of 'PlaceDice" a solid, 1 pixel border, and a margin of 10 pixels around the image. This will also enable you to remove the two lines in your MakeImages method where you set the BroderStyle & BorderWidth properties as the css style already sets those properties.