14: Interactive Elements
- Page ID
- 406098
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
\( \newcommand{\dsum}{\displaystyle\sum\limits} \)
\( \newcommand{\dint}{\displaystyle\int\limits} \)
\( \newcommand{\dlim}{\displaystyle\lim\limits} \)
\( \newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\)
( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\id}{\mathrm{id}}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\kernel}{\mathrm{null}\,}\)
\( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\)
\( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\)
\( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\AA}{\unicode[.8,0]{x212B}}\)
\( \newcommand{\vectorA}[1]{\vec{#1}} % arrow\)
\( \newcommand{\vectorAt}[1]{\vec{\text{#1}}} % arrow\)
\( \newcommand{\vectorB}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vectorC}[1]{\textbf{#1}} \)
\( \newcommand{\vectorD}[1]{\overrightarrow{#1}} \)
\( \newcommand{\vectorDt}[1]{\overrightarrow{\text{#1}}} \)
\( \newcommand{\vectE}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash{\mathbf {#1}}}} \)
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\(\newcommand{\longvect}{\overrightarrow}\)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
\(\newcommand{\ket}[1]{\left| #1 \right>}\)
\(\newcommand{\bra}[1]{\left< #1 \right|}\)
\(\newcommand{\braket}[2]{\left< #1 \vphantom{#2} \right| \left. #2 \vphantom{#1} \right>}\)
\(\newcommand{\braopket}[3]{\left< #1 \vphantom{#2}\vphantom{#3} \right| #2 \vphantom{#1}\vphantom{#3} \left| #3 \vphantom{#1}\vphantom{#2} \right>}\)
\(\newcommand{\qmvec}[1]{\mathbf{\vec{#1}}}\)
\(\newcommand{\op}[1]{\hat{\mathbf{#1}}}\)
\(\newcommand{\expect}[1]{\langle #1 \rangle}\)
\(\newcommand{\dfn}[1]{\emph{\textbf{#1}}}\)
- 14.1: Interactive Figures
- This page explains the use of interactive figures and simulations from the textbook's Ancillary Materials, detailing how to embed these resources using transclusion techniques. It highlights various interactive tools, including virtual labs and concept tests, with examples like CalcPlot3D and PhET simulations, emphasizing their role in enhancing educational content and improving learning experiences.
- 14.2: Jupyter Notebooks (Executable Programming Code and Figures)
- 14.2.1: How to Incorporate Data Files in Your Code Blocks- For C++
- 14.2.2: How to Incorporate Data Files in Your Code Blocks- For Julia
- 14.2.3: How to Incorporate Data Files in Your Code Blocks- For Octave
- 14.2.4: How to Incorporate Data Files in Your Code Blocks- For Python
- 14.2.5: How to Incorporate Data Files in Your Code Blocks- For R
- 14.2.6: How to Incorporate Data Files in Your Code Blocks- For SageMath
- 14.2.7: Installing custom packages
- 14.2.7.1: Documentation of Supported Kernels
- 14.2.8: Using ipywidgets for Interactivity
- 14.2.8.1: Enabling and Using Interactive Matplotlib Features
- 14.2.9: Jupyter example
- 14.2.8.2: Using ipyleaflet for Interactive Mapping
- 14.2.8.3: Using ipyvolume for 3D plotting
- 14.2.8.4: Using nglview to view molecular structures and trajectories
- 14.2.8.5: Using pythreejs to generate and view three-dimensional models
- 14.2.8.6: Using bqplot to make interactive plots
- 14.2.8.7: Using IPyCytoscape to visualize graphs
- 14.3: Interactive Molecules and Proteins – Direct Embedding
- This page provides a detailed guide for embedding an interactive protein or chemical into a webpage, covering steps from selecting the page to editing the code with a PDB code. It includes instructions for using toolbars and templates, as well as reviewing modifications. An advanced Molecule Generator is introduced, suggesting additional dynamic options for users.
- 14.4: Interactive Molecule and Protein – Molecule Generator
- This page details the seven steps for embedding interactive proteins or molecules via a molecular generator. It covers preparing an image by selecting a protein's PDB ID, copying the generated code, editing the desired page to insert the code into a Dekiscript block, saving the changes, enabling the embedding option, and refreshing the page to display the embedded protein. Key steps are highlighted: image preparation, code insertion, and final verification.
- 14.5: Interactive Molecule and Protein – Reference Options
- This page offers a comprehensive overview of Data-* attributes utilized in molecular visualization tools like GLmol, 3Dmol, and JSmol. It details attributes such as `id`, `height`, and `width`, along with options for visual enhancements like borders and labels. Specific customization features for GLmol include color modes, display styles, and beta sheet roughness settings.
- 14.6: Adding H5P (formative) Activities
- This page explains how to integrate interactive H5P technology into the LibreTexts platform for formative use without grading. It details a three-step process for embedding H5P activities: creating or finding an activity, copying its ID number, and inserting it into a template. The page also notes the importance of a dedicated server for H5P activities and encourages users to utilize or create their own activities as needed.
- 14.7: H5P
- This page discusses H5P, a user-friendly framework for creating interactive HTML5 content within the LibreTexts platform. It highlights its role in formative and summative assessments, account creation for users, and the ability to embed exercises via ID numbers. Additionally, it mentions a collaborative Spanish H5P database and provides instructions for users to enhance engagement and content development.


