DNAnalyzer

https://github.com/streetsciencecommunity/dnanalyzer
Admin
DNAnalyzer is an online game that engages citizens in DNA data analysis through interactive levels,...
Tokens:47,319
Snippets:219
Trust Score:4
Update:11 months ago
Show doc for...
Tokens:
Raw
### Full Setup of Reveal.js via Git and NPM

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/assets/reveal.js/README.md

These shell commands perform a full installation of reveal.js, cloning the repository, installing dependencies, and starting a local development server. Requires Git, Node.js (4.0.0 or later), and npm. Each command takes no input arguments and executes sequentially: clone repo, navigate directory, install deps, start server. Limitations include dependency on internet connection for cloning and npm installation, and assumes Git and npm are pre-installed.

```sh
$ git clone https://github.com/hakimel/reveal.js.git
```

```sh
$ cd reveal.js
```

```sh
$ npm install
```

```sh
$ npm start
```

--------------------------------

### Install and Run Socket.io Server for Multiplex

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/assets/reveal.js/README.md

Commands to install dependencies and run the Socket.io server for the Multiplex plugin. This server facilitates real-time slide synchronization.

```bash
npm install
node plugin/multiplex
```

--------------------------------

### Start PostgreSQL Server - Bash

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/docs/deployment.md

Starts the PostgreSQL server instance. Logs output to a logfile. Requires the database to be initialized.

```bash
pg_ctl -D dnanalyzer -l logfile start
```

--------------------------------

### Install Miniconda on Server - Bash

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/docs/deployment.md

Downloads and installs Miniconda for environment management. Initializes Conda for bash and zsh shells. Sets up the installer script automatically.

```bash
mkdir -p ~/miniconda3
wget https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-x86_64.sh -O ~/miniconda3/miniconda.sh
bash ~/miniconda3/miniconda.sh -b -u -p ~/miniconda3
rm -rf ~/miniconda3/miniconda.sh
~/miniconda3/bin/conda init bash
~/miniconda3/bin/conda init zsh
```

--------------------------------

### Install Server Tools - Bash

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/docs/deployment.md

Updates system and installs necessary tools for server deployment. Includes Git, Nginx, PostgreSQL, Python3, and virtualenv. Requires sudo access.

```bash
sudo apt update -y
sudo apt upgrade -y
```

```bash
sudo apt-get install git nginx -y
sudo apt install postgresql postgresql-contrib -y
sudo apt install python3-pip -y
sudo apt-get install python3-venv -y
```

--------------------------------

### Install Gunicorn and Run Flask App

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/docs/deployment.md

Installs the Gunicorn WSGI HTTP Server using pip and demonstrates how to run a Flask application. Assumes a wsgi.py file exists in the project root. It shows the expected output upon successful startup.

```bash
pip3 install gunicorn
vi {project root}/wsgi.py
gunicorn --bind 0.0.0.0:5000 wsgi:app
```

--------------------------------

### Install and Create Dokku Postgres Service

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/docs/deployment.md

Installs the Dokku Postgres plugin and creates a new PostgreSQL service named 'dnanalyzer' on the Dokku host. This service will be used by the application for database operations.

```bash
# on the Dokku host
sudo dokku plugin:install https://github.com/dokku/dokku-postgres.git

# create a postgres service with the name dnanalyzer
dokku postgres:create dnanalyzer
```

--------------------------------

### Launch DNAnalyzer Application - Python

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/docs/deployment.md

Runs the main application script using Python. Requires the environment and database to be set up. Starts the server locally.

```python
python app.py
```

--------------------------------

### Configure marked options in Reveal.js (JavaScript)

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/assets/reveal.js/README.md

Provides an example of initializing Reveal.js with custom marked options, enabling smartypants processing for Markdown. Shows where to pass markdown configuration within Reveal.initialize.

```JavaScript
Reveal.initialize({
	// Options which are passed into marked
	// See https://github.com/chjj/marked#options-1
	markdown: {
		smartypants: true
	}
});
```

--------------------------------

### Deploy Socket.io Multiplex Server with Now

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/assets/reveal.js/README.md

Command to deploy your own Multiplex server using the 'now' tool. This is recommended for mission-critical applications.

```bash
now plugin/multiplex
```

--------------------------------

### Install PostgreSQL Without Conda - Bash

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/docs/deployment.md

Installs PostgreSQL and its contrib package on Ubuntu. Requires sudo access. Sets up the database server for the project.

```bash
sudo apt install postgresql postgresql-contrib -y
```

--------------------------------

### Clone Repository - Bash

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/docs/deployment.md

Clones the DNAnalyzer project from GitHub using Git. Requires Git to be installed on the system. Takes no inputs and outputs the cloned repository locally.

```bash
git clone https://github.com/StreetScienceCommunity/DNAnalyzer.git
```

--------------------------------

### Create Conda Environment - Bash

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/docs/deployment.md

Creates a Conda environment from the environment.yml file. Requires Miniconda to be installed. Sets up the project's Python environment with specified dependencies.

```bash
conda env create -f environment.yml
```

--------------------------------

### Flask Application Factory Pattern (`app.py`)

Source: https://context7.com/streetsciencecommunity/dnanalyzer/llms.txt

Implements the Flask application factory pattern to create and configure the Flask application. It handles database configuration (local and Heroku/Dokku), extension initialization (SQLAlchemy, Migrate, Marshmallow), blueprint registration, and Flask-Login setup. Includes example routes and database table creation.

```python
from flask import Flask, render_template
from flask_login import LoginManager
from utils import db, ma, migrate
from db_config import DB_CONFIG
import os

def create_app():
    """Application factory pattern for Flask app creation"""
    app = Flask(__name__)
    app.secret_key = 'Imthesercretkeyhaha'

    # Database configuration
    app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False

    # Use DATABASE_URL environment variable (for Heroku/Dokku)
    if 'DATABASE_URL' in os.environ:
        app.config['SQLALCHEMY_DATABASE_URI'] = os.environ['DATABASE_URL'].replace(
            'postgres://', 'postgresql://'
        )
    else:
        # Local development configuration
        app.config['SQLALCHEMY_DATABASE_URI'] = 'postgresql://%s:%s@%s/%s' % (
            DB_CONFIG['USERNAME'],
            DB_CONFIG['PASSWORD'],
            DB_CONFIG['DB_HOST'],
            DB_CONFIG['DB_NAME']
        )

    # Initialize extensions
    db.init_app(app)
    migrate.init_app(app, db)
    ma.init_app(app)

    # Register blueprints
    from routes.main import bp
    app.register_blueprint(bp)

    # Configure Flask-Login
    login_manager = LoginManager()
    login_manager.login_view = 'dnapi.login'
    login_manager.init_app(app)

    from models.all_models import Users

    @login_manager.user_loader
    def load_user(id):
        """Load user by ID for Flask-Login session management"""
        return Users.query.get(int(id))

    return app

# Create application instance
app = create_app()

# Root routes
@app.route('/')
def index():
    """Home page"""
    return render_template("index.html")

@app.route('/about')
def about():
    """About page with project information"""
    return render_template("about.html")

# Create database tables
with app.app_context():
    db.create_all()

# Development server
if __name__ == '__main__':
    app.run(debug=True)

# Production deployment with Gunicorn:
# gunicorn app:app --bind 0.0.0.0:5000 --workers 4

# Environment variables required:
# - DATABASE_URL: PostgreSQL connection string
# - GALAXY_API_KEY: Galaxy platform API key for workflow evaluation

# Database configuration file (db_config.py):
DB_CONFIG = {
    'DB_HOST': 'localhost',
    'DB_PORT': 5432,
    'DB_NAME': 'dnanalyzer',
    'USERNAME': 'postgres',
    'PASSWORD': 'your_password'
}

```

--------------------------------

### Update Reveal.js Configuration Dynamically

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/assets/reveal.js/README.md

Demonstrates how to update Reveal.js settings after initialization. Shows examples for turning off auto-slide and setting a 5-second auto-slide interval.

```javascript
// Turn autoSlide off
Reveal.configure({ autoSlide: 0 });

// Start auto-sliding every 5s
Reveal.configure({ autoSlide: 5000 });
```

--------------------------------

### Install Dependencies Without Conda - Bash

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/docs/deployment.md

Installs project dependencies using pip. Requires Python and pip to be installed. Uses requirements.txt to specify packages; may need additional system packages like libjpeg-dev if build errors occur.

```bash
pip3 install -r requirements.txt
```

```bash
apt-get install libjpeg-dev zlib1g-dev
```

```bash
sudo pip install -U setuptools
```

--------------------------------

### Reveal.js: Overview Mode API and Toggling

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/assets/reveal.js/README.md

Details how to toggle and interact with Reveal.js's overview mode, which provides a zoomed-out view of all slides. Includes examples of event listeners for `overviewshown` and `overviewhidden`, and how to programmatically toggle the overview mode using `Reveal.toggleOverview()`.

```javascript
Reveal.addEventListener( 'overviewshown', function( event ) { /* ... */ } );
Reveal.addEventListener( 'overviewhidden', function( event ) { /* ... */ } );

// Toggle the overview mode programmatically
Reveal.toggleOverview();
```

--------------------------------

### Configure Reveal.js PostMessage Options

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/assets/reveal.js/README.md

Initializes reveal.js with configuration options to enable and control the postMessage API for inter-window communication and event dispatching.

```javascript
Reveal.initialize({
	...

	// Exposes the reveal.js API through window.postMessage
	postMessage: true,

	// Dispatches all reveal.js events to the parent window through postMessage
	postMessageEvents: false
});
```

--------------------------------

### Initialize Reveal.js Dependencies

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/assets/reveal.js/README.md

Configures optional third-party libraries for Reveal.js functionality. Dependencies are loaded in order with conditions and callbacks. Requires head.js for script loading.

```javascript
Reveal.initialize({
	dependencies: [
		// Cross-browser shim that fully implements classList - https://github.com/eligrey/classList.js/
		{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },

		// Interpret Markdown in <section> elements
		{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
		{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },

		// Syntax highlight for <code> elements
		{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },

		// Zoom in and out with Alt+click
		{ src: 'plugin/zoom-js/zoom.js', async: true },

		// Speaker notes
		{ src: 'plugin/notes/notes.js', async: true },

		// MathJax
		{ src: 'plugin/math/math.js', async: true }
	]
});
```

--------------------------------

### Configure Reveal.js Initialization

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/assets/reveal.js/test/examples/slide-backgrounds.html

Initializes reveal.js with various configuration options. This example sets centering, transition type, and background transition. Dependencies include the reveal.js library itself.

```javascript
Reveal.initialize({
  center: true,
  // rtl: true,
  transition: 'linear',
  // transitionSpeed: 'slow',
  // backgroundTransition: 'slide'
});
```

--------------------------------

### Activate Environment and Configure DB - Bash

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/docs/deployment.md

Activates Conda environment, installs requirements, and edits db_config.py. Assumes project is cloned and Conda is set up. Includes optional Pillow build fixes.

```bash
cd /path/to/the/project
conda activate myenv
pip3 install -r requirements.txt
vi db_config.py
```

```bash
apt-get install libjpeg-dev zlib1g-dev
```

--------------------------------

### PHP Function Example

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/assets/reveal.js/plugin/markdown/example.html

A simple PHP function definition with an associative array. Demonstrates basic PHP syntax for function declaration and array initialization. No external dependencies required.

```php
public function foo() { $foo = array( 'bar' => 'bar' ) }
```

--------------------------------

### Initialize Reveal.js with Default Configuration

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/assets/reveal.js/README.md

Initializes a Reveal.js presentation with default settings. Configures controls, progress bar, slide transitions, and other presentation behaviors. All values are optional and will default as specified.

```javascript
Reveal.initialize({

	// Display controls in the bottom right corner
	controls: true,

	// Display a presentation progress bar
	progress: true,

	// Set default timing of 2 minutes per slide
	defaultTiming: 120,

	// Display the page number of the current slide
	slideNumber: false,

	// Push each slide change to the browser history
	history: false,

	// Enable keyboard shortcuts for navigation
	keyboard: true,

	// Enable the slide overview mode
	overview: true,

	// Vertical centering of slides
	center: true,

	// Enables touch navigation on devices with touch input
	touch: true,

	// Loop the presentation
	loop: false,

	// Change the presentation direction to be RTL
	rtl: false,

	// Randomizes the order of slides each time the presentation loads
	shuffle: false,

	// Turns fragments on and off globally
	fragments: true,

	// Flags if the presentation is running in an embedded mode,
	// i.e. contained within a limited portion of the screen
	embedded: false,

	// Flags if we should show a help overlay when the questionmark
	// key is pressed
	help: true,

	// Flags if speaker notes should be visible to all viewers
	showNotes: false,

	// Global override for autolaying embedded media (video/audio/iframe)
	// - null: Media will only autoplay if data-autoplay is present
	// - true: All media will autoplay, regardless of individual setting
	// - false: No media will autoplay, regardless of individual setting
	autoPlayMedia: null,

	// Number of milliseconds between automatically proceeding to the
	// next slide, disabled when set to 0, this value can be overwritten
	// by using a data-autoslide attribute on your slides
	autoSlide: 0,

	// Stop auto-sliding after user input
	autoSlideStoppable: true,

	// Use this method for navigation when auto-sliding
	autoSlideMethod: Reveal.navigateNext,

	// Enable slide navigation via mouse wheel
	mouseWheel: false,

	// Hides the address bar on mobile devices
	hideAddressBar: true,

	// Opens links in an iframe preview overlay
	previewLinks: false,

	// Transition style
	transition: 'slide', // none/fade/slide/convex/concave/zoom

	// Transition speed
	transitionSpeed: 'default', // default/fast/slow

	// Transition style for full page slide backgrounds
	backgroundTransition: 'fade', // none/fade/slide/convex/concave/zoom

	// Number of slides away from the current that are visible
	viewDistance: 3,

	// Parallax background image
	parallaxBackgroundImage: '', // e.g. "'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'"

	// Parallax background size
	parallaxBackgroundSize: '', // CSS syntax, e.g. "2100px 900px"

	// Number of pixels to move the parallax background per slide
	// - Calculated automatically unless specified
	// - Set to 0 to disable movement along an axis
	parallaxBackgroundHorizontal: null,
	parallaxBackgroundVertical: null,

	// The display mode that will be used to show slides
	display: 'block'

});
```

--------------------------------

### Configure Reveal.js Multiplex Master and Client

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/assets/reveal.js/README.md

JavaScript configuration for Reveal.js to act as both a master and client for a Socket.io Multiplex server. This enables bidirectional slide synchronization.

```javascript
Reveal.initialize({
	// other options...

	multiplex: {
		// Example values. To generate your own, see the socket.io server instructions.
		secret: '13652805320794272084', // Obtained from the socket.io server. Gives this (the master) control of the presentation
		id: '1ea875674b17ca76', // Obtained from socket.io server
		url: 'example.com:80' // Location of your socket.io server
	},

	// Don't forget to add the dependencies
	dependencies: [
		{ src: '//cdn.socket.io/socket.io-1.3.5.js', async: true },
		{ src: 'plugin/multiplex/master.js', async: true },
		{ src: 'plugin/multiplex/client.js', async: true }

		// other dependencies...
	]
});
```

--------------------------------

### Create Systemd Service for Flask Application

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/docs/deployment.md

Sets up a Systemd service file to manage the Flask application using Gunicorn. It includes steps for creating the service file, configuring user, working directory, environment, and the execution command. It also covers setting ownership, permissions, and managing the service lifecycle (start, enable, status).

```bash
vi /etc/systemd/system/flask.service

[Unit]
Description=Gunicorn instance to serve Flask
After=network.target
[Service]
User=root
Group=www-data
WorkingDirectory=/root/project
Environment="PATH=/root/project/venv/bin"
ExecStart=/root/project/venv/bin/gunicorn --bind 0.0.0.0:5000 wsgi:app
[Install]
WantedBy=multi-user.target

chown -R root:www-data /root/project
chmod -R 775 /root/project
systemctl daemon-reload
systemctl start flask
systemctl enable flask
systemctl status flask
```

--------------------------------

### Setup Speaker Layout Dropdown

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/assets/reveal.js/plugin/notes-server/notes.html

Initializes the speaker layout dropdown menu by populating it with available layout options and setting up event listeners. Depends on SPEAKER_LAYOUTS global object. Automatically restores the last used layout from local storage.

```javascript
function setupLayout() { layoutDropdown = document.querySelector( '.speaker-layout-dropdown' ); layoutLabel = document.querySelector( '.speaker-layout-label' ); // Render the list of available layouts for( var id in SPEAKER_LAYOUTS ) { var option = document.createElement( 'option' ); option.setAttribute( 'value', id ); option.textContent = SPEAKER_LAYOUTS[ id ]; layoutDropdown.appendChild( option ); } // Monitor the dropdown for changes layoutDropdown.addEventListener( 'change', function( event ) { setLayout( layoutDropdown.value ); }, false ); // Restore any currently persisted layout setLayout( getLayout() ); }
```

--------------------------------

### Handle Reveal.js Ready Event

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/assets/reveal.js/README.md

Executes code when Reveal.js finishes loading non-async dependencies. Provides access to current slide and indices. A .ready CSS class is also added to .reveal element.

```javascript
Reveal.addEventListener( 'ready', function( event ) {
	// event.currentSlide, event.indexh, event.indexv
} );
```

--------------------------------

### Configure Reveal.js Multiplex Client

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/assets/reveal.js/README.md

JavaScript configuration for Reveal.js to connect as a client to a Socket.io Multiplex server. This allows the client to receive slide change events from a master.

```javascript
Reveal.initialize({
	// other options...

	multiplex: {
		// Example values. To generate your own, see the socket.io server instructions.
		secret: null, // null so the clients do not have control of the master presentation
		id: '1ea875674b17ca76', // id, obtained from socket.io server
		url: 'example.com:80' // Location of your socket.io server
	},

	// Don't forget to add the dependencies
	dependencies: [
		{ src: '//cdn.socket.io/socket.io-1.3.5.js', async: true },
		{ src: 'plugin/multiplex/client.js', async: true }

		// other dependencies...
	]
});
```

--------------------------------

### Autoplay Embedded HTML5 Video

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/assets/reveal.js/README.md

Enables autoplay for embedded HTML5 video elements by adding the `data-autoplay` attribute. This requires no external dependencies.

```html
<video data-autoplay src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
```

--------------------------------

### Create basic reveal.js presentation markup (HTML)

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/assets/reveal.js/README.md

This snippet demonstrates the minimal HTML required to initialise a reveal.js presentation, including stylesheet links, the required container elements, and the JavaScript initialise call. It depends on the reveal.js library and its CSS files being available at the specified paths. The output is a functional two‑slide deck that can be extended with additional sections.

```HTML
<html>
	<head>
		<link rel=\"stylesheet\" href=\"css/reveal.css\">
		<link rel=\"stylesheet\" href=\"css/theme/white.css\">
	</head>
	<body>
		<div class=\"reveal\">
			<div class=\"slides\">
				<section>Slide 1</section>
				<section>Slide 2</section>
			</div>
		</div>
		<script src=\"js/reveal.js\"></script>
		<script>
			Reveal.initialize();
		</script>
	</body>
</html>
```

--------------------------------

### Run Local Python HTTP Server

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/docs/add_new_slide_video.md

This command starts a local Python HTTP server on port 9876. It's used to serve the DNAnalyzer project files, enabling local viewing of slide decks. No external dependencies are required beyond Python 3.

```shell
python3 -m http.server 9876
```

--------------------------------

### HTML Video Backgrounds for reveal.js

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/assets/reveal.js/README.md

Embeds video as a slide background. Supports looping and muting audio. The `data-background-size` attribute can be set to 'cover' for full-screen or 'contain' for letterboxing.

```html
<section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm" data-background-video-loop data-background-video-muted>
	<h2>Video</h2>
</section>
```

--------------------------------

### Configure Presentation Size in Reveal.js

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/assets/reveal.js/README.md

Sets the base size and scaling behavior for a Reveal.js presentation. Includes width, height, margin, and scale constraints. The framework will automatically scale presentations based on these values.

```javascript
Reveal.initialize({

	...

	// The "normal" size of the presentation, aspect ratio will be preserved
	// when the presentation is scaled to fit different resolutions. Can be
	// specified using percentage units.
	width: 960,
	height: 700,

	// Factor of the display size that should remain empty around the content
	margin: 0.1,

	// Bounds for smallest/largest possible scale to apply to content
	minScale: 0.2,
	maxScale: 1.5

});
```

```javascript
Reveal.initialize({

	...

	width: "100%",
	height: "100%",
	margin: 0,
	minScale: 1,
	maxScale: 1
});
```

--------------------------------

### Reveal.js: Fragment Effects and Styling

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/assets/reveal.js/README.md

Illustrates the use of fragments to progressively reveal elements on a slide. Shows how to apply various built-in fragment styles (grow, shrink, fade-out, fade-up, current-visible, highlight) and control their display order using `data-fragment-index`.

```html
<section>
	<p class="fragment grow">grow</p>
	<p class="fragment shrink">shrink</p>
	<p class="fragment fade-out">fade-out</p>
	<p class="fragment fade-up">fade-up (also down, left and right!)</p>
	<p class="fragment current-visible">visible only once</p>
	<p class="fragment highlight-current-blue">blue only once</p>
	<p class="fragment highlight-red">highlight-red</p>
	<p class="fragment highlight-green">highlight-green</p>
	<p class="fragment highlight-blue">highlight-blue</p>
</section>

<section>
	<span class="fragment fade-in">
		<span class="fragment fade-out">I'll fade in, then out</span>
	</span>
</section>

<section>
	<p class="fragment" data-fragment-index="3">Appears last</p>
	<p class="fragment" data-fragment-index="1">Appears first</p>
	<p class="fragment" data-fragment-index="2">Appears second</p>
</section>
```

--------------------------------

### MathJax Configuration for reveal.js

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/assets/reveal.js/test/examples/math.html

This JavaScript snippet configures the reveal.js presentation to use the MathJax plugin. It specifies the MathJax version and configuration, along with dependencies for the MathJax plugin itself. This setup is crucial for rendering LaTeX-formatted mathematical equations.

```javascript
Reveal.initialize({
  history: true,
  transition: 'linear',
  math: {
    // mathjax: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js',
    config: 'TeX-AMS_HTML-full'
  },
  dependencies: [
    { src: '../../lib/js/classList.js' },
    { src: '../../plugin/math/math.js', async: true }
  ]
});
```

--------------------------------

### Listen for Reveal.js Slide Change Events

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/assets/reveal.js/README.md

Sets up an event listener to capture post messages from a reveal.js presentation. It specifically listens for 'slidechanged' events within the 'reveal' namespace and extracts slide state information.

```javascript
window.addEventListener( 'message', function( event ) {
	var data = JSON.parse( event.data );
	if( data.namespace === 'reveal' && data.eventName ==='slidechanged' ) {
		// Slide changed, see data.state for slide number
	}
} );
```

--------------------------------

### Setup and Manage Speaker View Layouts

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/assets/reveal.js/plugin/notes/notes.html

Initializes and manages the speaker view layout selection. It populates a dropdown with available layouts, persists the selected layout in local storage, and applies it to the document body. Dependencies include SPEAKER_LAYOUTS, getLayout, and setLayout functions.

```javascript
function setupLayout() {
    layoutDropdown = document.querySelector( '.speaker-layout-dropdown' );
    layoutLabel = document.querySelector( '.speaker-layout-label' );

    // Render the list of available layouts for( var id in SPEAKER_LAYOUTS ) {
        var option = document.createElement( 'option' );
        option.setAttribute( 'value', id );
        option.textContent = SPEAKER_LAYOUTS[ id ];
        layoutDropdown.appendChild( option );
    }

    // Monitor the dropdown for changes
    layoutDropdown.addEventListener( 'change', function( event ) {
        setLayout( layoutDropdown.value );
    }, false );

    // Restore any currently persisted layout
    setLayout( getLayout() );
}

/**
 * Sets a new speaker view layout. The layout is persisted
 * in local storage.
 */
function setLayout( value ) {
    var title = SPEAKER_LAYOUTS[ value ];
    layoutLabel.innerHTML = 'Layout' + ( title ? ( ': ' + title ) : '' );
    layoutDropdown.value = value;
    document.body.setAttribute( 'data-speaker-layout', value );

    // Persist locally
    if( window.localStorage ) {
        window.localStorage.setItem( 'reveal-speaker-layout', value );
    }
}

/**
 * Returns the ID of the most recently set speaker layout
 * or our default layout if none has been set.
 */
function getLayout() {
    if( window.localStorage ) {
        var layout = window.localStorage.getItem( 'reveal-speaker-layout' );
        if( layout ) {
            return layout;
        }
    }

    // Default to the first record in the layouts hash
    for( var id in SPEAKER_LAYOUTS ) {
        return id;
    }
}
```

--------------------------------

### Reveal.js: Linking Between Slides and Navigation

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/assets/reveal.js/README.md

Demonstrates how to create internal links to specific slides by targeting slide indices or IDs. Also shows how to implement relative navigation controls (left, right, up, down, previous, next) using predefined classes.

```html
<a href="#/2/2">Link</a>
<a href="#/some-slide">Link</a>

<a href="#" class="navigate-left">
<a href="#" class="navigate-right">
<a href="#" class="navigate-up">
<a href="#" class="navigate-down">
<a href="#" class="navigate-prev"> <!-- Previous vertical or horizontal slide -->
<a href="#" class="navigate-next"> <!-- Next vertical or horizontal slide -->
```

--------------------------------

### Configure Server-Side Speaker Notes for Reveal.js

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/assets/reveal.js/README.md

This JavaScript snippet configures Reveal.js to use server-side speaker notes. It requires socket.io.js and client.js from the notes-server plugin. The plugin allows notes to be displayed on a separate device.

```javascript
Reveal.initialize({
	...

	dependencies: [
		{ src: 'socket.io/socket.io.js', async: true },
		{ src: 'plugin/notes-server/client.js', async: true }
	]
});
```

--------------------------------

### Configure Reveal.js Multiplex Client Presentation

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/assets/reveal.js/README.md

This JavaScript configuration sets up a Reveal.js client presentation for the multiplex plugin. It includes dependencies for socket.io and client.js, and requires an id and URL for the socket.io server. The 'secret' is set to null to prevent clients from controlling the master presentation. This allows audience members to view slides in real-time on their devices.

```javascript
Reveal.initialize({
	// other options...

	multiplex: {
		// Example values. To generate your own, see the socket.io server instructions.
		secret: null, // null so the clients do not have control of the master presentation
		id: '1ea875674b17ca76', // id, obtained from socket.io server
		url: 'https://reveal-js-multiplex-ccjbegmaii.now.sh' // Location of socket.io server
	},

	// Don't forget to add the dependencies
	dependencies: [
		{ src: '//cdn.socket.io/socket.io-1.3.5.js', async: true },
		{ src: 'plugin/multiplex/client.js', async: true }

		// other dependencies...
	]
});
```

--------------------------------

### Reveal.js: Fragment Event Listeners

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/assets/reveal.js/README.md

Shows how to attach event listeners to detect when a fragment is shown or hidden. This is useful for triggering actions in external libraries, such as MathJax, when fragments change visibility.

```javascript
Reveal.addEventListener( 'fragmentshown', function( event ) {
	// event.fragment = the fragment DOM element
} );
Reveal.addEventListener( 'fragmenthidden', function( event ) {
	// event.fragment = the fragment DOM element
} );
```

--------------------------------

### HTML Slide Transitions for reveal.js

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/assets/reveal.js/README.md

Configures slide transitions globally or per slide in reveal.js. The `data-transition` attribute overrides the global setting, and `data-transition-speed` controls the speed ('fast', 'slow').

```html
<section data-transition="zoom">
	<h2>This slide will override the presentation transition and zoom!</h2>
</section>

<section data-transition-speed="fast">
	<h2>Choose from three transition speeds: default, fast or slow!</h2>
</section>

<section data-transition="slide">
    The train goes on …
</section>
<section data-transition="slide">
    and on …
</section>
<section data-transition="slide-in fade-out">
    and stops.
</section>
<section data-transition="fade-in slide-out">
    (Passengers entering and leaving)
</section>
<section data-transition="slide">
    And it starts again.
</section>
```

--------------------------------

### Configure Reveal.js Multiplex Master Presentation

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/assets/reveal.js/README.md

This JavaScript configuration sets up Reveal.js as a master presentation for the multiplex plugin. It includes dependencies for socket.io and master.js, and requires a secret, id, and URL for the socket.io server. This configuration enables real-time slide synchronization for client presentations.

```javascript
Reveal.initialize({
	// other options...

	multiplex: {
		// Example values. To generate your own, see the socket.io server instructions.
		secret: '13652805320794272084', // Obtained from the socket.io server. Gives this (the master) control of the presentation
		id: '1ea875674b17ca76', // Obtained from socket.io server
		url: 'https://reveal-js-multiplex-ccjbegmaii.now.sh' // Location of socket.io server
	},

	// Don't forget to add the dependencies
	dependencies: [
		{ src: '//cdn.socket.io/socket.io-1.3.5.js', async: true },
		{ src: 'plugin/multiplex/master.js', async: true },

		// and if you want speaker notes
		{ src: 'plugin/notes-server/client.js', async: true }

		// other dependencies...
	]
});
```

--------------------------------

### Reveal.js: Code Syntax Highlighting with highlight.js

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/assets/reveal.js/README.md

Demonstrates how to enable code syntax highlighting using highlight.js within Reveal.js presentations. Covers attributes like `data-trim` to remove whitespace and `data-noescape` to prevent HTML escaping, useful for highlighting specific code segments with tags like `<mark>`.

```html
<section>
	<pre><code data-trim data-noescape>
(def lazy-fib
  (concat
   [0 1]
   <mark>((fn rfib [a b]</mark>
        (lazy-cons (+ a b) (rfib b (+ a b)))) 0 1)))
	</code></pre>
</section>
```

--------------------------------

### Enable inline Markdown slides (HTML)

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/assets/reveal.js/README.md

Demonstrates how to enable Markdown for a slide by adding the data-markdown attribute to a <section> and placing the Markdown content inside a <textarea data-template>. This approach embeds the Markdown directly in the HTML and is parsed by the marked library at runtime.

```HTML
<section data-markdown>
	<textarea data-template>
		## Page title

		A paragraph with some text and a [link](http://hakim.se).
	</textarea>
</section>
```

--------------------------------

### GET /level/<level_id>/chapter/<chapter_id>

Source: https://context7.com/streetsciencecommunity/dnanalyzer/llms.txt

Retrieves and displays quiz questions for a specific chapter. It returns an HTML page with chapter metadata and a list of questions including choices, types, and other details.

```APIDOC
## GET /level/<level_id>/chapter/<chapter_id>

### Description
Retrieves and displays quiz questions for a specific chapter with all choices and metadata.

### Method
GET

### Endpoint
/level/<level_id>/chapter/<chapter_id>

### Parameters
#### Path Parameters
- **level_id** (integer) - Required - The ID of the level.
- **chapter_id** (integer) - Required - The ID of the chapter.

#### Query Parameters
None

#### Request Body
None

### Request Example
GET /level/1/chapter/1

### Response
#### Success Response (200)
HTML page with:
- Chapter metadata (name, total_score, url)
- List of questions with id, title, description, type, hint, explanation, point value, and choices with content and correctness.
Question types: choose_one, choose_many, grid, grid_checkbox, open.

#### Response Example
HTML content with embedded data.
```

--------------------------------

### Add slide attributes via HTML comments (HTML)

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/assets/reveal.js/README.md

Demonstrates applying slide-level attributes, such as background color, via an HTML comment inside a <script type="text/template"> block. Allows dynamic styling of slides generated from Markdown.

```HTML
<section data-markdown>
	<script type="text/template">
	<!-- .slide: data-background="#ff0000" -->
		Markdown content
	</script>
</section>
```

--------------------------------

### Configure MathJax Plugin in Reveal.js

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/assets/reveal.js/README.md

This JavaScript snippet initializes reveal.js with the MathJax plugin to display LaTeX-based math equations. It requires the MathJax library, either loaded remotely from a CDN or locally for offline use. The config object specifies the MathJax source and configuration; outputs a configured presentation with math rendering capabilities. Limitations include potential loading delays from remote CDN and the need for LaTeX syntax knowledge.

```js
Reveal.initialize({

	// other options ...

	math: {
		mathjax: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js',
		config: 'TeX-AMS_HTML-full'  // See http://docs.mathjax.org/en/latest/config-files.html
	},

	dependencies: [
		{ src: 'plugin/math/math.js', async: true }
	]

});
```

--------------------------------

### HTML Image Backgrounds for reveal.js

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/assets/reveal.js/README.md

Configures image backgrounds for slides using HTML attributes. Supports various CSS background properties like size and repeat. GIFs restart on slide open. GIFs restart when the slide opens.

```html
<section data-background-image="http://example.com/image.png">
	<h2>Image</h2>
</section>
<section data-background-image="http://example.com/image.png" data-background-size="100px" data-background-repeat="repeat">
	<h2>This background image will be sized to 100px and repeated</h2>
</section>
```

--------------------------------

### Navigate Reveal.js Slide via PostMessage

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/assets/reveal.js/README.md

Sends a post message to control a reveal.js presentation instance in another window, specifically to navigate to a target slide number. The '*' for targetOrigin allows messages to any origin, which may be a security risk in production.

```javascript
<window>.postMessage( JSON.stringify({ method: 'slide', args: [ 2 ] }), '*' );
```

--------------------------------

### Reveal.js JavaScript API for Presentation Control (JavaScript)

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/assets/reveal.js/README.md

This extensive JavaScript API allows programmatic control over the reveal.js presentation. It includes functions for navigation (moving between slides, fragments), controlling presentation states (overview, pause, auto-slide), toggling help overlays, dynamically configuring settings, and retrieving various states and elements of the presentation. Dependencies include the reveal.js library.

```javascript
// Navigation
Reveal.slide( indexh, indexv, indexf );
Reveal.left();
Reveal.right();
Reveal.up();
Reveal.down();
Reveal.prev();
Reveal.next();
Reveal.prevFragment();
Reveal.nextFragment();

// Randomize the order of slides
Reveal.shuffle();

// Toggle presentation states, optionally pass true/false to force on/off
Reveal.toggleOverview();
Reveal.togglePause();
Reveal.toggleAutoSlide();

// Shows a help overlay with keyboard shortcuts, optionally pass true/false
// to force on/off
Reveal.toggleHelp();

// Change a config value at runtime
Reveal.configure({ controls: true });

// Returns the present configuration options
Reveal.getConfig();

// Fetch the current scale of the presentation
Reveal.getScale();

// Retrieves the previous and current slide elements
Reveal.getPreviousSlide();
Reveal.getCurrentSlide();

Reveal.getIndices();        // { h: 0, v: 0 } }
Reveal.getPastSlideCount();
Reveal.getProgress();       // (0 == first slide, 1 == last slide)
Reveal.getSlides();         // Array of all slides
Reveal.getTotalSlides();    // total number of slides

// Returns the speaker notes for the current slide
Reveal.getSlideNotes();

// State checks
Reveal.isFirstSlide();
Reveal.isLastSlide();
Reveal.isOverview();
Reveal.isPaused();
Reveal.isAutoSliding();
```

--------------------------------

### Dynamically Load PDF or Paper Stylesheet

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/assets/reveal.js/README.md

Injects a stylesheet link into the document's head. It conditionally loads 'css/print/pdf.css' if the URL query string contains 'print-pdf', otherwise it loads 'css/print/paper.css'. This script should be placed in the HTML's HEAD section.

```html
<script>
	var link = document.createElement( 'link' );
	link.rel = 'stylesheet';
	link.type = 'text/css';
	link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
	document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
```

--------------------------------

### Reveal.js: Configuring Slide Numbers

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/assets/reveal.js/README.md

Explains how to configure and display slide numbers in Reveal.js presentations. Shows how to enable basic slide numbering, customize the numbering format (e.g., 'h.v', 'c/t'), and control where slide numbers are displayed (all views, speaker view, or print view).

```javascript
// Shows the slide number using default formatting
Reveal.configure({ slideNumber: true });

// Slide number formatting can be configured using these variables:
//  "h.v": 	horizontal . vertical slide number (default)
//  "h/v": 	horizontal / vertical slide number
//    "c": 	flattened slide number
//  "c/t": 	flattened slide number / total slides
Reveal.configure({ slideNumber: 'c/t' });

// Control which views the slide number displays on using the "showSlideNumber" value:
//     "all": show on all views (default)
// "speaker": only show slide numbers on speaker notes view
//   "print": only show slide numbers when printing to PDF
Reveal.configure({ showSlideNumber: 'speaker' });

```

--------------------------------

### Load external Markdown file (HTML)

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/assets/reveal.js/README.md

Shows how to load Markdown content from an external file using the data-markdown attribute with a filename and customize slide separation using data-separator, data-separator-vertical, and data-separator-notes attributes. Useful for maintaining slides in separate .md files.

```HTML
<section data-markdown="example.md"  
		data-separator="^\n\n\n"  
		data-separator-vertical="^\n\n"  
		data-separator-notes="^Note:"  
		data-charset="iso-8859-15">
</section>
```

--------------------------------

### Paper Writing Interface with API Interaction

Source: https://context7.com/streetsciencecommunity/dnanalyzer/llms.txt

This Python code demonstrates how to interact with a local server to retrieve and submit data for a scientific paper writing interface. It uses the `requests` library to handle sessions, login, GET requests for initial data, and POST requests for submitting the paper. The backend aggregates user answers from previous chapters to pre-populate sections like Introduction, Methods, and Results.

```python
# GET /paper_writing?ifFinished=False
# POST /paper_writing/submit
# Requires authentication

import requests

session = requests.Session()
session.post('http://localhost:5000/login', data={
    'username': 'scientist_jane',
    'password': 'secure123'
})

# GET paper writing page (initial load)
response = session.get('http://localhost:5000/paper_writing?ifFinished=False')

# Backend data aggregation:
# 1. Pre-populated Introduction (static text about Kombucha research)
# 2. Methods section from Level 3, Chapter 2 open answers
# 3. Results section from Level 3, Chapter 3 open answers

# SQL query for aggregation:
# SELECT question.transition_sentence, answer
# FROM open_answer, question
# WHERE question.id = open_answer.question_id
#   AND user_id = {user_id}
#   AND question.chapter_id = {chapter_id}

# Example aggregated text:
methods = ""
for transition_sentence, answer in methods_answers:
    methods += transition_sentence + " " + answer + " "

# Paper sections presented:
# - Introduction: Pre-written text about Kombucha microbiome research
# - Methods: User's answers from Chapter 2 with transition sentences
# - Results: User's answers from Chapter 3 with transition sentences
# - Discussion: User must write (form fields)
# - Conclusion: User must write (form fields)

# Submit completed paper
paper_data = {
    '15': 'Our findings confirm the complex microbial diversity...',  # Question 15
    '16': 'The Galaxy platform proved highly effective...',  # Question 16
    '17': 'Future research should explore temporal changes...'  # Question 17
}

submit_response = session.post('http://localhost:5000/paper_writing/submit', data=paper_data)

# Submission process:
# 1. Calls store_quiz_results(12, form_data)  # Chapter 12 = Level 3, Chapter 4
# 2. Stores all open answers in OpenAnswer table
# 3. Calculates and stores score (full points if answered)
# 4. Redirects to /paper_writing?ifFinished=True

# View completed paper
completed_response = session.get('http://localhost:5000/paper_writing?ifFinished=True')
# Returns full paper with all sections including user's submission

```

--------------------------------

### Create Dokku Application

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/docs/deployment.md

Creates a new application named 'dnanalyzer' on a Dokku host. This command initializes the application environment within Dokku.

```bash
# on the Dokku host
dokku apps:create dnanalyzer
```

--------------------------------

### Add element attributes via HTML comments (HTML)

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/assets/reveal.js/README.md

Illustrates adding fragment and data attributes to individual Markdown list items using HTML comment syntax within a <script type="text/template"> block. Enables fine-grained control over element behavior in Reveal.js.

```HTML
<section data-markdown>
	<script type="text/template">
		- Item 1 <!-- .element: class="fragment" data-fragment-index="2" -->
		- Item 2 <!-- .element: class="fragment" data-fragment-index="1" -->
	</script>
</section>
```

--------------------------------

### Manage Presentation State with getState and setState (JavaScript)

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/assets/reveal.js/README.md

This JavaScript code demonstrates how to capture and restore the presentation's state using reveal.js. `Reveal.getState()` returns an object representing the current presentation state (e.g., current slide), which can be serialized (e.g., JSON.stringified) and stored. `Reveal.setState(state)` later restores the presentation to that captured state. This is useful for persisting user progress or for implementing undo functionality.

```javascript
Reveal.slide( 1 );
// we're on slide 1

var state = Reveal.getState();

Reveal.slide( 3 );
// we're on slide 3

Reveal.setState( state );
// we're back on slide 1
```

--------------------------------

### Implementing Speaker Notes in Reveal.js Slides

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/assets/reveal.js/README.md

Speaker notes in Reveal.js are added per slide using aside elements, data-notes attributes, or Markdown delimiters for enhanced presentations. Notes remain hidden from the audience but appear in the speaker view (accessed via 's' key), with options for timers, pacing, and inclusion in PDF exports or public display. Requires a local web server for full functionality when used locally.

```html
&lt;section&gt;
	&lt;h2&gt;Some Slide&lt;/h2&gt;

	&lt;aside class="notes"&gt;
		Oh hey, these are some notes. They&apos;ll be hidden in your presentation, but you can see them if you open the speaker notes window (hit &apos;s&apos; on your keyboard).
	&lt;/aside&gt;
&lt;/section&gt;
```

```html
&lt;section data-notes="Something important"&gt;&lt;/section&gt;
```

```html
&lt;section data-markdown="example.md" data-separator="^\n\n\n" data-separator-vertical="^\n\n" data-separator-notes="^Note:"&gt;&lt;/section&gt;

# Title
## Sub-title

Here is some content...

Note:
This will only display in the notes window.
```

--------------------------------

### Create Inner Database - Bash

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/docs/deployment.md

Creates a database owned by the specified non-superuser. Requires the user to exist. Sets up the project's database schema.

```bash
createdb --owner=<mynonsuperuser> dnanalyzer
```

--------------------------------

### Configure PostgreSQL on Server - Bash

Source: https://github.com/streetsciencecommunity/dnanalyzer/blob/main/docs/deployment.md

Creates database, user, and grants privileges via psql. Edits pg_hba.conf for password authentication and restarts service. Requires sudo access and knowledge of PostgreSQL version.

```bash
sudo -u postgres psql
create database {nameOfTheDatabaseYouWant};
create user {usernameYouWant} with encrypted password '{yourPassword}';
grant all privileges on database {nameOfTheDatabaseYouWant} to {usernameYouWant};
exit
```

```bash
sudo vi /etc/postgresql/{Your postgres version}/main/pg_hba.conf
sudo systemctl restart postgresql
```
Tokens:
Raw