Um arbeiðsháttin

Vitanarfróðu – Scoped Hero/Navbar

Arbeiðshátturin

Soleiðis arbeiða tey Vitanarfróðu

Hvat undrar tykkum? Tað ber til at undrast á alt møguligt. Veljið ein spurning, sum tit kunnu brúka til at gera kanningar við. Nú hava tit ein spurdóm.
Hví er tað so? Hvat halda tit, at svarið er upp á tykkara spurdóm? Skrivið nøkur uppskot til møguligar frágreiðingar. Slík uppskot verða nevnd hypotesur.
Leggið eina ætlan Leggið til rættis, hvørjar kanningar tit vilja gera fyri at royna, um hypotesurnar passa ella ikki. Roynið gjarna fleiri kanningar fyri at fáa upplýsingar. Tit kunnu til dømis eygleiða, gera samrøður ella gera egnar royndir.
Savnið upplýsingar Savnið saman upplýsingar, sum hava samband við hypotesur tykkara. Bæði slíkar, sum benda á, at hypotesurnar passa, og tær, sum benda á tað øvuta. Minnist til at skjalprógva tað, sum tit gera, ávegis.
Hetta eru vit komin fram til Takið samanum hvørji úrslit, tit eru komin fram til. Hvørjar hypotesur passa, og hvørjar passa ikki. Hvussu kunnu tit nú svara spurdóminum, sum tit byrjaðu við?
Sigið øðrum frá Skrivið eina frágreiðing, sum vísir, hvat tit hava gjørt, og hvørji úrslit, tit eru komin fram til. Tað er týdningarmikið, at granskarar siga øðrum frá tí, teir eru komnir fram til.

Tak arbeiðsháttin niður sum plakat her.

Tekna eina ætlan

(GG: Virkar ikki við telefon!)

Enhanced Paint App

Paint App Code Viewer

Stempulteknarin

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Enhanced Paint App</title><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /><style>
    /* Scoped styles to #my-paint-app container */
    #my-paint-app * { box-sizing: border-box; margin: 0; padding: 0; }
    #my-paint-app html, #my-paint-app body { height: 100%; overflow: hidden; }
    #my-paint-app { display: flex; flex-direction: column; height: 100%; background: #333; font-family: sans-serif; }
    #my-paint-app #toolbar { background: #444; padding: 6px 8px; display: flex; align-items: center; gap: 6px; color: #eee; }
    #my-paint-app .tool { background: #3a3a3a; border: none; color: #eee; padding: 6px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
    #my-paint-app .tool.active { background: #0078d4; }
    #my-paint-app #toolbar label { display: flex; align-items: center; gap: 4px; }
    #my-paint-app #toolbar input[type=color], #my-paint-app #toolbar input[type=range] { margin-left: 4px; }
    #my-paint-app #main { flex: 1; display: flex; justify-content: center; align-items: center; background: #555; }
    #my-paint-app #artboard { position: relative; width: 80%; height: 80%; max-width: 1000px; max-height: 600px; background: #fff; border: 2px dashed #0078d4; box-shadow: 0 0 0 4px rgba(0,0,0,0.2); }
    #my-paint-app canvas { width: 100%; height: 100%; display: block; }
  </style></head><body><div id="my-paint-app"><div id="toolbar"><button id="penBtn" class="tool active" title="Blýantur"><span class="material-icons">edit</span></button><button id="sprayBtn" class="tool" title="Spray"><span class="material-icons">blur_on</span></button><button id="eraserBtn" class="tool" title="Viskileður"><span class="material-icons">cleaning_services</span></button><button id="rectBtn" class="tool" title="Fýrakantur">▭</button><button id="circleBtn" class="tool" title="Rundingur">◯</button><button id="ellipseBtn" class="tool" title="Ovalur">⬭</button><button id="triangleBtn" class="tool" title="Tríkantur">▵</button><button id="starBtn" class="tool" title="Stjørna">★</button><button id="textBtn" class="tool" title="Skriva"><span class="material-icons">text_fields</span></button><button id="imageBtn" class="tool" title="Set mynd inn"><span class="material-icons">image</span></button><input type="file" id="imageInput" accept="image/*" style="display:none;" /><button id="clearBtn" class="tool" title="Strika alt">Strika alt</button><button id="saveBtn" class="tool" title="Save PNG"><span class="material-icons">save_alt</span></button><label>Litur: <input type="color" id="colorPicker" value="#000000" /></label><label>Stødd: <input type="range" id="sizePicker" min="1" max="50" value="5" /></label></div><div id="main"><div id="artboard"><canvas id="paintCanvas"></canvas></div></div></div><script>
    (function() {
      const canvasEl = document.querySelector('#my-paint-app #paintCanvas');
      const ctx = canvasEl.getContext('2d');
      const artboard = document.querySelector('#my-paint-app #artboard');
      const imageInput = document.querySelector('#my-paint-app #imageInput');
      let currentTool = 'pen';
      let imgObj = null;

      function resizeCanvas() {
        const rect = artboard.getBoundingClientRect();
        canvasEl.width = rect.width;
        canvasEl.height = rect.height;
        ctx.fillStyle = '#ffffff'; ctx.fillRect(0, 0, canvasEl.width, canvasEl.height);
      }
      window.addEventListener('resize', resizeCanvas);
      resizeCanvas();

      let drawing = false;
      const colorPicker = document.querySelector('#my-paint-app #colorPicker');
      const sizePicker = document.querySelector('#my-paint-app #sizePicker');

      canvasEl.addEventListener('mousedown', e => {
        const x = e.offsetX, y = e.offsetY;
        switch (currentTool) {
          case 'image': if (imgObj) ctx.drawImage(imgObj, x - imgObj.width/2, y - imgObj.height/2); break;
          case 'text': const text = prompt('Skriva her:'); if (text) { ctx.fillStyle = colorPicker.value; ctx.font = `${sizePicker.value*2}px Comic Sans MS`; ctx.textAlign = 'center'; ctx.fillText(text,x,y); } break;
          case 'rectangle': ctx.strokeStyle=colorPicker.value; ctx.lineWidth=sizePicker.value; ctx.strokeRect(x-50,y-30,100,60); break;
          case 'circle': ctx.strokeStyle=colorPicker.value; ctx.lineWidth=sizePicker.value; ctx.beginPath(); ctx.arc(x,y,40,0,2*Math.PI); ctx.stroke(); break;
          case 'ellipse': ctx.strokeStyle=colorPicker.value; ctx.lineWidth=sizePicker.value; ctx.beginPath(); ctx.ellipse(x,y,60,30,0,0,2*Math.PI); ctx.stroke(); break;
          case 'triangle': ctx.strokeStyle=colorPicker.value; ctx.lineWidth=sizePicker.value; ctx.beginPath(); ctx.moveTo(x,y-40); ctx.lineTo(x-35,y+20); ctx.lineTo(x+35,y+20); ctx.closePath(); ctx.stroke(); break;
          case 'star': ctx.strokeStyle=colorPicker.value; ctx.lineWidth=sizePicker.value; ctx.beginPath(); for(let i=0;i<10;i++){ const r=(i%2===0?30:15); const a=-Math.PI/2+i*(2*Math.PI/10); const xP=x+r*Math.cos(a), yP=y+r*Math.sin(a); i===0?ctx.moveTo(xP,yP):ctx.lineTo(xP,yP);} ctx.closePath(); ctx.stroke(); break;
          case 'pen': case 'spray': case 'eraser': drawing=true; ctx.beginPath(); ctx.moveTo(x,y); break;
        }
      });
      canvasEl.addEventListener('mousemove', e => {
        if(!drawing) return; const x=e.offsetX,y=e.offsetY; ctx.lineCap='round';
        if(currentTool==='pen'){ ctx.strokeStyle=colorPicker.value; ctx.lineWidth=sizePicker.value; ctx.lineTo(x,y); ctx.stroke(); }
        else if(currentTool==='eraser'){ ctx.clearRect(x-sizePicker.value/2,y-sizePicker.value/2,sizePicker.value,sizePicker.value);} 
        else if(currentTool==='spray'){ ctx.fillStyle=colorPicker.value; for(let i=0;i<20;i++){ const dx=(Math.random()-0.5)*sizePicker.value, dy=(Math.random()-0.5)*sizePicker.value; ctx.fillRect(x+dx,y+dy,1,1);} }
      });
      window.addEventListener('mouseup',()=>{drawing=false;});
      const setTool=(tool)=>{currentTool=tool; document.querySelectorAll('#my-paint-app .tool').forEach(b=>b.classList.toggle('active',b.id===tool+'Btn'));};
      setTool('pen');
      document.getElementById('penBtn').onclick=()=>setTool('pen');
      document.getElementById('sprayBtn').onclick=()=>setTool('spray');
      document.getElementById('eraserBtn').onclick=()=>setTool('eraser');
      document.getElementById('rectBtn').onclick=()=>setTool('rectangle');
      document.getElementById('circleBtn').onclick=()=>setTool('circle');
      document.getElementById('ellipseBtn').onclick=()=>setTool('ellipse');
      document.getElementById('triangleBtn').onclick=()=>setTool('triangle');
      document.getElementById('starBtn').onclick=()=>setTool('star');
      document.getElementById('textBtn').onclick=()=>setTool('text');
      document.getElementById('imageBtn').onclick=()=>imageInput.click();
      imageInput.onchange=e=>{const file=e.target.files[0]; if(!file)return; const img=new Image(); img.onload=()=>imgObj=img; img.src=URL.createObjectURL(file);};
      document.getElementById('clearBtn').onclick=()=>{ctx.fillStyle='#ffffff';ctx.fillRect(0,0,canvasEl.width,canvasEl.height);};;
      document.getElementById('saveBtn').onclick=()=>{
        const data=ctx.getImageData(0,0,canvasEl.width,canvasEl.height);
        ctx.fillStyle='#000'; ctx.font='48px Comic Sans MS'; ctx.textAlign='center'; ctx.fillText('Vitanarfróðu',canvasEl.width/2,60);
        ctx.font='24px Comic Sans MS'; ctx.fillText('Her er okkara ætlan:',canvasEl.width/2,100);
        const link=document.createElement('a'); link.download='drawing.png'; link.href=canvasEl.toDataURL('image/png'); link.click();
        ctx.putImageData(data,0,0);
      };
    })();
  </script>

Kanna kotuna

Dámar tær vitan?

Arbeiðshátturin