第6回講座 - アスカ文明のWebプログラミング講座

皆様、新年明けましておめでとうございます。
今日は新年明けて一回目の講座になります。

皆さんはお正月どのように過ごされましたか？

わしはモチを喉に詰まらせ、あやうく逝くところじゃった。

<div class="wp-block-image"><figure class="aligncenter size-large is-resized"><img class="jijii" src="https://www.asukabunmei.com/program/wp-content/uploads/2021/11/chara_003-1024x1024.png" alt="" class="wp-image-270" width="633" height="633"/></figure></div>

<style>
img.jijii {
  opacity: 0.3;
}
</style>

ワタスハｽﾞｯﾄネテタワー

俺はツレと初詣行ったり、ゴロゴロしてたりかな・・

なるほど、皆さん正月ボケで今まで学んだ事を忘れている可能性がありそうですね。
新年一発目、気を引き締めて参りましょう。

そこで、今日は抜き打ちで今まで学んだ事を振り返り、抜き打ちテストを行いたいと思います。

！！！！

！！！！

！！！！

！！！！

！！！！

！！！！

早速いきます。

Webプログラミングを学ぶと、どんな良い事が起こりそうですか？

うーん、やっぱりぐろーばるな仕事ができるとかかのう・・

じじい+5pt！！

やっぱ仕事の幅が広がる事だと自分思います。

ピロシ+60pt！！

ﾔｯポリダンナヨリﾓカセゲルﾖｳﾆﾅﾙｺﾄカナー

オリビア+20pt！！

ワン！ワン！

ワン吉+90pt！！

<div class="target"></div>
<canvas id="myGraph"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>

<script>
const chartFunc1 = function() {
  const ctx = document.getElementById("myGraph");
  const myBarChart = new Chart(ctx, {
    type: 'bar',
    data: {
      datasets: [
        {
          label: 'じじい',
          data: [5],
          backgroundColor: "rgba(255,218,136,1)"
        },{
          label: 'ピロシ',
          data: [60],
          backgroundColor: "rgba(99,42,0,1)"
        },{
          label: 'オリビア',
          data: [20],
          backgroundColor: "rgba(255,250,49,1)"
        },{
          label: '小百合',
          data: [0],
          backgroundColor: "rgba(255,216,189,1)"
         },{
          label: 'マサタカ',
          data: [0],
          backgroundColor: "rgba(188,188,188,1)"
         },{
          label: 'ワン吉',
          data: [90],
          backgroundColor: "rgba(227,250,255,1)"
        }
      ]
    },
    options: {
      title: {
        display: true,
        text: '獲得ポイント'
      },
      scales: {
        yAxes: [{
          ticks: {
            suggestedMax: 100,
            suggestedMin: 0,
            stepSize: 10,
            callback: function(value, index, values){
              return  value +  'pt'
            }
          }
        }]
      },
    }
  });
}

let started = false;
let targets = document.querySelectorAll('.target');
window.addEventListener('scroll', function () {
  let scroll = window.scrollY;
  let windowHeight = window.innerHeight;
  for (let target of targets) {
    var targetPos = target.getBoundingClientRect().top + scroll;
    if (scroll > targetPos - windowHeight) {
      if(!started) {
        chartFunc1();
        started = true;
      }
    }
  }
});
</script>