% ============================================================
%  IEEE QSEEC 2026 Submission
%  Title: An Interactive Web-Based Pedagogical Tool for
%         Teaching the Quantum Approximate Optimization
%         Algorithm
% ============================================================
\documentclass[conference]{IEEEtran}

\IEEEoverridecommandlockouts
% ---- Packages -----------------------------------------------
\usepackage{cite}
\usepackage{amsmath,amssymb,amsfonts}
\usepackage{algorithmic}
\usepackage{graphicx}
\usepackage{textcomp}
\usepackage{xcolor}
\usepackage{hyperref}
\usepackage{booktabs}
\usepackage{multirow}
\usepackage{url}

\hypersetup{
  colorlinks=true,
  linkcolor=blue,
  citecolor=blue,
  urlcolor=blue
}

% ---- Title & Authors ----------------------------------------
\begin{document}

\title{An Interactive Web-Based Pedagogical Tool for Teaching the
       Quantum Approximate Optimization Algorithm}

\author{
  \IEEEauthorblockN{[Author Name]}
  \IEEEauthorblockA{
    \textit{[Department / Institute]}\\
    [Institution Name]\\
    [City, Country]\\
    [email@institution.edu]
  }
}

\maketitle

% ============================================================
% ABSTRACT
% ============================================================
\begin{abstract}
The Quantum Approximate Optimization Algorithm (QAOA) sits at the
intersection of combinatorial optimization and near-term quantum
computing, yet its pedagogical treatment remains scattered across
advanced research literature.
We present an open-source, browser-based interactive tool built with
Streamlit and Qiskit that guides learners through the complete QAOA
pipeline across three progressively complex problem modules:
standard unconstrained optimization, equality-constrained optimization
via quadratic penalty methods, and inequality-constrained optimization
via slack variables.
Each module follows a uniform six-step pedagogical scaffold---problem
formulation, QUBO encoding, Hamiltonian mapping, circuit construction,
interactive simulation, and variational optimization---culminating in an
iteration-by-iteration replay of the COBYLA optimization loop.
A key feature is the \emph{Phase--Probability Disconnect} visualization,
which uses a statevector disc representation to show students explicitly
how the cost layer rotates quantum phases while leaving measurement
probabilities unchanged, and how the subsequent mixer layer converts
accumulated phase differences into probability redistribution through
quantum interference.
We define six Intended Learning Outcomes aligned with the IEEE
Scholarship of Application framework and propose a pilot study design
using the System Usability Scale (SUS) and pre/post knowledge assessments
to evaluate the tool's educational effectiveness.
\end{abstract}

\begin{IEEEkeywords}
QAOA, quantum computing education, variational quantum algorithms,
interactive simulation, Qiskit, Streamlit, QUBO, quantum pedagogy
\end{IEEEkeywords}

% ============================================================
% I. INTRODUCTION
% ============================================================
\section{Introduction}

Quantum computing education faces a fundamental challenge: the concepts
underpinning near-term quantum algorithms---superposition, entanglement,
phase interference, and variational optimization---are deeply intertwined
and mutually dependent.
Students who encounter the Quantum Approximate Optimization Algorithm
(QAOA) \cite{farhi2014quantum} for the first time typically struggle with
three distinct conceptual barriers simultaneously: (1) the translation from
a classical binary optimization problem into a Quadratic Unconstrained
Binary Optimization (QUBO) matrix and then into a quantum Hamiltonian;
(2) the mechanism by which the parameterized quantum circuit encodes cost
information through phase rather than probability; and (3) the role of
classical--quantum feedback in the variational outer loop.

Existing educational resources tend to address these barriers in isolation.
Textbooks on quantum computing \cite{nielsen2010quantum} provide rigorous
mathematical foundations but lack interactive, problem-level examples.
Online tutorials \cite{qiskit_textbook} offer code-level guidance but
omit the step-by-step conceptual scaffolding that bridges classical
optimization and quantum circuits.
Research-oriented introductions to variational quantum eigensolvers
\cite{cerezo2021variational} and QAOA \cite{blekos2024review} assume
substantial prerequisites.

Interactive simulation environments have demonstrated pedagogical value in
adjacent STEM disciplines---physics education research has shown that
visual representations of quantum states significantly improve student
conceptual understanding \cite{mckagan2008developing}.
In quantum computing specifically, tools such as the Quirk circuit
simulator \cite{quirk} and IBM Quantum Composer provide visual circuit
editing but do not walk students through the derivation of a circuit
from a classical optimization problem.

This paper presents a purpose-built pedagogical tool that addresses all
three conceptual barriers within a unified, self-contained web application.
Our contributions are:
\begin{itemize}
  \item A six-step pedagogical scaffold applied consistently across
        three problem modules (unconstrained, equality-constrained,
        inequality-constrained), making the complexity progression
        explicit.
  \item A novel \emph{Phase--Probability Disconnect} visualization using
        a statevector disc representation \cite{johnston2019programming}
        that isolates the role of the cost layer (phase-only) from the
        mixer layer (amplitude redistribution).
  \item An iteration-by-iteration optimization replay feature allowing
        students to observe how the COBYLA optimizer navigates the
        energy landscape.
  \item A fully open-source implementation using Qiskit
        \cite{javadi2024quantum} and Streamlit, deployable without local
        installation.
\end{itemize}

% ============================================================
% II. BACKGROUND
% ============================================================
\section{Background}

\subsection{QAOA Formulation}

QAOA \cite{farhi2014quantum} is a variational algorithm for
approximately solving combinatorial optimization problems encoded as
\begin{equation}
  \min_{x \in \{0,1\}^n} C(x),
\end{equation}
where $C(x)$ is a binary cost function.
The algorithm prepares a parameterized quantum state
\begin{equation}
  |\boldsymbol{\gamma}, \boldsymbol{\beta}\rangle
  = U_B(\beta_p) U_C(\gamma_p) \cdots U_B(\beta_1) U_C(\gamma_1)
    |{+}\rangle^{\otimes n}
\end{equation}
and optimizes the variational parameters $(\boldsymbol{\gamma},
\boldsymbol{\beta})$ to minimize the expected energy
$\langle C \rangle = \langle \boldsymbol{\gamma}, \boldsymbol{\beta} |
H_C | \boldsymbol{\gamma}, \boldsymbol{\beta}\rangle$.

\subsection{QUBO and Hamiltonian Encoding}

A binary objective $C(x)$ is first written in QUBO form
$C(x) = x^\top Q x$ and then translated to an Ising Hamiltonian
via the substitution
\begin{equation}
  x_i \;\longrightarrow\; \frac{I - Z_i}{2},
  \label{eq:ising_map}
\end{equation}
where $Z_i$ is the Pauli-$Z$ operator on qubit $i$.
Linear terms $Z_i$ correspond to single-qubit $R_z(2\gamma)$ rotations;
quadratic terms $Z_i Z_j$ correspond to two-qubit $R_{zz}(2\gamma)$
entangling gates.
The number of $R_{zz}$ gates determines the connectivity of the cost
circuit---a pedagogically important proxy for hardware cost.

\subsection{Constraint Handling}

\subsubsection{Equality Constraints}
An equality constraint $g(x) = 0$ is incorporated via a quadratic penalty:
\begin{equation}
  C_{\text{total}}(x) = C(x) + A \cdot [g(x)]^2,
\end{equation}
where $A > 0$ is chosen large enough that all infeasible states have higher
total cost than any feasible state \cite{lucas2014ising}.

\subsubsection{Inequality Constraints}
An inequality constraint $h(x) \geq 0$ is first converted to an equality
by introducing a binary \emph{slack variable} $s$:
\begin{equation}
  h(x) - s = 0, \quad s \in \{0, 1\},
\end{equation}
adding one qubit to the circuit for each required slack bit
\cite{glover2019quantum}.

% ============================================================
% III. APPLICATION DESIGN
% ============================================================
\section{Application Design}

\subsection{System Overview}

The tool is implemented as a single-page Streamlit application with
modular Python source code organized into four layers: (i) \texttt{core/}
containing cost functions, the Qiskit simulation engine, and the COBYLA
wrapper; (ii) \texttt{viz/} containing the statevector disc renderer,
Plotly probability charts, and Qiskit circuit diagrams; (iii)
\texttt{pages/} containing one self-contained module per problem type;
and (iv) \texttt{app.py} implementing the landing page and
\texttt{session\_state}-based routing.
Navigation is entirely card-driven: three interactive module cards on the
landing page route the user into the selected learning module, and a
``$\leftarrow$ Back to Home'' button returns them to the dashboard without
losing session state.

\subsection{Simulation Engine}

All three modules share a common simulation engine
(\texttt{core/simulator.py}).
Rather than decomposing $H_C$ into individual $R_z$ and $R_{zz}$ gates
for statevector simulation---which would be numerically redundant---we
pre-compute the classical cost $C(x_i)$ for all $2^n$ basis states,
construct the diagonal phase vector
\begin{equation}
  \phi_i = e^{-i\gamma C(x_i)},
\end{equation}
and apply it as a single \texttt{Diagonal} unitary using
\texttt{qiskit.circuit.library.Diagonal}.
This approach is mathematically identical to the full gate decomposition
and yields the exact statevector needed for the phase visualization, while
remaining efficient for $n \leq 6$ qubits.

\subsection{Six-Step Pedagogical Scaffold}
\label{sec:scaffold}

Each module presents the same six steps, with content adapted to the
active problem type:

\textbf{Step 1: Problem Formulation.}
The binary optimization problem is presented alongside a complete truth
table enumerating all $2^n$ basis states, their costs, and---for
constrained modules---their feasibility status.

\textbf{Step 2: QUBO Encoding.}
The cost function is written as a matrix $Q$ such that $C(x) = x^\top Q x$.
For constrained problems, the penalty expansion is shown symbolically to
make the origin of each QUBO entry explicit.

\textbf{Step 3: Hamiltonian Mapping.}
The substitution of Eq.~\eqref{eq:ising_map} is applied term by term,
producing the cost Hamiltonian $H_C$.
The full $2^n \times 2^n$ diagonal matrix is displayed numerically, with
the ground state highlighted.

\textbf{Step 4: Circuit Construction and Phase--Probability Disconnect.}
Gate translation rules ($Z_i \to R_z$, $Z_iZ_j \to R_{zz}$) are stated
explicitly.
Three annotated Qiskit circuit diagrams show the initialization, cost, and
mixer stages.
Alongside each diagram, the statevector disc visualization
(Fig.~\ref{fig:phase_disconnect}) shows the evolution of all basis-state
amplitudes and phases.
A $\gamma$ slider is provided immediately below the cost-stage diagram:
students can observe that varying $\gamma$ changes the disc angles
(phases) while all disc radii (amplitudes) remain equal---isolating the
phase-encoding mechanism from amplitude redistribution.

\textbf{Step 5: Interactive Simulation.}
Dual $\gamma$/$\beta$ sliders allow free exploration of the energy
landscape with real-time updates to the disc visualization and the
probability bar chart.
Shot counts are configurable (128 to 4096) to illustrate the effect of
finite sampling noise.

\textbf{Step 6: Variational Optimization and Replay.}
A button triggers the COBYLA optimizer \cite{powell1994direct}, which
minimizes $\langle C \rangle$ over up to 60 iterations.
Every $(\gamma_k, \beta_k, \langle C \rangle_k)$ triple is stored in
\texttt{st.session\_state}.
A replay slider allows the student to scrub backward through the
optimization trajectory, re-running the statevector simulation at each
stored parameter pair to reconstruct the exact quantum state at any
past iteration.

\subsection{Progressive Complexity and Circuit Connectivity}

A key design goal is to make the \emph{hardware cost} of constraint
encoding visible.
Table~\ref{tab:connectivity} summarizes the growth in circuit complexity
across modules.
As shown in Fig.~\ref{fig:topology}, the qubit interaction graph evolves
from a sparse single-edge graph (standard) to a fully connected
$K_3$ (equality) to a $K_4$ graph with an ancilla slack qubit
(inequality).
Each additional $R_{zz}$ gate represents a two-qubit entangling operation
that would require additional calibration and error mitigation on real hardware.

\begin{table}[ht]
  \centering
  \caption{Circuit Complexity Across Modules}
  \label{tab:connectivity}
  \begin{tabular}{@{}lcccl@{}}
    \toprule
    Module & Qubits & $R_z$ & $R_{zz}$ & Topology \\
    \midrule
    Standard      & 3 & 2 & 1 & Sparse (1 edge) \\
    Equality      & 3 & 3 & 3 & $K_3$ (fully connected) \\
    Inequality    & 4 & 4 & 6 & $K_4$ with slack qubit \\
    \bottomrule
  \end{tabular}
\end{table}

\begin{figure}[ht]
  \centering
  \includegraphics[width=\columnwidth]{paper_figures/fig4_topology.pdf}
  \caption{Qubit interaction topologies for the three QAOA modules.
           Each node represents a qubit; each edge represents a $R_{zz}$
           entangling gate in the cost layer.
           Left: standard (sparse). Centre: equality constraint ($K_3$).
           Right: inequality constraint ($K_4$ with slack qubit $s$).}
  \label{fig:topology}
\end{figure}

\begin{figure}[ht]
  \centering
  \includegraphics[width=\columnwidth]{paper_figures/fig5_phase_disconnect.pdf}
  \caption{The Phase--Probability Disconnect visualization for the
           standard 3-qubit module.
           Each disc represents one of the $2^3 = 8$ basis states.
           Radius encodes amplitude $|\langle x|\psi\rangle|$;
           pointer angle encodes phase $\arg\langle x|\psi\rangle$.
           \textbf{Left (Stage A):} After Hadamard initialization, all
           radii are equal and all phases are zero.
           \textbf{Centre (Stage B):} After the cost layer
           ($\gamma = \pi$), radii remain equal but phases rotate
           differentially---phase encoding is isolated from amplitude.
           \textbf{Right (Stage C):} After the mixer layer ($\beta = 0.5$),
           radii differ---interference has converted phase information
           into amplitude (probability) redistribution.}
  \label{fig:phase_disconnect}
\end{figure}

% ============================================================
% IV. INTENDED LEARNING OUTCOMES
% ============================================================
\section{Intended Learning Outcomes}

Following the IEEE Transactions on Education ``Scholarship of
Application'' framework \cite{felder1988learning}, we specify six
Intended Learning Outcomes (ILOs) for students who complete all three
modules.
Upon completion, students will be able to:

\begin{enumerate}
  \item[\textbf{ILO 1}] \textbf{Formulate} a binary optimization problem
    as a QUBO matrix, identifying linear bias terms and quadratic coupling
    terms.
  \item[\textbf{ILO 2}] \textbf{Derive} the cost Hamiltonian $H_C$ from
    a QUBO matrix using the Ising spin substitution $x_i \to (I-Z_i)/2$,
    and identify which Hamiltonian terms correspond to which quantum gates.
  \item[\textbf{ILO 3}] \textbf{Explain} the Phase--Probability Disconnect:
    why the cost layer encodes information in phase rather than amplitude,
    and how the mixer layer converts phase differences into probability
    differences through quantum interference.
  \item[\textbf{ILO 4}] \textbf{Apply} the quadratic penalty method to
    encode an equality constraint into a QUBO, and justify the choice of
    penalty weight $A$.
  \item[\textbf{ILO 5}] \textbf{Construct} a slack variable formulation
    for a binary inequality constraint, determine the required number of
    slack bits, and describe the resulting increase in circuit connectivity.
  \item[\textbf{ILO 6}] \textbf{Trace} the variational optimization
    process iteration by iteration using the optimization replay feature,
    connecting the abstract notion of a variational quantum algorithm to
    observable changes in measurement probability distributions.
\end{enumerate}

These ILOs span Bloom's Taxonomy levels from \emph{Remember}
(ILO 1) through \emph{Apply} (ILO 4--5) to \emph{Analyze} (ILO 6),
providing a structured progression from factual recall to synthesis
\cite{bloom1956taxonomy}.

% ============================================================
% V. FINDINGS AND DISCUSSION
% ============================================================
\section{Findings and Discussion}

\subsection{Design Rationale and Qualitative Observations}

The tool's current form reflects several deliberate design decisions
that emerged during iterative development.

\textbf{Diagonal gate trick.}
The use of \texttt{qiskit.circuit.library.Diagonal} to apply the full
cost unitary in a single operation---rather than decomposing it into
individual $R_z$ and $R_{zz}$ gates---was chosen for simulation fidelity.
The displayed circuit diagram uses the decomposed form (pedagogically
correct), while the backend uses the efficient diagonal form (numerically
stable).
This separation of ``circuit as teaching artefact'' from
``circuit as simulation instruction'' reflects an important principle
in educational tool design.

\textbf{Phase visualization.}
Pilot interaction with the tool by the authors revealed that the
Phase--Probability Disconnect is consistently the most counterintuitive
concept for novice learners.
The statevector disc visualization \cite{johnston2019programming}---where
radius encodes amplitude and pointer angle encodes phase---proved more
effective than phasor plots (Argand diagrams) at conveying the
simultaneous nature of the 8 or 16 complex amplitudes, because all basis
states are visible simultaneously and the uniform radius after the cost
layer is immediately apparent without needing to read numerical values.

\textbf{Progressive constraint complexity.}
Structuring the three modules as an ordered progression---unconstrained,
equality, inequality---with Table~\ref{tab:connectivity} as an explicit
summary makes the cost of constraint encoding quantitatively visible,
addressing a gap we identified in existing educational materials.

\subsection{Proposed Pilot Study Design}

A formal evaluation of the tool's educational effectiveness is planned
as future work.
We propose a within-subjects study with undergraduate and early
postgraduate students enrolled in quantum computing courses.
Participants will complete the tool's three modules in sequence during
a single two-hour lab session.

\textbf{Instrument 1: Pre/Post Knowledge Assessment.}
A 12-item multiple-choice assessment will be administered before and
after the lab session.
Items will be mapped to ILOs 1--6 (two items per ILO) and will assess
conceptual understanding rather than procedural recall.
Bloom's taxonomy levels represented: Knowledge (ILO 1), Comprehension
(ILO 2--3), Application (ILO 4--5), Analysis (ILO 6).

\textbf{Instrument 2: System Usability Scale (SUS).}
The validated 10-item SUS questionnaire \cite{brooke1996sus} will be
administered immediately after the session to assess perceived usability.
A SUS score $\geq 68$ (industry ``above average'') will be the
benchmark for usability acceptance.

\textbf{Instrument 3: Think-Aloud Protocol.}
A subset of participants (target $n = 5$) will complete the tool while
verbalizing their reasoning, providing qualitative data on conceptual
sticking points and interface confusion.

Expected outcomes from this study will directly inform the tool's
next iteration, particularly regarding the visualization density of the
16-state disc grid in the inequality module and the scaffolding of
the optimization replay feature.

% ============================================================
% VI. CONCLUSION
% ============================================================
\section{Conclusion}

We have presented an open-source, browser-based pedagogical tool for
teaching QAOA that addresses the three primary conceptual barriers
identified in existing educational resources: the derivation of a quantum
circuit from a classical binary optimization problem, the mechanism of
phase-based quantum information encoding, and the role of classical--quantum
feedback in variational algorithms.
The tool's key contributions---the six-step modular scaffold, the
Phase--Probability Disconnect visualization, the progressive constraint
complexity across three modules, and the optimization replay feature---are
grounded in established learning design principles and implemented with
full reproducibility via fixed random seeds in Qiskit's statevector
simulator.

The tool is designed for deployment in quantum engineering and quantum
computing courses at the upper-undergraduate and postgraduate levels.
Future work includes the formal pilot study described in
Section~\ref{sec:pilot}, extension to multi-layer QAOA ($p > 1$),
and integration with real quantum hardware via Qiskit Runtime to allow
students to observe the effect of hardware noise on the optimization
landscape.

% ============================================================
% REFERENCES
% ============================================================
\bibliographystyle{IEEEtran}
\bibliography{references}

% Inline bibliography for self-contained submission
% Remove this if using BibTeX
\begin{thebibliography}{00}

\bibitem{farhi2014quantum}
E.~Farhi, J.~Goldstone, and S.~Gutmann,
``A quantum approximate optimization algorithm,''
\textit{arXiv preprint arXiv:1411.4028}, 2014.

\bibitem{nielsen2010quantum}
M.~A. Nielsen and I.~L. Chuang,
\textit{Quantum Computation and Quantum Information}, 10th anniversary ed.
Cambridge, UK: Cambridge University Press, 2010.

\bibitem{qiskit_textbook}
A.~Javadi-Abhari \textit{et al.},
``Quantum computing with Qiskit,''
\textit{arXiv preprint arXiv:2405.08810}, 2024.

\bibitem{cerezo2021variational}
M.~Cerezo \textit{et al.},
``Variational quantum algorithms,''
\textit{Nature Reviews Physics}, vol.~3, no.~9, pp.~625--644, 2021.

\bibitem{blekos2024review}
K.~Blekos \textit{et al.},
``A review of QAOA: An alternative to classical solving of optimization problems,''
\textit{Physics Reports}, vol.~1044, pp.~1--93, 2024.

\bibitem{mckagan2008developing}
S.~B. McKagan, K.~K. Perkins, and C.~E. Wieman,
``Developing and researching PhET simulations for teaching quantum mechanics,''
\textit{American Journal of Physics}, vol.~76, no.~4--5, pp.~406--417, 2008.

\bibitem{quirk}
C.~Gidney,
``Quirk: A drag-and-drop quantum circuit simulator,''
[Online]. Available: \url{https://algassert.com/quirk}, 2016.

\bibitem{johnston2019programming}
E.~Johnston, N.~Harrigan, and M.~Gimeno-Segovia,
\textit{Programming Quantum Computers: Essential Algorithms and Code Samples}.
Sebastopol, CA: O'Reilly Media, 2019.

\bibitem{javadi2024quantum}
A.~Javadi-Abhari \textit{et al.},
``Quantum computing with Qiskit,''
\textit{arXiv preprint arXiv:2405.08810}, 2024.

\bibitem{lucas2014ising}
A.~Lucas,
``Ising formulations of many NP problems,''
\textit{Frontiers in Physics}, vol.~2, p.~5, 2014.

\bibitem{glover2019quantum}
F.~Glover, G.~Kochenberger, and Y.~Du,
``Quantum Bridge Analytics I: A tutorial on formulating and using QUBO models,''
\textit{4OR}, vol.~17, no.~4, pp.~335--371, 2019.

\bibitem{powell1994direct}
M.~J.~D. Powell,
``A direct search optimization method that models the objective and constraint
functions by linear interpolation,''
in \textit{Advances in Optimization and Numerical Analysis},
S.~Gomez and J.-P. Hennart, Eds.
Dordrecht: Springer, 1994, pp.~51--67.

\bibitem{felder1988learning}
R.~M. Felder and L.~K. Silverman,
``Learning and teaching styles in engineering education,''
\textit{Engineering Education}, vol.~78, no.~7, pp.~674--681, 1988.

\bibitem{bloom1956taxonomy}
B.~S. Bloom \textit{et al.},
\textit{Taxonomy of Educational Objectives: The Classification of Educational Goals,
Handbook I: Cognitive Domain}.
New York: David McKay, 1956.

\bibitem{brooke1996sus}
J.~Brooke,
``SUS: A `quick and dirty' usability scale,''
in \textit{Usability Evaluation in Industry},
P.~W. Jordan \textit{et al.}, Eds.
London: Taylor \& Francis, 1996, pp.~189--194.

\end{thebibliography}

\end{document}