質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1386閲覧

Gitのチュートリアルページ作成

退会済みユーザー

退会済みユーザー

総合スコア0

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/11/30 01:26

編集2016/11/30 02:23

Gitのチュートリアルページを作成したいと考えています

具体的にはTryGitのようなものを考えています
環境はHTMLでの作成です
機能的には、ページ内に二つ上下に枠があり、上は説明枠で下はユーザーがコンソールで文字を打つ枠あります
説明文に記載した特定の文字をコンソールで打ち込むことで説明が変わり、次の説明に変わり、コンソールでは成功の文字や表示結果が表示される
といったものです
チュートリアルは15個ほどです

コンソールはhttps://github.com/chrisdone/jquery-consoleを利用しようかと考えています

どのようにすれば上記の機能が作れるでしょうか?

もし参考になるサイトなどがありましたら、教えていただけると助かります

ご回答よろしくお願いいたします
どうかお助けくださいイメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

紙芝居であればコンソール風のDOMから文字列を取得し、
予めハードコーティングした「git init」と比較判定を行う。
というif文を作成し、trueであればカルーセル(スライド)を次へ動かす。

みたいな感じでよいのではないかと思います。

trygitはわかりませんが、
正しい判定を受けたい場合、
サーバと通信させ実際にコマンドをうった結果を受け取り、
画面に表示させる。ということをします。

また、コンソール風を表示させるには「CodeMirror」がおすすめです。

###追記(2016/12/07)

HTML

1<!DOCTYPE html> 2<html> 3 <head> 4 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 5 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.21.0/codemirror.min.js"></script> 6 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.21.0/mode/shell/shell.js"></script> 7 <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.21.0/codemirror.min.css"/> 8 9 <style> 10 .CodeMirror { 11 background: #424242; 12 color: #FFF 13 } 14 </style> 15 16 <title>HTML5, CSS3 and JavaScript demo</title> 17 </head> 18 <body> 19 20 <textarea id="editor" rows="30" cols="50"></textarea> 21 22 <script> 23 var flag = false, 24 firstCode = "git init"; 25 26 var jsEditor = CodeMirror.fromTextArea(document.getElementById('editor'), { 27 mode: 'shell', 28 lineNumbers: true, 29 indentUnit: 4, 30 extraKeys:{ 31 Enter: function(e) { 32 var self = this, 33 msg = ""; 34 var consoleTxt = e.display.lineDiv.innerText 35 var cmd = consoleTxt.split(/\r\n|\r|\n/); 36 37 cmd = cmd[cmd.length - 2] 38 39 if (cmd === firstCode) { 40 msg = '<p style="color: green">Success!</p>'; 41 } else { 42 msg = '<p style="color: red">Failed...</p>'; 43 } 44 $('.CodeMirror-lines').append(msg); 45 e.preventDefault(); 46 } 47 } 48 }); 49 </script> 50 </body> 51</html>

投稿2016/11/30 01:45

編集2016/12/07 07:31
mukkun

総合スコア882

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/11/30 02:27

ご回答ありがとうございます あまり知識がないので申し訳ございませんが その「CodeMirror」から打ち込まれた文字を取得して、正しければつぎのページに飛ぶ という流れでしょうか? 判定はjsなどで行うのでしょうか?
mukkun

2016/11/30 02:39

> その「CodeMirror」から打ち込まれた文字を取得して、正しければつぎのページに飛ぶ という流れでしょうか? 「git init」等のコマンドをうった後という意味でしょうか。 コマンドをうった後であれば、通常JavaScript側で行います。 また、CodeMirrorはコンソールを表現するだけなので、 例えば「エンターキー」、「タブキー」、「上下キー」が押された場合の判定などは、 JavaScriptで制御してあげる必要があります。
退会済みユーザー

退会済みユーザー

2016/11/30 03:02

コマンドをjsで取得ということですね チュードリアルでそれぞれ打ち込むコードが変わるのですが、正解判定は一つのJsで判定をするということは可能ですか
mukkun

2016/11/30 03:38

可能です。 TryGitみたく、大項目でページ(HTML)を分けると思いますが、 ページ内での話と解釈します。 --- $ git init => Initialized empty Git repository in /.git/ $ git status => nothing to commit --- というようにコマンドを入力していくと思いますが、 「git init」する前にフラグが"false"ならば「git status」と入力してもエラーとするなど。 まずはJavaScriptに触れてみるとイメージがつかめるかもしれません。
mukkun

2016/11/30 14:00

適当に作成したので、 完全には動きませんが、あくまでイメージをつかむ用です。 https://jsfiddle.net/kycf5rj0/ このようなシステムを作成するのであれば、 基礎的な知識がないと難しいと思います。
退会済みユーザー

退会済みユーザー

2016/12/07 05:28

そうですよね、ただ完成させたい一心でやっておりまして、、、 最後になのですが、codemirrorに条件文を仕込むには どの場所に記述すればよいでしょうか?
mukkun

2016/12/07 06:46

提示したURLはご覧になりましたでしょうか。 そこで条件判定を行っています。 コンソールに「git init」を入力すると「success」が表示されて、 それ以外は「failed」が表示されるようになっています。 続けて入力するときは変数でフラグ管理をしてあげるだけで良いと思います。
退会済みユーザー

退会済みユーザー

2016/12/07 07:09

URLは拝見しました mukutaJapさんが作成していただいたコードを試験運用しようとしたところ うまくWebページに反映されませんでした その場合どうすればよいでしょうか <!DOCTYPE html> <html> <head> <meta content="text/html; charset=UTF-8" http-equiv="content-type"> <title>Git Tutorial Level1</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.2.0/codemirror.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.2.0/codemirror.css"/> <script src="sample3.js"></script> <link rel="stylesheet" href="sample3.css"> </head> <body> <div class="container"> <h1 style= font-size="500%">sample1-2</h1> <br> <textarea id="editor" rows="30" cols="50"></textarea> <br> </div> </div> </body> </html>
mukkun

2016/12/07 07:21

htmlだけでは何とも言えませんが、 jQueryがないから動かないのではないでしょうか。
mukkun

2016/12/07 07:30

一応ソースを追記しておきました。
退会済みユーザー

退会済みユーザー

2016/12/09 10:36

本当に色々ご教授頂きありがとうございます ソースコードもありがとうございます フラグ管理はなんとか形にできるように頑張ります
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問