画像を二枚ずつ表示して、選んでもらうシステム

画像を二枚ずつ表示して、選んでもらうプログラムを作ってますが、うまくいきません。
具体的には
初め「Start」の画像が表示され、画像をクリックすると二枚の画像が表示されます。
そして、どちらか片方の画像がクリックされると、また別の組み合わせの二枚の画像が表示される。
といったことを繰り返して、最終的に全ての画像の組み合わせに対して選んでもらうといったプログラムになります。
表示される画像の組み合わせはランダムにしたいです。

こんな事が出来ますか?
また、どうしたらいいのでしょうか?
よろしくお願いします

No.2 回答者： Ogre7077 回答日時： 2015/10/24 22:32

HTML で可能です。

以下サンプル

<script>(function(){
_ var gamedata = {
_ _ first: {start:'/img/start.jpg'}, // Start 画像
_ _ times: 2, // 選んでもらう回数
_ _ pairs: [
_ _ _ {a1:'/img/a1.jpg', a2:'/img/a2.jpg'}, // 二枚の画像
_ _ _ {b1:'/img/b1.jpg', b2:'/img/b2.jpg'}, // 別の組み合わせの二枚の画像
_ _ _ // ...
_ _ ],
_ _ stock: [],
_ _ result: [],
_ _ init: function(){ this.result = [], this.stock = [this.first].concat(sort(this.pairs, this.times)); },
_ _ next: function(){ return this.stock.shift() },
_ };
_ function Q(s){ return document.querySelector(s) }
_ function E(n,p){ var i, e = document.createElement(n); if(p) for(i in p) e[i]=p[i]; return e }
_ function sort(a,n) {
_ _ var i, j, t, x = a.slice(), s = x.length;
_ _ for (i=0; i<n; i++, s--) j=Math.random()*s|0, t=x[i], x[i]=x[i+j], x[i+j]=t;
_ _ return x.slice(0,n);
_ }
_ addEventListener('DOMContentLoaded', function(ev) {
_ _ gamedata.init();
_ _ displayNext();
_ }, false);
_ addEventListener('hashchange', function(ev) {
_ _ var hash = ev.target.location.hash;
_ _ switch (hash) {
_ _ _ case '#reset': gamedata.init(); break;
_ _ _ case '#start': break;
_ _ _ default: gamedata.result.push(hash);
_ _ }
_ _ displayNext();
_ }, false);
_ function displayNext() {
_ _ var e = Q('.main');
_ _ while (e.firstChild) e.removeChild(e.firstChild);
_ _ var o = gamedata.next();
_ _ if (o) {
_ _ _ for (var i in o) Q('.main').appendChild(E('a', {href:'#'+i})).appendChild(E('img', {src:o[i],alt:i}));
_ _ } else {
_ _ _ var x = Q('.main').appendChild(E('ol'));
_ _ _ x.style.display = 'inline-block';
_ _ _ gamedata.result.forEach(function(hash){ x.appendChild(E('li', {textContent:hash})) }); // 選んだ画像hashを一覧表示
_ _ }
_ }
})()</script>
<a href=#reset>reset</a><section class=main></section>

No.1 回答者： ORUKA1951 回答日時： 2015/10/24 09:34

されたい事が分からない。

>どちらか片方の画像がクリックされると、また別の組み合わせの二枚の画像が表示される。
1) A or B　Aを選択
2) C Or D　また別の組み合わせ　Cを選択
3) E or F
　　↓
　A D E ・・・・

それとも
1) A or B　Aを選択
2) A1 Or A2　また別の組み合わせ　A2を選択
3) A2₁ or A2₂
　　↓
　A A2 A2₁

数が少なければHTMLと簡単なjavascriptでも可能ですが、すべてをjavascriptで作成するなり、frashを使っても良いですが、ブラウザに依存することなど（javascriptを制限しているユーザー,frashはIpadで使えない）から、サーバー側で処理するのが簡単で楽でしょう。すなわちCGIかPHPを使う。