Merge pull request reina314#6 from reina314/dev

Dev

Author: reina314

app/lecture/src/components/Code.vue

@@ -1,26 +1,57 @@
+<script setup>
+    const props = defineProps({
+        unique_id: {
+            type: String,
+            default: '',
+        },
+        language: {
+            type: String,
+            default: '',
+        },
+        content: {
+            type: String,
+            default: '',
+        },
+    })
+
+    $(document).ready(function() {
+        $('#success-icon-' + props.unique_id).hide();
+
+        $("#btn-" + props.unique_id).click(() => {
+            if (navigator.clipboard) {
+                return navigator.clipboard.writeText(props.content).then(() => {
+                    $("#default-icon-" + props.unique_id).hide();
+                    $("#success-icon-" + props.unique_id).show();
+
+                    $("#success-icon-" + props.unique_id).fadeOut(2000, function() {
+                        $("#default-icon-" + props.unique_id).show();
+                    });
+                })
+            } else {
+                alert("Your browser does not support clipboard-copy!");
+            }
+        })
+    })
+</script>
+
 <template>
     <div class="py-3">
         <div class="container bg-black-800 border border-green-600 rounded my-3 px-3 py-3">
-            <p class="-mt-2 text-sm">bash</p>
-            <div id="text" class="relative px-3 rounded bg-white text-black">
-                user@Ri-one ~ $ <slot></slot>
-                <button data-copy-to-clipboard-target="npm-install-copy-button" data-tooltip-target="tooltip-copy-npm-install-copy-button" class="absolute end-2 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg p-2 inline-flex items-center justify-center">
-                    <span id="default-icon">
+            <p class="-mt-2 text-sm">{{ language }}</p>
+            <div id="text" class="break-all relative px-3 py-2 rounded bg-white text-black">
+                <slot></slot>
+                <button :id="'btn-' + unique_id" class="absolute end-2 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg p-2 inline-flex items-center justify-center">
+                    <span :id="'default-icon-' + unique_id">
                         <svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
                             <path d="M16 1h-3.278A1.992 1.992 0 0 0 11 0H7a1.993 1.993 0 0 0-1.722 1H2a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2Zm-3 14H5a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0-4H5a1 1 0 0 1 0-2h8a1 1 0 1 1 0 2Zm0-5H5a1 1 0 0 1 0-2h2V2h4v2h2a1 1 0 1 1 0 2Z"/>
                         </svg>
                     </span>
-                    <span id="success-icon" class="hidden inline-flex items-center">
+                    <span :id="'success-icon-' + unique_id" class="inline-flex items-center">
                         <svg class="w-3.5 h-3.5 text-blue-700 dark:text-blue-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
                             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5.917 5.724 10.5 15 1.5"/>
                         </svg>
                     </span>
                 </button>
-                <div id="tooltip-copy-npm-install-copy-button" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
-                    <span id="default-tooltip-message">Copy to clipboard</span>
-                    <span id="success-tooltip-message" class="hidden">Copied!</span>
-                    <div class="tooltip-arrow" data-popper-arrow></div>
-                </div>
             </div>
         </div>
     </div>

app/lecture/src/components/Hint.vue

@@ -1,13 +1,16 @@
 <script setup>
     const props = defineProps({
-        level: String
+        unique_id: {
+            type: String,
+            default: '',
+        },
     })
 
     $(document).ready(function() {
         $('div.hint').hide();
 
         // When a hint button clicked
-        $('#hint-' + props.level + '-btn').click(function() {
+        $('#hint-' + props.unique_id + '-btn').click(function() {
             var button = $(this)
             var targetValue = button.attr('target');
 
@@ -23,8 +26,8 @@
 
 <template>
     <div class="mx-5">
-        <button :id="'hint-' + level + '-btn'" class="rounded p-1 bg-green-700 hover:bg-green-600" :target="'#hint-' + level">ヒントを見る</button>
-        <div :id="'hint-' + level" class="hint">
+        <button :id="'hint-' + unique_id + '-btn'" class="rounded p-1 bg-green-700 hover:bg-green-600" :target="'#hint-' + unique_id">ヒントを見る</button>
+        <div :id="'hint-' + unique_id" class="hint">
             <p>Hint: <slot></slot></p>
         </div>
     </div>

app/lecture/src/components/ProgressFooter.vue

@@ -1,6 +1,9 @@
 <script setup>
     defineProps({
-        progress: Number
+        progress: {
+            type: Number,
+            default: 0,
+        },
     })
 </script>
 

app/lecture/src/components/Title.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="container mx-auto my-16">
-        <div class="mx-16 text-start">
+        <div class="mx-auto sm:mx-5 md:mx-16 text-start">
             <RouterLink class="p-2 rounded-md bg-green-700 hover:bg-green-600" :to="{ path: '/lecture/top' }">←トップへ戻る</RouterLink>
         </div>
-        <h1 class="text-4xl"><slot></slot></h1>
+        <h1 class="text-4xl mt-3"><slot></slot></h1>
     </div>
 </template>

app/lecture/src/views/Answer.vue

@@ -45,7 +45,7 @@
 <template>
     <Title>演習問題 解答・解説</Title>
 
-    <div class="container w-3/6 mx-auto mb-10 text-start">
+    <div class="container w-full sm:w-5/6 md:w-4/6 mx-auto mb-10 text-start">
         <div class="flex-col mx-auto mb-12 border rounded-lg border-green-600 p-3.5">
             <span class="text-2xl ml-2">目次</span><br>
                 <ul class="ml-5 mt-3">
@@ -61,7 +61,7 @@
         </Paragraph>
         <Paragraph>
             <SubHeader class="mb-3">[<span class="text-green-600 font-bold">Easy</span>] 入力される名前を、"Your name is XXX."のように出力するプログラムを書け。</SubHeader>
-            <Hint level="1_easy"><span class="text-yellow-400">input()</span>関数を使うと、入力された文字列を取得できる。</Hint>
+            <Hint unique_id="1_easy"><span class="text-yellow-400">input()</span>関数を使うと、入力された文字列を取得できる。</Hint>
 
             <PyScript>
                 name = input()
@@ -74,7 +74,7 @@
 
         <Paragraph>
             <SubHeader class="mb-3">[<span class="text-yellow-400 font-bold">Medium</span>] 入力される2数(num1, num2)の平均を求めるプログラムを書け。</SubHeader>
-            <Hint level="1_med1">input()関数から返されるデータは、<span class="text-yellow-400">str</span>型であることに注意しよう。</Hint>
+            <Hint unique_id="1_med1">input()関数から返されるデータは、<span class="text-yellow-400">str</span>型であることに注意しよう。</Hint>
 
             <PyScript>
                 num1 = input()
@@ -88,7 +88,7 @@
 
         <Paragraph>
             <SubHeader class="mb-3">[<span class="text-yellow-400 font-bold">Medium</span>] 次のプログラムの誤りを指摘し、修正せよ。</SubHeader>
-            <Hint level="1_med2">プログラムは、括弧の内側から順に評価される。</Hint>
+            <Hint unique_id="1_med2">プログラムは、括弧の内側から順に評価される。</Hint>
 
             <PyScript>
                 a = input()         # aに任意の数を代入
@@ -104,7 +104,7 @@
 
         <Paragraph>
             <SubHeader class="mb-3">[<span class="text-red-500 font-bold">Hard</span>] 1番目の整数(num1)から2番目の整数(num2)を引いた結果を出力するプログラムを書け。ただし、算術演算子のうち使えるのは + のみとする。</SubHeader>
-            <Hint level="1_hard"><span class="text-yellow-400">ビット演算</span>について調べてみよう。</Hint>
+            <Hint unique_id="1_hard"><span class="text-yellow-400">ビット演算</span>について調べてみよう。</Hint>
 
             <PyScript>
                 num1: int = 10
@@ -124,7 +124,7 @@
         </Paragraph>
         <Paragraph>
             <SubHeader class="mb-3">[<span class="text-green-600 font-bold">Easy</span>] 1以上x未満の範囲に含まれる奇数の総和を求めるプログラムを書け。</SubHeader>
-            <Hint level="2_easy1"><span class="text-yellow-400">range()</span>関数を使うと、list型(厳密にはrange型)の数列を取得できる。</Hint>
+            <Hint unique_id="2_easy1"><span class="text-yellow-400">range()</span>関数を使うと、list型(厳密にはrange型)の数列を取得できる。</Hint>
 
             <PyScript>
                 x: int = 100
@@ -144,7 +144,7 @@
 
         <Paragraph>
             <SubHeader class="mb-3">[<span class="text-green-600 font-bold">Easy</span>] 次のプログラムのエラーの原因を特定し、修正せよ。</SubHeader>
-            <Hint level="2_easy2">宣言されていない変数は呼び出せない。</Hint>
+            <Hint unique_id="2_easy2">宣言されていない変数は呼び出せない。</Hint>
 
             <PyScript>
                 sum = 0
@@ -166,7 +166,7 @@
 
         <Paragraph>
             <SubHeader class="mb-3">[<span class="text-yellow-400 font-bold">Medium</span>] 入力された自然数に対して、適切な序数を出力するプログラムを書け。例えば、1が入力された時に"1st"を返すこと。</SubHeader>
-            <Hint level="2_med">1の位の数に応じて条件分岐させること。ただし、例外がいくつか存在するので注意せよ。</Hint>
+            <Hint unique_id="2_med">1の位の数に応じて条件分岐させること。ただし、例外がいくつか存在するので注意せよ。</Hint>
 
             <PyScript>
                 num = int(input())
@@ -189,7 +189,7 @@
 
         <Paragraph>
             <SubHeader class="mb-3">[<span class="text-red-500 font-bold">Hard</span>] 任意の実数x(rad)に対して、sin(x)の値を出力するプログラムを書け。ただし、必要な計算精度は10桁程度とし、以下のpiの値を利用しても良いものとする。</SubHeader>
-            <Hint level="2_hard">関数の周期性を利用することで効率的なコードが書ける。</Hint>
+            <Hint unique_id="2_hard">関数の周期性を利用することで効率的なコードが書ける。</Hint>
 
             <PyScript>
                 pi: float = 3.14159265359
@@ -225,7 +225,7 @@
         </Paragraph>
         <Paragraph>
             <SubHeader class="mb-3">[<span class="text-green-600 font-bold">Easy</span>] 次のデータを正規化せよ。</SubHeader>
-            <Hint level="3_easy">グレイスケール(8bit)ですね。</Hint>
+            <Hint unique_id="3_easy">グレイスケール(8bit)ですね。</Hint>
 
             <PyScript>
                 data = [
@@ -267,7 +267,7 @@
 
         <Paragraph>
             <SubHeader class="mb-3">[<span class="text-yellow-400 font-bold">Medium</span>] 次のデータを昇順(ascending order)に並べ替えよ。ただし、バブルソートを使うこと。</SubHeader>
-            <Hint level="3_med1">各データが泡のように浮かび上がってきます。</Hint>
+            <Hint unique_id="3_med1">各データが泡のように浮かび上がってきます。</Hint>
 
             <PyScript>
                 data = [5, 9, 3, 6, 2, 1, 4, 7, 8, 0]
@@ -291,7 +291,7 @@
 
         <Paragraph>
             <SubHeader class="mb-3">[<span class="text-yellow-400 font-bold">Medium</span>] 行列Aと行列Bの積を求めよ。</SubHeader>
-            <Hint level="3_med2">定義通りに計算しよう。(※手計算しないでね)</Hint>
+            <Hint unique_id="3_med2">定義通りに計算しよう。(※手計算しないでね)</Hint>
 
             <PyScript>
                 A = [
@@ -329,7 +329,7 @@
 
         <Paragraph>
             <SubHeader class="mb-3">[<span class="text-yellow-400 font-bold">Medium</span>] データAとデータBの相関係数を求めよ。</SubHeader>
-            <Hint level="3_med3">平方根は、<span class="text-yellow-400">math.sqrt()</span>関数で計算できる。</Hint>
+            <Hint unique_id="3_med3">平方根は、<span class="text-yellow-400">math.sqrt()</span>関数で計算できる。</Hint>
 
             <PyScript>
                 import math

app/lecture/src/views/Lecture1.vue

@@ -33,7 +33,7 @@
 <template>
     <Title>第1講 Python: データ型、変数、演算子</Title>
 
-    <div class="container w-3/6 mx-auto mb-10 text-start">
+    <div class="container w-full sm:w-5/6 md:w-4/6 mx-auto mb-10 text-start">
         <Header>1.データ型</Header>
         <Paragraph>
             Pythonに限らず、プログラミング言語が扱うデータには"型(<span class="text-yellow-400">type</span>)"が存在する。
@@ -226,7 +226,7 @@
         <Header>4.練習問題</header>
         <Paragraph>
             <SubHeader class="mb-3">[<span class="text-green-600 font-bold">Easy</span>] 入力される名前を、"Your name is XXX."のように出力するプログラムを書け。</SubHeader>
-            <Hint level="easy"><span class="text-yellow-400">input()</span>関数を使うと、入力された文字列を取得できる。</Hint>
+            <Hint unique_id="easy"><span class="text-yellow-400">input()</span>関数を使うと、入力された文字列を取得できる。</Hint>
 
             <PyScript>
                 name = input()
@@ -236,7 +236,7 @@
 
         <Paragraph>
             <SubHeader class="mb-3">[<span class="text-yellow-400 font-bold">Medium</span>] 入力される2数(num1, num2)の平均を求めるプログラムを書け。</SubHeader>
-            <Hint level="med1">input()関数から返されるデータは、<span class="text-yellow-400">str</span>型であることに注意しよう。</Hint>
+            <Hint unique_id="med1">input()関数から返されるデータは、<span class="text-yellow-400">str</span>型であることに注意しよう。</Hint>
 
             <PyScript>
                 num1 = input()
@@ -247,7 +247,7 @@
 
         <Paragraph>
             <SubHeader class="mb-3">[<span class="text-yellow-400 font-bold">Medium</span>] 次のプログラムの誤りを指摘し、修正せよ。</SubHeader>
-            <Hint level="med2">プログラムは、括弧の内側から順に評価される。</Hint>
+            <Hint unique_id="med2">プログラムは、括弧の内側から順に評価される。</Hint>
 
             <PyScript>
                 a = input()         # aに任意の数を代入
@@ -258,7 +258,7 @@
 
         <Paragraph>
             <SubHeader class="mb-3">[<span class="text-red-500 font-bold">Hard</span>] 1番目の整数(num1)から2番目の整数(num2)を引いた結果を出力するプログラムを書け。ただし、算術演算子のうち使えるのは + のみとする。</SubHeader>
-            <Hint level="hard"><span class="text-yellow-400">ビット演算</span>について調べてみよう。</Hint>
+            <Hint unique_id="hard"><span class="text-yellow-400">ビット演算</span>について調べてみよう。</Hint>
 
             <PyScript>
                 num1: int = 10

app/lecture/src/views/Lecture2.vue

@@ -33,7 +33,7 @@
 <template>
     <Title>第2講 Python: if文、for文、while文</Title>
 
-    <div class="container w-3/6 mx-auto mb-10 text-start">
+    <div class="container w-full sm:w-5/6 md:w-4/6 mx-auto mb-10 text-start">
         <Header>1.if文</Header>
         <Paragraph>
             <span class="text-yellow-400">if</span>文とは、与えられた条件に応じて処理の方法や順番を変えるための構文であり、Pythonのみならず、多くのプログラミング言語で実装されている。
@@ -231,7 +231,7 @@
         <Header>4.練習問題</header>
         <Paragraph>
             <SubHeader class="mb-3">[<span class="text-green-600 font-bold">Easy</span>] 1以上x未満の範囲に含まれる奇数の総和を求めるプログラムを書け。</SubHeader>
-            <Hint level="easy1"><span class="text-yellow-400">range()</span>関数を使うと、list型(厳密にはrange型)の数列を取得できる。</Hint>
+            <Hint unique_id="easy1"><span class="text-yellow-400">range()</span>関数を使うと、list型(厳密にはrange型)の数列を取得できる。</Hint>
 
             <PyScript>
                 x: int = 100
@@ -241,7 +241,7 @@
 
         <Paragraph>
             <SubHeader class="mb-3">[<span class="text-green-600 font-bold">Easy</span>] 次のプログラムのエラーの原因を特定し、修正せよ。</SubHeader>
-            <Hint level="easy2">宣言されていない変数は呼び出せない。</Hint>
+            <Hint unique_id="easy2">宣言されていない変数は呼び出せない。</Hint>
 
             <PyScript>
                 sum = 0
@@ -255,7 +255,7 @@
 
         <Paragraph>
             <SubHeader class="mb-3">[<span class="text-yellow-400 font-bold">Medium</span>] 入力された自然数に対して、適切な序数を出力するプログラムを書け。例えば、1が入力された時に"1st"を返すこと。</SubHeader>
-            <Hint level="med">1の位の数に応じて条件分岐させること。ただし、例外がいくつか存在するので注意せよ。</Hint>
+            <Hint unique_id="med">1の位の数に応じて条件分岐させること。ただし、例外がいくつか存在するので注意せよ。</Hint>
 
             <PyScript>
                 num = input()
@@ -265,7 +265,7 @@
 
         <Paragraph>
             <SubHeader class="mb-3">[<span class="text-red-500 font-bold">Hard</span>] 任意の実数x(rad)に対して、sin(x)の値を出力するプログラムを書け。ただし、必要な計算精度は10桁程度とし、以下のpiの値を利用しても良いものとする。</SubHeader>
-            <Hint level="hard">関数の周期性を利用することで効率的なコードが書ける。</Hint>
+            <Hint unique_id="hard">関数の周期性を利用することで効率的なコードが書ける。</Hint>
 
             <PyScript>
                 pi: float = 3.14159265359