https://guidephy.github.io/Ophysics

1<!DOCTYPE html>
2<html lang="zh-Hant-TW">
3<head>
4  <meta charset="utf-8">
5  <title>Guidephy物理自學</title>
6  <meta name="description" content="高中物理自學">
7  <link rel="icon" type="image/png" href="images/GuidephyNotes-sLogo.png">
8  <meta name="viewport" content="width=device-width, initial-scale=1">
9  <meta name="google-site-verification" content="tvvXxbI18opHJBKJIQdDbub-eFv-PrXfNGiKNXskiL8" />
10  <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
11  <link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet">
12  <link href="css/style.css" rel="stylesheet">
13  

13<script src="https://code.jquery.com/jquery-3.6.4.min.js" defer></script>

13
14  

14<script src="JS/menu.js" defer></script>

14
15  

15<script src="JS/Ophysics.js" defer></script>

15
16  <style>
17    .radio-container {
18      display: flex;
19      justify-content: space-between;
20      padding: 0 10px;
21    }
22
23    .type-container {
24      padding: 0 10px;
25    }
26
27    label {
28      display: flex;
29      align-items: center;
30    }
31
32    input[type="radio"] {
33      margin-right: 5px;
34    }
35
36    #q3Answer {
37      border: 1px solid #ccc;
38      padding: 8px;
39    }
40
41    .chapter-list {
42      font-family: Arial, sans-serif;
43      max-width: 400px;
44      margin: 0 auto;
45    }
46
47    .chapter {
48      margin-top: 20px;
49      list-style-type: none;
50    }
51
52    .chapter-title {
53      font-size: 24px;
54      font-weight: bold;
55      color: #3366cc;
56      display: block;
57      margin-bottom: 10px;
58    }
59
60    .section {
61      font-size: 18px;
62      color: #ff6600;
63      list-style-type: none;
64      cursor: pointer;
65    }
66
67    .input-row label {
68      display: block;
69      font-weight: bold;
70      margin-bottom: 5px;
71    }
72
73    .input-row select,
74    .input-row input {
75      display: block;
76      padding: 5px;
77      border: 1px solid #ccc;
78      border-radius: 5px;
79      margin-bottom: 10px;
80      width: 50%;
81    }
82  </style>
83</head>
84<body>
85  <div id="news" class="big-bg">
86    <header class="page-header wrapper">
87      <h1><a href="https://guidephy.github.io"><img class="logo" src="images/GuidephyNotesLogo.png" alt="Guidephy學習教室首頁"></a></h1>
88     <nav>
89        <ul class="main-nav">
90          <li class="dropdown"><a href="javascript:void(0)" class="dropbtn" onclick="myFunction1()">學習講義</a>
91              <div class="dropdown-content" id="myDropdown1">
92                  <a href="physics.html">物理課程</a>
93                  <a href="WebDesign.html">網頁設計</a>
94                  <a href="LineBot.html">LineBot</a>
95                  <a href="VPython.html">VPython</a>
96                  <a href="Ohtaigi.html">台語課程</a>
97              </div>
98          </li>
99          <li class="dropdown"><a href="javascript:void(0)" class="dropbtn" onclick="myFunction2()">線上題庫</a>
100              <div class="dropdown-content" id="myDropdown2">
101                  <a href="phyhistorytest.html">物理史小測驗</a>
102                  <a href="https://guidephy.github.io/taigitest.html">台羅拼音聽力測驗</a>
103                  <a href="Ttest.html">國中技藝競賽題庫</a>
104              </div>
105
106          </li>
107
108          
109          <li class="dropdown"><a href="javascript:void(0)" class="dropbtn" onclick="myFunction3()">作品分享</a>
110              <div class="dropdown-content" id="myDropdown3">
111                  <a href="https://guidephy.github.io/vrguanyin/">VR遊觀音</a>
112                  <a href="https://guidephy.github.io/EnergyTransition/">Planet713計畫</a>
113                  <a href="https://guidephy.github.io/imagetotext/">影像擷取文字系統</a>
114                  <a href="https://guidephy.github.io/111ceproject.html">碳捕捉暨Na循環發電IoT系統</a>
115                   <a href="https://guidephy.github.io/grades.html">課堂計分</a>
116                  <a href="https://guidephy.github.io/taigitest.html">台羅拼音聽力測驗</a>
117                  <a href="https://guidephy.notion.site/Learn-to-Create-An-RPG-Game-In-Unity-Tutorial-Udemy-e1e79f20d692448b86fd4fc740aac94b?pvs=4">unity2D學習筆記</a>
118                  <a href="https://guidephy.notion.site/Unity-Learning-d45d104ccbf34dcaa15c937affee7546">unity3D學習筆記</a>
119             
120                
121              </div>
122
123          </li>
124          
125          <li><a href="https://guidephy.github.io/Ophysics">物理自學平台</a></li>
126        </ul>
127      </nav>
128    </header>
129  </div>
130  <div class="wrapper">
131    <h2 class="page-title">高中物理自學</h2>
132  </div>
133  <div class="news-contents wrapper">
134    <article>
135      <header class="post-info">
136        <h2 id="unitName" class="post-title">選擇自學單元</h2>
137        <p class="post-date">物理 <span>自學</span></p>
138        <p id="hint" class="post-cat"></p>
139      </header>
140      <br>
141      <div id="chapterChoose" class="chapter-list">
142        <ul>
143          <li class="chapter">

144            <span class="chapter-title">第五章</span>
145            <ul>
146              <li class="section" onclick="handleSectionClick(this)">功與能</li>
147              <li class="section" onclick="handleSectionClick(this)">力學能守恆</li>
148              <li class="section" onclick="handleSectionClick(this)">微觀尺度的能量</li>
149              <li class="section" onclick="handleSectionClick(this)">能量守恆</li>
150              <li class="section" onclick="handleSectionClick(this)">核能</li>
151            </ul>
152          </li>
153        </ul>
154        <ul>
155          <li class="chapter">
156            <span class="chapter-title">第六章</span>
157            <ul>
158              <li class="section" onclick="handleSectionClick(this)">量子論</li>
159              <li class="section" onclick="handleSectionClick(this)">光電效應</li>
160              <li class="section" onclick="handleSectionClick(this)">光的本質</li>
161              <li class="section" onclick="handleSectionClick(this)">物質波</li>
162              <li class="section" onclick="handleSectionClick(this)">原子能階與光譜</li>
163            </ul>
164          </li>
165        </ul>
166      </div>
167      <div id="videoContainer" style="display: none;">
168        <iframe id="vedioUrl" src="" width="640" height="360" allow="autoplay"></iframe>
169        <div align="right">
170          <p>影片來源:<a target="_blank" href="https://www.youtube.com/@CooC-Cloud">臺北酷課雲</a><br>
171          題目來源:<a target="_blank" href="https://guidephy.github.io/">觀高林仟弘</a></p>
172        </div>
173        <div id="Question" style="display: none;">
174          <div class="question">
175            <h3>問題 1</h3>
176            <img id="question1" src="" alt="問題1">
177            <div class="radio-container">
178              <label><input type="radio" name="q1" value="A"> A</label>
179              <label><input type="radio" name="q1" value="B"> B</label>
180              <label><input type="radio" name="q1" value="C"> C</label>
181              <label><input type="radio" name="q1" value="D"> D</label>
182            </div>
183          </div>
184          <br>
185          <div class="question">
186            <h3>問題 2</h3>
187            <img id="question2" src="" alt="問題2">
188            <div class="radio-container">
189              <label><input type="radio" name="q2" value="A"> A</label>
190              <label><input type="radio" name="q2" value="B"> B</label>
191              <label><input type="radio" name="q2" value="C"> C</label>
192              <label><input type="radio" name="q2" value="D"> D</label>
193            </div>
194          </div>
195          <br>
196          <div class="question">
197            <h3>問題 3（簡答題)</h3>
198            <img id="question3" src="" alt="問題3">
199            <div class="type-container">
200              <input type="text" id="q3Answer" placeholder="請輸入答案">
201            </div>
202          </div>
203          <div align="center">
204            <button id="submitBtn" onclick="submitAnswers()">下一關</button>
205          </div>
206        </div>
207      </div>
208      <div class="input-row" id="registerScore" style="display: none;">
209        <label for="selectTest">學校:</label>
210        <select name="select" id="selectSchool">
211          <option>請選擇學校</option>
212          <option>桃園市立觀音高中</option>
213          <option>其它</option>
214        </select>
215        <label for="class">班級:</label>
216        <input type="text" id="class" placeholder="請輸入班級">
217        <label for="seat">座號:</label>
218        <input type="text" id="seat" placeholder="請輸入座號">
219        <label for="name">姓名:</label>
220        <input type="text" id="name" placeholder="請輸入名字">
221        <br>
222        <div align="center">
223          <button onclick="registerScore()">登記</button>
224        </div>
225      </div>
226      <div id="restartButton" align="center" style="display: none;">
227        <button style="margin: 20px;" onclick="scoreData()" id="scoreData">登記成績</button>
228        <a href="https://guidephy.github.io/Ophysics"><button style="margin: 20px;">繼續學習</button></a>
229        <a href="https://docs.google.com/spreadsheets/d/e/2PACX-1vQkPQvWslhK-dGwzeImWAei8-kGcJoXL9sSHL2LgbenIsErrRkrF5EB0gGUfG1TxoqRYkjLoJYSmP3M/pubhtml?gid=0&single=true" target="_blank" id="lookScore" style="display: none;"><button style="margin: 20px;">成績查詢</button></a>
230      </div>
231      <br>
232    </article>
233    <aside>
234      <h3 class="sub-title">瀏覽人次</h3>
235      <br>
236      <img src="https://hitwebcounter.com/counter/counter.php?page=8081074&style=0003&nbdigits=5&type=page&initCount=0" title="Free Counter" Alt="web counter" border="0" style="float: center;" />
237    </aside>
238  </div>
239  <footer>
240    <div class="wrapper">
241      <p><small>&copy; 觀音高中物理科 林仟弘老師</small></p>
242    </div>
243  </footer>
244</body>
245</html>