試行錯誤ページ196



↓yahoo知恵袋より

各不正解ボタンに色を変えるべき正解ボタンの id でも直接書き込んである
正解の答えを押していも、不正解の答えを押しても、解答のボタンに色がつく。

四択クイズ

◎次のうち北海道にある山はどれか。



◎次のうち東京に流れている川はどれか。



◎次のうち最も面積が広い島はどれか。



↑yahoo知恵袋より

↓JavaScript テクニック集1
javascriptなし、ボタンクリックでラジオボタンがつく前に答えが出てしまう。


  問題1: 海の日は何月何日?

       
2月11日 
7月20日 
11月3日





  問題2: ブラームスの交響曲は何番まで?

       
第4番まで 
第6番まで 
第9番まで

↑JavaScript テクニック集1
radioのonclickでのalert
→IEではラジオがついてからalertlが出る。
→chrome, iphoneではalertが出てからradioがつく。

 
 
 
 
 
 
 
 
 

 ↓ たて書き or よこ書き を 選べます ↓

たてがき
 
①・・・
②・・・
③・・・

よこがき
 
①・・・
②・・・
③・・・

(さいしょは『縦書き』になっています。何度でも切り換え可)

Questions(ここから)

Q1. 答えはA(5点)
readonlyあり
 

 
Q2. 答えはA(5点)
readonlyなし
 

 
 
Q3. 答えはA(5点)
 

 
 
Q4. 答えはA(5点)
 

 
Q5.答えはA(10点)





height:autoにすると縦書きでラジオボタンの位置が文字の左に来てしまう。
 
装飾部分は、縦横切替ではうまくいかない。topとleftで位置調整できるが・・・
 
hidekeyが採点に影響してしまうので、再テスト方式は使えない
 
Q6.答えはA(10点)

Q7.答えはA(10点)

Q8.答えはA(10点)

Q9.答えはA(20点)

Q10.答えはA(20点)




 

 
 

 

 
 
 
 
 



↓ページの更新が行われてしまう


↑ページの更新が行われてしまう
↓いろいろ試行錯誤した
← 最初の問題に移動する(cssでサイズ指定はできるが、中の文字が縦書きにならない)

← 最初の問題に移動する

画像のみwidth="150" height="150"

#returnto1 width="150" height="150"

画像のみwidth="150" height="150"

#returnto1 width="150" height="150"

← 最初の問題に移動する(cssでサイズ指定はできるが、中の文字が縦書きにならない)

 
画像のみwidth="150" height="150"

#returnto1 width="150" height="150"

画像のみwidth="150" height="150"

#returnto1 width="150" height="150"

 ↓ たて書き or よこ書き を 選べます ↓

たてがき
 
①・・・
②・・・
③・・・

よこがき
 
①・・・
②・・・
③・・・


div sampleのなかに入れるとラジオ・チェックボックスがなくなる


重なっていて少しバグってる

検証→試行187へ
 
 
 
 

ここをクリックすると最初の問題に戻る
 
 
onclickで縦書き&ページ移動(試行錯誤190へ)はうまくいったが・・・

 

↓画像ではうまくいかないし、ページの更新が行われる




↑画像ではうまくいかないし、ページの更新が行われる

↓表内の『最初の問題にもどる』はページの更新されない



↑表内の『最初の問題にもどる』はページの更新されない なぜか表示されない

 
↓tableのid=tategakiは、hoverでピコピコ動く

縦サイズをもっと小さく 縦サイズを小さく

 

横サイズをもっと狭く 横サイズを狭く

↑tableのid=tategakiは、hoverでピコピコ動く

/* 正解不正解の部分にfontAwesomeや画像は使えない、出現部分を縦書きにできない */