# かずきち様 「プログラミングスキル判定サービス」

## 概要

かずきち [18:52]
一択形式、複数選択形式、コーディング形式で問題を出せて、
問題を今のウェブカツのように順番で出していくものです。

progateのようにHTML編、CSS編など分かれていて、その中で問題が出て次に進むものですね。
問題は１問目、２問目の中でもさらに複数登録できて、その中でランダムで出すようにします。

例えば、CSSであれば、
CSSの問題画像（今の鬼練のように図形が配置された画像）と要件（問題文）を見ながら、
コーディングをオンラインで行ってもらいます。
その答えが合ってれば次の問題に進みます。

さらに高度なテストとして
progateのようにオンライン上でファイルやディレクトリを作成し、
それぞれのファイルとコードが合っているかどうか。
を判定させたいです。
（例えば、ユーザー登録を作る。といったお題です。）

->元プログラムのdiffで判定
->プログラムを一度整形する必要がある

それまでの開発スピードも測ります。

構文解析のライブラリ（有料含め）からまず探してもらいたいのと
もしなければ、単にdiffと同じように全文が全く同じかどうかで判定する形で。

[TOC]

## 大まかに必要な機能(最小限)
ユーザー側で必要そうな機能

* ユーザー登録 (ユーザー名、メアド、パスワード)
* ログイン
* ログアウト
* ユーザー情報変更
* 退会する
* 問題の選択 (HTML/CSS編、javascript初級編など)
* 問題を解く (1択、複数選択、コーディング形式)
* 結果の確認
* ex)ユーザーのコンテンツ閲覧レベル (あるレベルから先は有料など)

管理側で必要そうな機能

* 管理ログイン
* 管理ログアウト
* ユーザー一覧表示
* ユーザー削除 (ユーザー系は必要になったら追加)
* 問題の作成
* 問題一覧表示
* 問題の変更
* 問題の削除

### ユーザーについて
#### 問題を解く

* 正解しないと次の問題に進めない
* トータルで解き切った時間を計測
* 途中ギブアップあり
* 選択式問題を２回間違えたらそこで試験終了

#### 問題の画面レイアウト
* 全面を使うデザイン(paizaを参考とする)
* 画面左が問題文
* 画面右が解答スペース

#### 問題を解いた後のスキルチェックはどのように提供するか
* 解いた数とかかった時間でランク付けをする
* 全問正解以外は◯ランク
* 全問正解できた場合はかかった時間でD~Sのランク付け

### 管理側について
#### 問題の登録方法(暫定)
1. 問題種類のセレクトタブを用意しておく(1択、複数選択、コーディング形式)
2. 問題タイプによって入力フォームが変化する
3. 登録

#### HTML上での問題の表示方法(暫定)
1. 問題表示エリアを用意しおく
2. 問題表示エリアに問題をセット
3. 問題タイプに合わせてデザインを可変で表示

#### ランク付けの設定
> ○問までで○ランク。
> ○問までで、かつ、○分以内なら○ランク。

## 必要なページ(17-19枚)
◯はデザイナーさんへ依頼するページ
●がついているページは他のページのデザインから作成できる

### サイト全体系(4枚)
利用規約、プライバシポリシー、特定商のページは見出し、本文のデザインがあればそれぞれ作成出来る。
* TOPページLP◯
* 利用規約◯/プライバシポリシー●/特定商取引法に基づく表示●

### 会員系(5枚)
汎用的なフォームを作ってもらえれば他のページも作成できる
* ログインページ◯
* 会員登録●
* 会員情報変更●
* 退会ページ●
* 退会完了ページ●
* パスワードリマインダー送信●
* パスワードリマインダーコード入力●

### コース選択(2枚)
* 問題コース一覧◯
* 問題コース詳細◯

### 問題を解く(3枚)
複数選択ページの選択肢のデザインは、1択選択の選択肢デザインと同じものを使用する
* 1択選択◯(選択肢はアクティブ 非アクティブによって状態が変わる)
* 複数選択●
* コード記述式◯

### 問題を解いた結果を見る(2枚)
* 問題の結果◯(1問題コース終了後の結果画面)
* 成績一覧◯(問題コースごとに直近のスキルランクを見ることが出来る)

### 必要であれば)有料コンテンツ(2枚)
Stripeなどの決済サービスを利用すれば、ヘッターフッターと決済サービスのiframeでページを作成できる
* 有料コンテンツ(LP)◯
* 決済ページ●