こんばんは。
表題の件、教えて欲しいです。
電子教材を作っているのですが、進捗がわかるプログレスバーを現在作っているサイトに組み込みたいです。具体的には、ページ内に「理解できた」ボタンを5つ作成し、一つ目の「理解できた」ボタンが押されるとページ上部に作られたプログレスバーの進捗が20%まで、2つ目が押されると40%まで、、、、、5つ押されると100%まで進捗するというバーを作りたいです。
簡単にHTML・CSS・JSのコードを教えていただけないでしょうか。もしくは参考になるサイトがあればご紹介いただけないでしょうか。
よろしくお願い致します。
No.3ベストアンサー
- 回答日時:
こんにちは
>簡単にHTML・CSS・JSのコードを教えていただけないでしょうか。
すでに紹介がありますが、プログレスバーを実現するjsライブラリは数多くありますので、検索して、お好みのものを利用するのが簡単だと思います。
一方で、表示がブラウザ依存になることをかまわなければ、<input type="range">がスライダー状の表示になることを利用することで、ライブラリ等を利用せずとも簡単に似たような表示ができます。
以下は、そのような一例ですが、ご参考までに。
※ <input type="range">は入力用なのでユーザが変更できますが、disabledにすると表示がグレーアウトしてしまうので、上からカバーをすることで変更できないようにしてあります。
※ 体裁を整えるために、直接関係のない処理も加えていますが、最低限では、input要素のvalue値を設定すれば表示にその値が反映されますので、他の部分はご参考まで。
※ ボタンは、順序通りでないと押せないのか、ランダムに押しても良いのか不明でしたので、特に制御は行っていません。
<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style>
#progress { width: 18em; }
#progress p { margin: 0.5em 1em; padding: 0; }
#progress p button { width:8em; margin-left: 2em; }
#progress .slid_wrap { margin: 1em 0 1em 1em; position: relative; }
#progress .slid_wrap input { width: 11em; }
#progress .slid_wrap span { font-size: .8em; font-weight: bold; }
#progress .slid_wrap .cover {
position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
let p = document.getElementById('progress');
p.querySelector('fieldset').addEventListener('click', (e)=>{
let t = e.target;
if(e.target.nodeName != 'BUTTON') return;
t.value = 'done', t.textContent = '終了済';
t.disabled = 'disabled';
let n = p.querySelectorAll('button[value="done"]').length * 20;
p.querySelector('.slid_wrap input').value = n;
p.querySelector('.slid_wrap span').textContent = n + "%";
});
});
</script>
</head>
<body>
<div id="progress">
<div class="slid_wrap">
<label>理解度:</label>
<input type="range" min="0" max="100" value="0" />
<span>0%</span>
<div class="cover"></div>
</div>
<fieldset>
<legend>理解状況チェック</legend>
<p>第1章:<button type="button">理解できた</button></p>
<p>第2章:<button type="button">理解できた</button></p>
<p>第3章:<button type="button">理解できた</button></p>
<p>第4章:<button type="button">理解できた</button></p>
<p>第5章:<button type="button">理解できた</button></p>
</fieldset>
</div>
</body>
</html>
ありがとうございます!本当にこのようなものが作りたかったのでドンピシャです。大変助かりました。
よろしければもう一点教えて欲しいのですが、「'終了済'」ボタンを押すと「理解できた」ボタンに再び戻り、かつプログレスバーの進捗も戻るようにするにはどのようなコードを追加すれば良いでしょうか。
よろしくお願い致します。
No.4
- 回答日時:
No3です。
>「'終了済'」ボタンを押すと~~コードを追加すれば良いでしょうか。
追加というよりも、一部修正することで可能です。
修正部分だけを記述しても伝わらない可能性がありそうなので、修正後のスクリプト全体を参考までに以下に記しておきます。
とは言え、No3はあくまでも要領としての例ですので(汎用的なものではない)、質問者様の環境に合わせた調整ができないと、実装できないのではないかと懸念しますけれど・・・
window.addEventListener('DOMContentLoaded', ()=>{
let p = document.getElementById('progress');
p.querySelector('fieldset').addEventListener('click', (e)=>{
let n, t = e.target;
if(e.target.nodeName != 'BUTTON') return;
t.textContent = t.value?'理解できた':'終了済';
t.value = t.value?'':'done';
n = p.querySelectorAll('button[value="done"]').length * 20;
p.querySelector('.slid_wrap input').value = n;
p.querySelector('.slid_wrap span').textContent = n + '%';
});
});
早速ありがとうございます。やってみたところ問題なく実装できているように見えます!!間違いなくベストアンサーです。
最後に差し支えなければ、「終了済」ボタンの色などを変え、終わった感じを出したいのですが、これは難しいでしょうか?
No.1
- 回答日時:
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Web・クリエイティブ 独学でwebデザイナーを目指すには 2 2022/09/17 16:27
- JavaScript jsで診断コンテンツのページ内切り替えについて 1 2023/04/14 17:31
- その他(プログラミング・Web制作) WEBアプリ開発に必要な言語 5 2023/06/28 16:57
- アプリ Edgeを操作するアプリについて 4 2023/05/11 22:48
- 据え置き型ゲーム機 PS4コントローラのリセット確認方法 1 2022/10/01 10:57
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- ホームページ作成・プログラミング ホームページ作成について。「ワードプレスではありません」。 3 2023/08/13 14:44
- MySQL 「utf8mb4_general_ci」はMAMPでは何に当たりますか? 1 2022/06/02 07:45
- HTML・CSS Dreamweaver のテンプレートでの相対パスの設定について 2 2023/06/13 17:28
- JavaScript プルダウンから1個選んで、豆知識を出すプログラム。 2 2022/06/21 17:27
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Ctrl+F(検索)の窓を出したいの...
-
文字を固定したいのですが…
-
1行で左寄せと右寄せと中央揃え...
-
floatさせたdivタグを折り返さ...
-
画像の特定の座標にカーソルが...
-
css固定したフッターが本文と重...
-
スタイルシートで画面を上下に...
-
大分類・中分類・小分類
-
HTMLですCSSです この画像のよ...
-
文字をクリックしたら別の文字...
-
フッター上部に謎の隙間
-
MAX関数を使ってからLEFT JOIN...
-
jQueryで同じクラス名のものを...
-
JavaScriptで変更した属性の元...
-
fancyboxのポップアップ時の画...
-
2つのULの中のリストをランダム...
-
Javascript で共通の処理をどこ...
-
読み込んだQRコードをフォーム...
-
配列で特定キーが同じ値だった...
-
JavaScript で flexslider の画...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSS <div>の入れ子が反映さ...
-
フッター上部に謎の隙間
-
Ctrl+F(検索)の窓を出したいの...
-
【CSS】floatで左右に並べた...
-
css固定したフッターが本文と重...
-
HTMLですCSSです 画像のように...
-
htmlのstyleのposition:relativ...
-
HTMLですCSSです この画像のよ...
-
Flickity で画像にリンクを貼る...
-
画像の特定の座標にカーソルが...
-
チェックボックスの背景色って...
-
html スクロール要素を下から表...
-
レイアウトが崩れないようにす...
-
スクロール可能なチェックボックス
-
リンクで違うページの指定箇所...
-
オンマウス時に別画像を上に重...
-
フッターの下に隙間ができてしまう
-
スタイルシート(CSS)で、高さ...
-
かなり困っています。知恵を貸...
-
離れた場所にマウスオーバーで...
おすすめ情報