Build guide

American Yawp Practice Questions Product Page

This should look and behave like a page on the existing store, not a separate study app or microsite. Reuse the site’s header, footer, typography, buttons, product data, checkout flow, review component and policy links.

Part 1Build objective

Create an indexable digital-product page that combines:

  1. A standard product header and functioning purchase box.
  2. A fully readable chapter-by-chapter practice-question sample.
  3. Complete test-bank coverage and format information.
  4. Purchase FAQs, live reviews and a final purchase CTA.

Use the supplied written page as the source for all editorial wording. Do not rewrite, shorten or generate additional questions.

Part 2Source-of-truth rules

Bind commercial details to the existing American Yawp test-bank product record wherever possible:

  • Product name
  • Current price and currency
  • Featured product image
  • Download formats
  • Delivery method
  • Volume inclusion
  • Edition information
  • Question counts
  • Refund or exchange policy
  • Review average and count
  • Add-to-cart or buy-now action

Do not publish placeholders or infer missing commercial claims. Do not invent question counts, reviews, ratings, formats, update promises or refund terms.

If the manuscript and live product record conflict on price, availability, formats or policy, use the live store data for the transactional field.

Part 3Page structure

Build the page in this order:

  1. Site breadcrumb, if the theme normally uses one
  2. Product header and buy box
  3. Free sample practice questions
  4. Full test-bank contents
  5. Formats and uses
  6. Questions before buying
  7. Reviews
  8. Final purchase bar

Use one <main> element and one H1. The main section headings should be H2s. Preserve the writer’s headings, but assign heading levels by their function rather than by font size.

Do not add a sidebar, related-product carousel, popup, email gate or floating promotion.

Part 4Product header and buy box

Desktop layout

Use a two-column product header:

  • Left: approximately 38–42% width for the product image
  • Right: approximately 58–62% width for product information and purchase controls

Place the following in the right column, in the order supplied:

  1. H1
  2. Introductory product paragraph
  3. Price
  4. Text-based file-format badges
  5. Primary purchase button
  6. Two-line delivery note

Place the short “what you download” statement directly beneath the two-column header, spanning the content width.

Product image

Use the registered product image if one exists. It should represent the downloadable files and, ideally, visibly indicate both volumes or chapter coverage.

If no product image exists, create a simple document-file mockup using:

  • The exact product name
  • “Volume I + Volume II” if both are included
  • A short visual chapter list derived from the supplied chapter table

Do not use an unofficial textbook cover, borrowed artwork or fabricated publisher branding. The image is supportive; all essential information must remain available as HTML text.

Set explicit image dimensions and an informative alt attribute based on the product name.

Purchase behavior

All purchase buttons on the page must act on the same product and use the site’s normal digital-product purchase flow.

  • Use the supplied CTA wording.
  • Do not link a purchase button to a generic shop page.
  • Preserve normal loading, disabled and error states.
  • If the site supports direct checkout, use its established behavior.
  • If it uses a cart, add the correct product and show the standard confirmation.

Do not add countdowns, fake scarcity, crossed-out prices or unsupported trust claims.

Part 5Free sample practice questions

Give this section a stable ID such as:

<section id="practice-questions">

This is the longest and most prominent content section after the product header.

Chapter index

Immediately below the section introduction, add a visible anchored chapter index using ordinary text links. It should link only to chapter samples actually present in the manuscript.

Example structure:

<nav aria-label="Sample questions by chapter">
  <a href="#chapter-1-the-new-world">1. The New World</a>
  ...
</nav>

Allow links to wrap naturally. Do not turn the index into a carousel or dropdown.

Each destination must use scroll-margin-top so the chapter heading is not hidden beneath a sticky site header.

Volume blocks

Group the supplied sample cards under separate Volume I and Volume II subheadings. Use the writer’s exact volume labels.

Recommended heading hierarchy:

  • H2: sample-question section
  • H3: volume
  • H4: chapter number and title

Question cards

Render every sample question supplied in the manuscript as its own visible card. Do not create cards for chapters that appear only in the full coverage table.

Each card must contain, in this order:

  1. Chapter number and textbook chapter title
  2. Question stem
  3. Four answer options
  4. Explicit correct-answer line
  5. One-sentence reason
  6. Terms line, only when supplied

Use a native ordered list for answer choices. Display alphabetical markers:

<ol class="answer-options" type="A">
  <li>...</li>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ol>

Place the answer and explanation in a distinct answer panel beneath the options. The correct answer must be identified in text, not only by color or an icon.

Suggested semantic pattern:

<article class="question-card" id="chapter-1-the-new-world">
  <h4>...</h4>
  <p class="question-stem">...</p>
  <ol type="A">...</ol>
  <div class="answer">
    <p><strong>Correct: B.</strong> ...</p>
  </div>
  <p class="terms"><strong>Terms this chapter’s questions test:</strong> ...</p>
</article>

Do not:

  • Blur any part of the question
  • Collapse the answer
  • Require a click to reveal the answer
  • Put cards behind tabs
  • Gate the sample behind sign-in
  • Turn questions into an interactive quiz that replaces the visible text

The entire sample must exist in the server-rendered page.

Volume II coverage note and CTA

Place the supplied note about Volume II chapters not sampled directly after the Volume II cards. Keep it visibly associated with the sample rather than moving it into fine print.

Follow it with the supplied “get every question” purchase button. This button must use the same product action as the hero CTA.

Part 6Full test-bank contents

Create a separate section after the sample. Include the writer’s lead sentence explaining that textbook chapter titles are the reliable way to match chapters when a course uses different numbering.

Coverage table

Render the complete chapter inventory as one semantic table with these columns:

  • Volume
  • Chapter number
  • Chapter title
  • Question types
  • Number of questions

Use the exact rows and values supplied by the writer. Every chapter in both volumes must remain present in the HTML; do not paginate or lazy-load rows.

Use:

  • A <caption> containing the table’s purpose
  • <th scope="col"> for column headings
  • <th scope="row"> for the chapter identifier where practical

On narrow screens, place the table in a horizontally scrollable wrapper. Do not remove columns or replace the table with a link to a separate file.

Supporting passages

After the table, present the three supplied explanatory passages in this order:

  1. How to combine chapter files for an Exam 1 or Exam 2 range
  2. What question types the bank contains and how these differ from the textbook’s discussion questions
  3. How answers were checked, which edition is followed and the applicable update policy

Use short H3 subheadings if the writer supplied them. Otherwise, render them as distinct paragraphs with adequate spacing.

If the discussion-question passage includes an official American Yawp resource link, use the verified URL supplied in the copy or CMS. Open external links according to the site’s standard behavior. Do not create an unverified destination.

Part 7Formats, flashcards and classroom use

Build this as one section with two visible sub-blocks:

  1. For studying
  2. For teaching

Follow those blocks with the small file-format table, unless the manuscript explicitly places the table earlier.

For studying

Keep the import instructions as ordinary readable text. If the copy includes steps for Quizlet or Anki, format each app’s instructions as a short list.

Do not imply that the download includes a native Quizlet, Anki or LMS package unless the actual product does.

For teaching

Preserve the distinctions among:

  • Printing a worksheet
  • Keeping the answer key separate
  • Copying or importing questions into classroom platforms

Do not add platform logos or claim one-click integration unless supported by the downloadable files.

Format table

Use a semantic table with one row per actual file type and a column explaining its best use, such as reading, printing or importing. File names and extensions must come from the product data or supplied copy.

On mobile, retain all content through horizontal scrolling or accessible stacked rows.

Part 8Questions before buying

Display the three supplied question-and-answer pairs as open text. Do not use an accordion.

Each question should be an H3 followed by its answer. Cover the supplied topics:

  • Whether these are an instructor’s exact quiz questions
  • Edition or chapter-number mismatch and the applicable refund/exchange process
  • Whether both volumes are included and which volume commonly aligns with HIST 1301 or HIST 1302

Link policy wording to the site’s live refund or exchange policy where appropriate. The answer must match the actual product configuration and store policy.

Do not mark the chapter sample questions as QAPage or FAQPage structured data. If the site routinely emits FAQ structured data, it may apply it only to these visible pre-purchase Q&A pairs and only when the markup exactly matches the displayed text.

Part 9Reviews

Use the site’s existing review component.

For product-specific reviews, show:

  • Average rating
  • Product review count
  • A small selection of recent reviews
  • The review text and any supported use-case information

Do not edit review wording or generate reviews.

If the product has no reviews:

  • Show the live site-wide rating only if the site already maintains one.
  • Label it clearly as a store or site-wide rating.
  • Do not present it as an American Yawp product rating.
  • Do not put a site-wide rating into the product’s aggregateRating schema.

If neither product nor site-wide review data exists, use the theme’s standard honest empty state or omit the review entries. Never insert sample testimonials.

Part 10Final purchase bar

Place a full-width purchase bar after reviews and before the site footer. It should contain:

  • The supplied one-line product summary
  • Current price
  • Primary purchase button

Use an end-of-page bar rather than introducing a new sticky interface. If the existing product-page component is already sticky by design, retain its normal behavior, but do not create an additional sticky element.

The final button must perform the same action as the hero and sample-section CTAs.

Part 11Visual treatment

Follow the site’s existing design tokens and product-page conventions.

Recommended treatment within those conventions:

  • Standard page max width: approximately 1120–1200px
  • Prose measure: approximately 65–75 characters
  • Generous spacing between major sections
  • Light borders or subtle background contrast for question cards
  • Stronger but restrained treatment for answer panels
  • Text badges for file types
  • One primary CTA color used consistently

Do not mimic Quizlet, Canvas or another third-party product interface.

Avoid oversized promotional banners. The free questions should visually dominate the middle of the page, while the purchase controls remain easy to find.

Responsive behavior

At mobile widths:

  • Stack the product image above the product copy and buy box.
  • Make primary CTAs full width if that matches the theme.
  • Allow chapter-index links to wrap.
  • Keep question options as vertical lists.
  • Make tables horizontally scrollable.
  • Preserve all explanations, terms and coverage notes.
  • Do not hide content behind “read more.”

Use touch targets of at least 44×44 CSS pixels.

Part 12Accessibility

  • Maintain logical heading order.
  • Use native links, buttons, lists and tables.
  • Ensure every CTA has a clear accessible name.
  • Do not communicate the correct answer by color alone.
  • Maintain WCAG AA text and control contrast.
  • Provide visible keyboard focus states.
  • Add an accessible label to the chapter-index navigation.
  • Associate table headings correctly.
  • Keep all question and answer text selectable.
  • Respect reduced-motion preferences; no animation is required.
  • Avoid auto-scrolling after chapter-index navigation.

Part 13SEO and structured data

Page metadata

Use the writer-supplied SEO title and meta description if provided. Otherwise, derive them from the final H1 and product summary without adding unsupported claims.

Also provide:

  • Self-referencing canonical URL
  • Index/follow robots directive
  • Open Graph title, description and product image
  • Twitter/X card metadata if the site supports it

The page must be server-rendered and crawlable without client-side interaction.

Structured data

Use the site’s normal JSON-LD system to emit:

  • Product
  • Current Offer
  • BreadcrumbList, if breadcrumbs are shown

Product schema should use the same:

  • Product name
  • Image
  • Price
  • Currency
  • Availability
  • URL

Only include aggregateRating and review when they belong to this product and are visible on the page.

Do not use:

  • Course schema
  • QAPage for multiple-choice samples
  • Fabricated ratings
  • An offer price that differs from the visible live price

Part 14Performance

  • Server-render all chapter questions, answers and table rows.
  • Load the hero product image eagerly and give it explicit dimensions.
  • Use an optimized modern image format where supported.
  • Avoid loading quiz-app JavaScript; no interactive quiz engine is needed.
  • Use CSS for cards, badges and the document mockup fallback.
  • Defer nonessential review scripts if the site’s review platform allows it without removing crawlable review content.
  • Prevent layout shift around the product image, price and review component.

Part 15Analytics

Connect all purchase buttons to the site’s existing ecommerce analytics.

At minimum, preserve or emit the site’s standard events for:

  • Product view
  • Add to cart or begin checkout
  • Purchase

If CTA-position tracking is supported, identify the placements as:

  • Hero
  • End of sample
  • Final bar

Do not create duplicate purchase events when a single button click transitions directly to checkout.

Part 16Do not add

Do not introduce content or components for:

  • Chapter summaries or notes
  • A glossary page
  • AP or CLEP preparation
  • Study games or matching games
  • Related Quizlet sets
  • A flashcard player
  • Discussion-board answers
  • Blurred previews
  • Sign-up gates
  • Related-product carousels
  • App advertisements
  • Popups
  • Invented reviews or question counts

The supplied sample is the free material. The complete downloadable bank is the paid product.

Part 17Pre-launch checks

Confirm all of the following before publishing:

  • There is exactly one H1.
  • The live product price appears consistently in the hero and final bar.
  • Every CTA acts on the correct American Yawp product.
  • File-format labels match the files actually delivered.
  • Instant-download wording matches the real checkout process.
  • All supplied sample questions, options, answers and reasons are visible.
  • Terms lines appear only where supplied.
  • Every chapter-index link reaches the correct card.
  • Volume I and Volume II are clearly separated.
  • The unsampled-chapter note is visible after the Volume II sample.
  • The contents table includes every supplied chapter row.
  • No table rows or sample cards are hidden on mobile.
  • Edition, update and refund language matches current policy.
  • Product and site-wide ratings are not conflated.
  • Product structured data validates and matches the visible offer.
  • No placeholders, fabricated values or unsupported claims remain.
  • The page works with JavaScript disabled except for checkout features that inherently require it.
  • The full purchase flow has been tested on desktop and mobile.