Q&A
その前に、httpサーバーをたてるところから始めるべきでは？
html、javascriptを使って、10個のページを重複なしで、ランダムに一回ずつ表示したいです。
ランダムでページを表示することは、できるようになったのですが、重複無しをどのように実現して良いかわかりません。
htmlも、javascriptもネットで調べてコードを書いているので、初心者に毛が生えた程度です。
変なコードになっていたりするかもしれませんが、優しくご指導お願いします。
スタートページ → アンケートページ1 → アンケートページ2 → .... → アンケートページ10 → 終わり
のような構成で、アンケートページ1から10をランダムに重複なく一回ずつ表示したいです。
スタートページのコードです。
ランダムで数字を取得して、click here to start を押すことで、取得した数字に応じたページが開くようにしました。その後のアンケートページにも同様のコードをかき、nextを押すことで同じような動きになるようにしました。
<link href="https://s3.amazonaws.com/mturk-public/bs30/css/bootstrap.min.css" rel="stylesheet" /> <section> <center> <a id="10000" href="file:///Users/na/Desktop/RAfromat/original.html">click here to start</a> </center> </section> <head> <script language = "JavaScript"> var rand_link = Math.floor((Math.random() * 10) + 1); if (rand_link == 1){ var elem_link = document.getElementById(String(10000)); elem_link.href = "file:///Users/na/Desktop/RAfromat/original.html"; } if (rand_link == 2){ var elem_link = document.getElementById(String(10000)); elem_link.href = "file:///Users/na/Desktop/RAfromat/original2.html"; } if (rand_link == 3){ var elem_link = document.getElementById(String(10000)); elem_link.href = "file:///Users/na/Desktop/RAfromat/original3.html"; } if (rand_link == 4){ var elem_link = document.getElementById(String(10000)); elem_link.href = "file:///Users/na/Desktop/RAfromat/original4.html"; } if (rand_link == 5){ var elem_link = document.getElementById(String(10000)); elem_link.href = "file:///Users/na/Desktop/RAfromat/original5.html"; } if (rand_link == 6){ var elem_link = document.getElementById(String(10000)); elem_link.href = "file:///Users/na/Desktop/RAfromat/original6.html"; } if (rand_link == 7){ var elem_link = document.getElementById(String(10000)); elem_link.href = "file:///Users/na/Desktop/RAfromat/original7.html"; } if (rand_link == 8){ var elem_link = document.getElementById(String(10000)); elem_link.href = "file:///Users/na/Desktop/RAfromat/original8.html"; } if (rand_link == 9){ var elem_link = document.getElementById(String(10000)); elem_link.href = "file:///Users/na/Desktop/RAfromat/original9.html"; } if (rand_link == 10){ var elem_link = document.getElementById(String(10000)); elem_link.href = "file:///Users/na/Desktop/RAfromat/original10.html"; } </script> </head>
後々、研究室のサーバーに上げてもらうようになってます。
とりあえず、サンプル？的なもの作ってって言われてるので...。
> 10個のページを重複なしで、ランダムに一回ずつ表示したいです。
11回目以降はどうするのですか？
そのカウントは端末内でですか？全体でですか？
アンケートのようなものなので、11ページ目にはお礼のコメントだけ入れるつもりです。
端末内と全体の意味がよくわからなくて、本当に申し訳ないんですが、アンケートが10ページに分かれていて、start page → アンケート1 → アンケート2 → ........... → アンケート10 → thank you for your help のような流れで、アンケート1からアンケート10までをランダムにしたいです。
説明下手だし、理解力なくて本当にすいません....。
HTML5で削除されている機能を使っていたり、「languag 」となっていたり、
基本的なところから突っ込まないといけないような。
研究室のサーバーにあげても、「file://」じゃ普通動きませんよ。せめて相対パスに。
ご指摘ありがとうございます。
languagに関して、修正しました。
本当にネットで調べて、使えそうなところだけ使ってって感じなので、無知ですみません。HTML5で削除されてる機能がどれなのか、実際ある程度やりたいことができてるのはなぜなのか等、詳しく教えていただけたら幸いです。また、ページ表示に関する回答もお願いしたいです。
html5 廃止
で調べれば出てきます。
廃止されてはいてもブラウザがサポートしてくれてるので効果がなくなってないだけで、いずれ使えなくなると思って良いです。
わざわざ本当にありがとうございます。
修正するのに参考にさせていただきます。
差し支えなければ、ランダム表示に関してもご回答よろしくお願いしますm(_ _)m
質問内容を修正してください。
コードも手元だけでは現状は他者には伝わりません。
language以外にもjavasqriptだったり結構雑です。プログラムは書いた通りにしか動かないので、固有名詞の間違いは致命的です。
訂正させていただきました。
現状が伝わらないことすら分かってないので、どの情報が必要か具体的に教えていただけませんか？お手数おかけして申し訳ありません。
最優先事項が重複なしに一回ずつ表示することなので、絶対パス、相対パスについては持ち越しさせてくださいm(_ _)m
回答1件
0
ベストアンサー
どうやってアンケートを10個ユニークに表示するかだけに絞りましょう
- iframeでみせる
- クッキーなどでわたす（fileだと微妙）
- リンクにパラメータで残りアンケートを渡す
などが妥当。本来はサーバーサイドのセッションなどを利用するパターンです
投稿2020/07/31 02:23
総合スコア116724
そもそもシングルページで最初からアンケートデータを10個全部保持しておいて
順番に表示したり、ajax(fetch)でアンケート内容を非同期に読みこんだり
するのが楽です
一つ疑問なのはアンケートページなのにユーザーの回答はどうするつもりなのかですね
閲覧だけなら順番に見せるだけですが、回答が必要なんですよね？
音声を聞いてもらってアンケートに答えてもらうのですが、3600個からランダムで抽出された300個の音声ファイルを聞いてもらうようになっていて、一つのページにまとめるとロードに時間がかかってしまったので、ページ分けすることになりました。
回答については、ラジオボタンになりそうですが、まだ経過段階なので問題の表示だけ考えて欲しいと言われています。
お気遣いありがとうございますm(__)m
start.htmから始まりenq1～3.htmをランダムに通ってend.htmに行くとします
共有のjsファイルmyfile.jsを用意します
//myfile.js
window.addEventListener('DOMContentLoaded', ()=>{
var list=["enq1.htm","enq2.htm","enq3.htm"];
var reg=new RegExp("[?&]rest=(.*?)(?=&|$)");
var rnd=list.map((x,y)=>[y,Math.random()]).sort((x,y)=>x[1]-y[1]).map(x=>x[0]);
var rest=reg.test(location.search)?location.search.match(reg)[1].split("+").map(x=>x?parseInt(x):null):rnd;
var href="end.htm";
//console.log(rest);
if(rest[0]!==null){
var num=rest.shift();
var href=list[num]+"?rest="+rest.join("+");
}
document.querySelector('#link').setAttribute("href",href);
});
//start.htm
<script src="myfile.js"></script>
<h1>start</h1>
<a href="" id="link">next</a>
//enq1.htm
<script src="myfile.js"></script>
<h1>enq1</h1>
<a href="" id="link">next</a>
//enq2.htm
<script src="myfile.js"></script>
<h1>enq2</h1>
<a href="" id="link">next</a>
//enq3.htm
<script src="myfile.js"></script>
<h1>enq3</h1>
<a href="" id="link">next</a>
//end.htm
<h1>end</h1>
回答ありがとうございます。
今、既存のコードにプラスして書いたらうまくいきました！
まだちゃんと理解して書いたわけではないので、わからないところを後々質問するかもしれませんが、その時はよろしくお願いしますm(__)m
本当にありがとうございました！
あなたの回答
tips
プレビュー
