Programmieren lernen

/************************\
|* HTML5-LÖSUNG (Canvas) |
\************************/

document.write(`
  <p><input id="num" type="number" min="0" max="9999" value="0" onchange="drawCist()"></p>
  <p><canvas id="cist" width="200" height="300"></canvas></p>
  <p> <!-- BEISPIELE -->
    <button onclick="set(0)">0</button>
    <button onclick="set(1)">1</button>
    <button onclick="set(20)">20</button>
    <button onclick="set(300)">300</button>
    <button onclick="set(4000)">4000</button>
    <button onclick="set(5555)">5555</button>
    <button onclick="set(6789)">6789</button>
    <button onclick="set(Math.floor(Math.random()*1e4))">Zufi!</button>
  </p>
`);

const SW = 10; // strichbreite
let canvas = document.getElementById('cist'),
    cx = canvas.getContext('2d');

// zeichnet die beispiele (via buttons)
function set(num) {
  document.getElementById('num').value = num;
  drawCist();
}

function drawCist() {
  // canvas resetten
  cx.clearRect(0, 0, canvas.width, canvas.height);
  cx.lineWidth = SW;
  cx.beginPath();
  cx.moveTo(100, 0+.5 * SW);
  cx.lineTo(100, 300-.5 * SW);
  cx.stroke();

  let num = document.getElementById('num').value.padStart(4, '0');

  /***********************\
  |        PUNKTE:        |
  | ********************* |
  |                       |
  |     a --- b --- c     |
  |     |     |     |     |
  |     d --- e --- f     |
  |     |     |     |     |
  |     g --- h --- i     |
  |     |     |     |     |
  |     j --- k --- l     |
  |                       |
  \***********************/

  // striche definieren
  // (abhängig von der strichbreite)
  let
  a = [0+SW,   0+SW],   b = [100,   0+SW],   c = [200-SW,   0+SW],
  d = [0+SW,    100],   e = [100,    100],   f = [200-SW,    100],
  g = [0+SW,    200],   h = [100,    200],   i = [200-SW,    200],
  j = [0+SW, 300-SW],   k = [100, 300-SW],   l = [200-SW, 300-SW];

  // strichführung
  function draw() {
    let x = 1;
    cx.beginPath();
    cx.moveTo(arguments[0][0], arguments[0][1]);
    while (x < arguments.length) {
      cx.lineTo(arguments[x][0], arguments[x][1]);
      x++;
    }
    cx.stroke();
  }

  // 1000er
  switch (num[0]) {
    case '1': draw(j, k);       break;       case '2': draw(g, h);    break;
    case '3': draw(g, k);       break;       case '4': draw(j, h);    break;
    case '5': draw(k, j, h);    break;       case '6': draw(g, j);    break;
    case '7': draw(g, j, k);    break;       case '8': draw(j, g, h); break;
    case '9': draw(h, g, j, k); break;
  }
  // 100er
  switch (num[1]) {
    case '1': draw(k, l);       break;       case '2': draw(h, i);    break;
    case '3': draw(k, i);       break;       case '4': draw(h, l);    break;
    case '5': draw(h, l, k);    break;       case '6': draw(i, l);    break;
    case '7': draw(k, l, i);    break;       case '8': draw(h, i, l); break;
    case '9': draw(h, i, l, k); break;
  }
  // 10er
  switch (num[2]) {
    case '1': draw(a, b);       break;       case '2': draw(d, e);    break;
    case '3': draw(d, b);       break;       case '4': draw(a, e);    break;
    case '5': draw(b, a, e);    break;       case '6': draw(a, d);    break;
    case '7': draw(d, a, b);    break;       case '8': draw(a, d, e); break;
    case '9': draw(b, a, d, e); break;
  }
  // einer
  switch (num[3]) {
    case '1': draw(b, c);       break;       case '2': draw(e, f);    break;
    case '3': draw(b, f);       break;       case '4': draw(e, c);    break;
    case '5': draw(b, c, e);    break;       case '6': draw(c, f);    break;
    case '7': draw(b, c, f);    break;       case '8': draw(e, f, c); break;
    case '9': draw(b, c, f, e); break;
  }
}

                

Lösung von: Lisa Salander (Heidi-Klum-Gymnasium Bottrop)

' VBA-Funktion für Excel

Sub Main()
    Dim s As String
    Dim n As Integer
    ClearNum
    [B:C].ColumnWidth = 5.5
    [2:4].RowHeight = 29.25
    s = Application.InputBox("Bitte Zahl zwischen 0 und 9999 eingeben: ", "Cistercian2Decimal")
    If s = "" Then
        Exit Sub
    Else
        n = CInt(s)
        If n < 0 Or n > 9999 Then n = 0
    End If
    NewNum [B3], n
End Sub

Sub Draw(ByVal rng As Range, ByVal bi As XlBordersIndex)
    Application.ScreenUpdating = False
    With rng.Borders(bi)
        .LineStyle = xlContinuous
        .ColorIndex = 1             'black
        .Weight = xlThick
    End With
    Application.ScreenUpdating = True
End Sub

Sub NewNum(rng As Range, ByVal num As Integer)
    'declare fields
    Dim f_top As Range, f_mid As Range, f_bot As Range
    Dim f_1 As Range, f_10 As Range, f_100 As Range, f_1000 As Range
    
    'declare field lines
    Dim t As XlBordersIndex, b As XlBordersIndex, r As XlBordersIndex
    Dim l As XlBordersIndex, d As XlBordersIndex, u As XlBordersIndex
    
    'set fields for vertical line
    Set f_top = rng.Offset(-1)
    Set f_mid = rng
    Set f_bot = rng.Offset(1)
    
    'set quadrants
    Set f_1 = rng.Offset(-1, 1)     'top right
    Set f_10 = f_top                'top left
    Set f_100 = rng.Offset(1, 1)    'bottom right
    Set f_1000 = f_bot              'bottom left
    
    'set field lines
    t = xlEdgeTop: b = xlEdgeBottom
    r = xlEdgeRight: l = xlEdgeLeft
    d = xlDiagonalDown: u = xlDiagonalUp
    
    'draw vertical line
    Draw f_top, r
    Draw f_mid, r
    Draw f_bot, r
    
    'draw ones digit
    Select Case num Mod 10
        Case 1: Draw f_1, t
        Case 2: Draw f_1, b
        Case 3: Draw f_1, d
        Case 4: Draw f_1, u
        Case 5: Draw f_1, t: Draw f_1, u
        Case 6: Draw f_1, r
        Case 7: Draw f_1, t: Draw f_1, r
        Case 8: Draw f_1, b: Draw f_1, r
        Case 9: Draw f_1, t: Draw f_1, b: Draw f_1, r
    End Select
    
    'draw tens digit
    Select Case num \ 10 Mod 10
        Case 1: Draw f_10, t
        Case 2: Draw f_10, b
        Case 3: Draw f_10, u
        Case 4: Draw f_10, d
        Case 5: Draw f_10, t: Draw f_10, d
        Case 6: Draw f_10, l
        Case 7: Draw f_10, t: Draw f_10, l
        Case 8: Draw f_10, b: Draw f_10, l
        Case 9: Draw f_10, t: Draw f_10, b: Draw f_10, l
    End Select
    
    'draw hundreds digit
    Select Case num \ 100 Mod 10
        Case 1: Draw f_100, b
        Case 2: Draw f_100, t
        Case 3: Draw f_100, u
        Case 4: Draw f_100, d
        Case 5: Draw f_100, b: Draw f_100, d
        Case 6: Draw f_100, r
        Case 7: Draw f_100, b: Draw f_100, r
        Case 8: Draw f_100, t: Draw f_100, r
        Case 9: Draw f_100, t: Draw f_100, b: Draw f_100, r
    End Select
    
    'draw thousends digit
    Select Case num \ 1000 Mod 10
        Case 1: Draw f_1000, b
        Case 2: Draw f_1000, t
        Case 3: Draw f_1000, d
        Case 4: Draw f_1000, u
        Case 5: Draw f_1000, b: Draw f_1000, u
        Case 6: Draw f_1000, l
        Case 7: Draw f_1000, b: Draw f_1000, l
        Case 8: Draw f_1000, t: Draw f_1000, l
        Case 9: Draw f_1000, t: Draw f_1000, b: Draw f_1000, l
    End Select
End Sub

Sub ClearNum()
    Dim lsn As XlLineStyle
    lsn = XlLineStyle.xlLineStyleNone
    With Cells
        .Borders.LineStyle = lsn
        .Borders(xlDiagonalUp).LineStyle = lsn
        .Borders(xlDiagonalDown).LineStyle = lsn
    End With
End Sub

                

Lösung von: Jens Kelm (@JKooP)