8.26. 주기율표 도구
대화형 원소 주기율표를 생성, 학습자가 다양한 원소의 특성을 학습하는 데 도움이 되게 할 수 있다. 아래 주기율표에서 학습자가 마우스를 원소 위에 가져다 대면 해당 원소에 대한 자세한 정보가 표시된다.
8.26.1. 주기율표 도구 생성하기
주기율표 생성에는 다음 파일이 필요하다.
- Periodic-Table.js
- Periodic-Table.css
- Periodic-Table-Colors.css
- PeriodicTableHTML.txt
http://files.edx.org/PeriodicTableFiles.zip 을 클릭하여 상기 모든 파일을 하나의 .zip 압축 파일로 내려받는다.
주기율표 도구를 생성하려면 HTML 구성 요소가 필요하다.
- except PeriodicTable.txt 를 제외한 상기 파일 모두를 강좌의 파일 업로드 페이지에 업로드한다.
- 문제를 생성하고자 하는 학습 활동에서 신규 구성 요소 추가 의 HTML 을 클릭한 후 HTML 을 클릭한다.
- 구성요소가 표시되면 편집 을 클릭한다.
- 구성요소 편집기에서 HTML 탭으로 전환한다.
- 일반 텍스트 편집기에서 PeriodicTable.txt 파일을 연다.
- PeriodicTable.txt 파일 내부의 모든 텍스트를 복사하여 HTML 구성요소 편집기에 붙여 넣는다. (PeriodicTable.txt 에는 6,000행이 넘는 코드가 들어 있다. 이 코드 모두를 구성요소 편집기에 붙여 넣어야 한다.)
- 저장 을 클릭한다.