A repository of simple CSS codes for styling Run BASIC applications




Displaying Links as Buttons using CSSID and CSSClass


' Proportions: Solve for X
' This demo doesn't loop to generate more than one equation
    Call setCSS
 
[Anew]
    n$(0) = Equation$()
    x$ = "X = "
    n$(1) = ""
    n$(2) = ""
 
[Display]
    Cls
    Div Banner
        Print "Solving Proportions"
    End Div
 
    Div Equation
        Print Word$(n$(0), 1, "=")
    End Div
 
    Div UserInput
        Print x$;n$(1)
        Print n$(2)
    End Div
 
    Div NumberTray
        Call TheButtons
    End Div
Wait
 
[nEnd]
    Cls
'    Call Banner
'    Call Goodbye
Wait
 
[nClear]
    n$(1) = ""
    n$(2) = ""
    Goto [Display]
Wait
 
[nCheck]
    cAns = Val(Word$(n$(0), 2, "="))
    uAns = Val(n$(1))
    If cAns = uAns Then
        n$(2) = "Correct"
    Else
        n$(2) = "Incorrect"
    End If
    Goto [Display]
Wait
 
[n0]
    n$(1) = n$(1);0
    Goto [Display]
 
[n1]
    n$(1) = n$(1);1
    Goto [Display]
 
[n2]
    n$(1) = n$(1);2
    Goto [Display]
 
[n3]
    n$(1) = n$(1);3
    Goto [Display]
 
[n4]
    n$(1) = n$(1);4
    Goto [Display]
 
[n5]
    n$(1) = n$(1);5
    Goto [Display]
 
[n6]
    n$(1) = n$(1);6
    Goto [Display]
 
[n7]
    n$(1) = n$(1);7
    Goto [Display]
 
[n8]
    n$(1) = n$(1);8
    Goto [Display]
 
[n9]
    n$(1) = n$(1);9
    Goto [Display]
Wait
 
Sub setCSS
    CSSID #Banner, "{
        Background-Color: Yellow;
        Font-Family: Verdana;
        Font-Size: 3em;
        Font-Weight: Bold;
        Text-Align: Center;
        Color: Black;
        Width: 498px;
        Padding: 20px 20px 20px 20px;
        Margin-Left: 50px;
        Border-Color: Blue;
        Border-Size: Thick;
        Border-Style: Ridge;
        Border-Bottom-Style: Dotted;
    }"
    CSSID #Equation, "{
        Background-Color: #FFFFC0;
        Font-Family: Verdana;
        Font-Size: 2.5em;
        Font-Weight: Bold;
        Text-Align: Center;
        Color: #C0C0C0;
        Width: 498px;
        Padding: 20px 20px 20px 20px;
        Margin-Left: 50px;
        Border-Color: Blue;
        Border-Size: Thick;
        Border-Style: Ridge;
        Border-Top: None;
        Border-Bottom-Style: Dotted;
    }"
    CSSID #UserInput, "{
        Background-Color: #FFC0C0;
        Font-Family: Verdana;
        Font-Size: 2.5em;
        Font-Weight: Bold;
        Text-Align: Left;
        Width: 390px;
        Padding: 20px 20px 20px 128px;
        Margin-Left: 50px;
        Border-Color: Blue;
        Border-Size: Thick;
        Border-Style: Ridge;
        Border-Top: None;
   }"
    CSSID #NumberTray, "{
        Background-Color: #C0C0C0;
        Width: 532px;
        Padding: 10px 3px 10px 3px;
        Margin-Left: 50px;
        Border-Color: Blue;
        Border-Size: Thick;
        Border-Style: Ridge;
    }"
    CSSClass "a.nButton", "{
        Text-Decoration: None;
        Font-Size: 18pt;
        Font-Weight: Bold;
        Width: 30px;
        Height: 30px;
        Display: Block;
        Background: #FFFFC0;
        Color: #C0C0C0;
        Margin-Right: 1px;
        Float: Left;
        Text-Align: Center;
        Border-Width: Thick;
        Border-Style: Outset;
        Border-Color: #C0C0C0;
    }"
    CSSClass "a.clButton", "{
        Text-Decoration: None;
        Font-Size: 18pt;
        Font-Weight: Bold;
        Width: 87px;
        Height: 30px;
        Display: Block;
        Background: #FFFFC0;
        Color: #C0C0C0;
        Margin-Right: 1px;
        Float: Left;
        Text-Align: Center;
        Border-Width: Thick;
        Border-Style: Outset;
        Border-Color: #C0C0C0;
    }"
    CSSClass "a.eButton", "{
        Text-Decoration: None;
        Font-Size: 18pt;
        Font-Weight: Bold;
        Width: 248px;
        Height: 30px;
        Display: Block;
        Background: #FFFFC0;
        Color: #C0C0C0;
        Margin-Top: 7px;
        Margin-Right: 7px;
        Float: Left;
        Text-Align: Center;
        Border-Width: Thick;
        Border-Style: Outset;
        Border-Color: #C0C0C0;
    }"
End Sub
 
Sub TheButtons
        Link #n0, "0", [n0]
        #n0 CSSClass("nButton")
        Link #n1, "1", [n1]
        #n1 CSSClass("nButton")
        Link #n2, "2", [n2]
        #n2 CSSClass("nButton")
        Link #n3, "3", [n3]
        #n3 CSSClass("nButton")
        Link #n4, "4", [n4]
        #n4 CSSClass("nButton")
        Link #n5, "5", [n5]
        #n5 CSSClass("nButton")
        Link #n6, "6", [n6]
        #n6 CSSClass("nButton")
        Link #n7, "7", [n7]
        #n7 CSSClass("nButton")
        Link #n8, "8", [n8]
        #n8 CSSClass("nButton")
        Link #n9, "9", [n9]
        #n9 CSSClass("nButton")
        Link #nClear, "Clear", [nClear]
        #nClear CSSClass("clButton")
        Link #nEnd, "End Program", [nEnd]
        #nEnd CSSClass("eButton")
        Link #nCheck, "Check Answer", [nCheck]
        #nCheck CSSClass("eButton")
End Sub
 
Function Equation$()
    x1 = Int(Rnd(1) * 10) + 1
    x3 = Int(Rnd(1) * 20) + 10
    x2 = x1 * x3
    If Int(Rnd(1) * 2) = 1 Then
        x = x1
        x1 = x2
        x2 = x
    End If
    x1$ = Str$(x1)
    x2$ = Str$(x2)
    m = Int(Rnd(1) * 80) + 10
    y1 = x1 * m
    y2 = x2 * m
    y1$ = Str$(y1)
    y2$ = Str$(y2)
    Select Case Int(Rnd(1) * 4) + 1
        Case 1
            ans$ = x1$
            x1$ = "X"
        Case 2
            ans$ = x2$
            x2$ = "X"
        Case 3
            ans$ = y1$
            y1$ = "X"
        Case 4
            ans$ = y2$
            y2$ = "X"
    End Select
    Equation$ = x1$;" : ";x2$;" :: ";y1$;" : ";y2$;"=";ans$
End Function