En digital adder

Digitalt utstyr - CPU

En CPU er en Central Prosessing Unit - den delene av en datamaskin som utfører logikk og beregninger.

Adder

En adder er en elektronisk krets som kan legge sammen to binærtall. Denne operasjonen utgjør en sentral del av oppgavene til en CPU. Vi skal lage en side som simulerer virkemåten til en del av en slik adder.

Inne i en CPU vil en elektronisk krets av transistorer utføre det arbeidet vi simulerer. For å få en rask krets brukes ofte andre metoder enn den vi simulerer.
I vår krets må vi vente på at carry (mente) skal sendes fra boks til boks. Dermed vil addisjon av 8bitpar ta 8 x tiden for å addere ett bit-par.

Skisse

Oppgave

Lag en webside med denne svg figuren inne i en div.

For å ta kopi av figuren: inspect - finn svg taggen, edit-as-html, ta kopi og paste inn i en div på sida di.

info

Du trenger oppdatert versjon av Minos.js for at kodene slik som {c1:=1+2} skal virke.
Sjekk også kortform for if for en forklaring på (aa && bb) ? 1 : 0.

Plassering av checkboxene

Lag denne strukturen i html

<div id="adder">

<div id="tegning">

<!-- lim inn svg taggen her -->

</div>

#first

</div>

Dette er diven #first:

<div id="first">

<div class="ia">{a?1:0} <input type="checkbox" id="a"></div>

<div class="ib">{b?1:0} <input type="checkbox" id="b"></div>

<div class="ic"> {c1:=(a&&b)?1:0}</div>

<div class="is"> {s1:=a!=b?1:0}</div>

</div>

Bruk css til å plassere checkboxene på rett plass.
De skal plasseres over den første boksen på utsiden av pilene/strekene med tilsvarende navn.

Sett position:relative for figur,
position:absolute for #first, .ia .ib .ic .is

Utvid til en 8-bit adder

Sjekk ut svg koden og se om du klarer å lage 8 slike figurer: (abcs)*8
Legg merke til at svg-koden bare definerer en figur, men to figurer vises.
Bruk samme metode til å legge til 6 ekstra bokser, plasser dem nedover (juster y).

Merk at du må utvide størrelsen på svg området - fra 400 til noe større.